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,
};
};