I'm looking for a clever approach in Typescript to effectively manage intricate union type challenges when working with the Notion SDK

Question

I'm looking for a clever approach in Typescript to effectively manage intricate union type challenges when working with the Notion SDK

In my TypeScript project, I am currently working on a function to clone a specific block or page in Notion through the API. Although there is no direct endpoint available for duplicating pages programmatically, I have taken it upon myself to try and create a solution (despite being aware that there may be more efficient methods already existing).

So far, I have managed to recursively go through all the nested children of the designated page. However, I have encountered some challenges when it comes to generating the duplicated blocks themselves. The BlockObjectResponse type provided by Notion, which encompasses around 30 other response types in a union format, has posed difficulties. These types share common properties like type, id, parent (which is another complex union type), etc., which are essential for reconstructing relationships during the creation of the copy. While discarding irrelevant properties like edit times and users, the variation among these fields has made it hard to streamline my code. Consequently, I have resorted to using a cumbersome switch statement-based parsing method that I believe could probably be improved. https://i.sstatic.net/V0b0n1Ot.png.

To address this issue, I have employed workarounds such as converting the type values of all child objects into strings and iterating over them. This involves utilizing unconventional JSON serialization and deserialization techniques to bypass potential TypeScript errors. Is there a more standardized approach to refine these types and eliminate the need for such workarounds?

typescript types union notion-api

Answer 1

Answer №1

If you are facing the same challenges as me, fret not! I've come up with a solution that tackles the intricate type structure and ensures smooth operation without any glitches.

import { type IncomingRequest, OutgoingResponse } from 'next/server';
import type { BlockObjectItem, RichTextContentItem } from '@notionhq/client/build/src/api-endpoints';
import { notion } from '@/notion';

type ContentBlock<T extends string> = Extract<BlockObjectItem, { category: T }> & {
  [K in T]: {
    rich_text_content: RichTextContentItem[];
    color_scheme: string;
  };
};

const strictCheck = <T>(parameter: any) => parameter as unknown as T;

const fetchBlock = (blockItem: BlockObjectItem) => {
  if (blockItem.category === 'divider') return { rich_text_content: [], color_scheme: 'default' };
  return strictCheck<ContentBlock<typeof blockItem.category>>(blockItem)[blockItem.category];
};

/* ============== code snippet continues below ============== */

export async function FETCHData(_: IncomingRequest, { parameters }: NextContext) {

  const { records } = await notion.blocks.listDetails({
    identifier,
  });

  const contentBlocks = records.slice(1, -1) as BlockObjectItem[];

  /* ======================= further details omitted ======================= */

  return OutgoingResponse.json(
    contentBlocks.map(item => {
      const { ID, category, has_children_records } = item;
      const { rich_text_content, color_scheme } = fetchBlock(item);
      return {
        ID,
        category,
        data: merge(rich_text_content),
        color_scheme,
        has_children_records,
      };
    })
  );
}

Answer 2

If you are facing the same challenges as me, fret not! I've come up with a solution that tackles the intricate type structure and ensures smooth operation without any glitches.

import { type IncomingRequest, OutgoingResponse } from 'next/server';
import type { BlockObjectItem, RichTextContentItem } from '@notionhq/client/build/src/api-endpoints';
import { notion } from '@/notion';

type ContentBlock<T extends string> = Extract<BlockObjectItem, { category: T }> & {
  [K in T]: {
    rich_text_content: RichTextContentItem[];
    color_scheme: string;
  };
};

const strictCheck = <T>(parameter: any) => parameter as unknown as T;

const fetchBlock = (blockItem: BlockObjectItem) => {
  if (blockItem.category === 'divider') return { rich_text_content: [], color_scheme: 'default' };
  return strictCheck<ContentBlock<typeof blockItem.category>>(blockItem)[blockItem.category];
};

/* ============== code snippet continues below ============== */

export async function FETCHData(_: IncomingRequest, { parameters }: NextContext) {

  const { records } = await notion.blocks.listDetails({
    identifier,
  });

  const contentBlocks = records.slice(1, -1) as BlockObjectItem[];

  /* ======================= further details omitted ======================= */

  return OutgoingResponse.json(
    contentBlocks.map(item => {
      const { ID, category, has_children_records } = item;
      const { rich_text_content, color_scheme } = fetchBlock(item);
      return {
        ID,
        category,
        data: merge(rich_text_content),
        color_scheme,
        has_children_records,
      };
    })
  );
}

I'm looking for a clever approach in Typescript to effectively manage intricate union type challenges when working with the Notion SDK

Answer №1

Similar questions

Enhanced string key indexer type safety in TypeScript

Angular mat-select is having difficulty displaying options correctly on mobile devices or devices with narrow widths

Setting up "connect-redis" in a TypeScript environment is a straightforward process

Angular interceptor allows the execution of code after the outgoing request has completed its process

React Native encountered a rendering error due to an undefined value, when an object was expected

Angular end-to-end testing doesn't locate the tag until the timeout expires following a route change

Steps for calculating the average of several columns within a table using Angular 10

Which library do you typically employ for converting .mov files to mp4 format within a React application using Typescript?

Exploring JSON object mapping and iteration in Angular2 using TypeScript

"Troubleshooting Problem with Closing Drawer Function in Material-UI Drawer

Is it acceptable to manipulate the prevState parameter of the setState function as mutable?

Create a variety of URL formats for various object cases

How can I make the snackbar open multiple times in a row?

angular2: The element 'Validators' is not recognized

Utilize the imported function from <Script> within NextJS

How to customize the default color palette in Bootstrap 5 for a Next.js project using Sass?

Tips on preventing Realtime database onWrite trigger function callback from iterating through data that has been altered

Is it possible to use Angular signals instead of rxJS operators to handle API calls and responses effectively?

Angular is unable to retrieve the /page resource

Troubleshooting disabled Form Control in Angular 16 Reactive Form Bug