Mastering the art of connecting content within Prismic

Question

Mastering the art of connecting content within Prismic

I have been working on creating a mega menu for my website header, but I am encountering a type error. Has anyone else faced this issue before and how did you resolve it? I am currently importing the generated types from @/prismicio-types.

Here is an example of my client query:

export default async function getHeaderSettings(
  client: Client<AllDocumentTypes>
): Promise<HeaderDocument<string>> {
  return client.getSingle('header', {
    graphQuery: `
          {
              header {
                  logo
                  menu {
                      label
                      is_link
                      link
                      submenu {
                          cta_image
                          menu {
                              item {
                                  ...itemFields
                              }
                          }
                      }
                  }
              }
          }
      `,
  });
}

The above query fetches the necessary data that gets passed into the header component:

interface IHeader {
  data: Simplify<HeaderDocumentData>;
}

However, I'm facing an issue when trying to access the submenu data, resulting in the following error:

Property 'data' does not exist on type 'ContentRelationshipField<"header_submenu">'.
  Property 'data' does not exist on type 'EmptyLinkField<"Document">'.

const formatHeaderData = (data: Simplify<HeaderDocumentData>) => {
  const { menu, logo } = data;

  const formattedMenu = menu.length
    ? menu.map((item) => {
        return {
          label: item.label,
          is_link: item.is_link,
          link: item.link,
          submenu: {
            cta_image: item.submenu.data.cta_image,
            menu: item.submenu.data.menu.map((subMenuItem) => {
              return {
                menu_label: subMenuItem.item.data.menu_label,
                menu: subMenuItem.item.data.menu,
              };
            }),
          },
        };
      })
    : [];
  
  return {
    logo,
    menu: formattedMenu,
  };
};

typescript next.js prismic.io

Answer 1

Answer №1

The HeaderDocument type you are using does not automatically include the types for content relationship fields. To address this, one approach is to modify the return type of the getHeaderSettings function.

Here's an example illustrating one level of nesting (additional levels will need to be added):

import type { Content } from '@prismicio/client';

type HeaderWithMenuDocument =
  Content.HeaderDocument & {
    data: {
      menu: Content.MenuDocument;
    };
  };

After defining the above structure, update the return type of your function as follows:

export default async function getHeaderSettings(
  client: Client<AllDocumentTypes>
): Promise<HeaderWithMenuDocument>

Answer 2

The HeaderDocument type you are using does not automatically include the types for content relationship fields. To address this, one approach is to modify the return type of the getHeaderSettings function.

Here's an example illustrating one level of nesting (additional levels will need to be added):

import type { Content } from '@prismicio/client';

type HeaderWithMenuDocument =
  Content.HeaderDocument & {
    data: {
      menu: Content.MenuDocument;
    };
  };

After defining the above structure, update the return type of your function as follows:

export default async function getHeaderSettings(
  client: Client<AllDocumentTypes>
): Promise<HeaderWithMenuDocument>

Mastering the art of connecting content within Prismic

Answer №1

Similar questions

What is the best way to incorporate cors modules in TypeScript?

Using selectors and mappers in Typescript generics

Using Tailwind CSS to set the margin of an element at certain breakpoints is not functioning as expected

Error in Angular6: Why can't handleError read injected services?

Creating a DynamoDB table and adding an item using CDK in Typescript

Using Typescript to pass an interface as an argument to a function that requires a JSON type

What is the correlation between single-page applications and server-side rendering?

The optimal location to declare a constructor in Typescript

Guide to importing a function exclusively on the client side in Next.js

Hover Effect for 3D Images

Retrieving a single object in NEXT.JS and MongoDB can be achieved by returning just a single object

Adding text in CKEditor with Angular while preserving the existing formatting

The value of type 'string' cannot be assigned to type '"menu" | "selectedMenu" | undefined' as it is not compatible with the specified types

type of key extractor is unknown in React Native

Is it possible to restrict optionality in Typescript interfaces based on a boolean value?

The getInitialProps function in Next.js React components does not automatically bind props

Difficulty encountered when attempting to create a lambda function in TypeScript

Error: The URL constructor is unable to process /account as a valid URL address

When using a functional component as the initial state value, make sure to wrap it in React.memo to avoid

Create an HTTP-only cookie through the next API