Hey @Phil Thank you for clarifying. I, too, followed the blog to the letter and got stuck fetching the data. It was not clear to me that we have to use GraphQuery for this. And I have two problems with this approach. Hope you can help me understand.
1. Problem: I found it weird that the tsx of the slices is nowhere mentioned. Should the menu item and sub menu item files stay "empty"? So we just use the slices to represent the data?
2. Problem: the query you provided is quite far from what I got after a lot of trial and error. Namely the use of "slices", "primary"...
export async function getLayoutData() {
const client = createClient();
const layoutData = await client.getSingle("layout", {
graphQuery: `{
layout {
...layoutFields
slices {
...on menu_item {
variation {
...on default {
primary {
...primaryFields
}
}
...on withSubMenu {
primary {
label
sub_menu {
slices {
...on sub_menu_item {
variation {
...on default {
primary {
...primaryFields
}
}
}
}
}
}
}
}
}
}
}
}
}`,
});
return layoutData;
}
This fetches the data in what I assume is the correct way. But my typescript is completely confused.
{layout.data.slices.map((slice) => (
<div>
{slice.primary.label}
{slice.variation === "withSubMenu" &&
slice.primary.sub_menu.data.slices.map((sub_menu_item) => (
<div>{sub_menu_item.primary.label}</div>
))}
</div>
))}
Data is not being recognized.
I fixed it with the help of the solutions mentioned here Content relationship types within another content relationship in a Slice - #3 by angeloashmore (although not sure if I used it correctly.
But now sub menu item is not being correctly typed. I am sure this is a typing problem, as the data is displayed and found.
I feel overwhelmed when all I want is a few links under a few links. Hope you can shine some light on what I am doing wrong.
PS: for completeness, here is the rest of the data models:
