Fetch data from content relationship in slices

[sho25052007 (shoski Suzuki)]

ive followed this tutorial: mega menu prismic using nuxtjs

i've set up a "menu" custom type with a slice "MenuItem" with the variation "WithSubMenu" and this links to a sub menu called "Footer Sub Menu"

I get a document returned when i fetch data like this:

const { data: footerSubMenu } = await useAsyncData("footer", async () => {
	const document = client.getByUID("menu", "menus", {
		fetchLinks: "sub_menu.footer_submenu",
	});

	if (document) {
		console.log(document);
		return document;
	} else {
		throw createError({ statusCode: 404, message: "Page not found" });
	}
});

but i dont think im using the fetchLinks correctly, or perhaps im supposed to be using GraphQuery??

Im a bit lost as to how to pull the data from the content relationship.
Any help will be appreciated! Thanks in advance.

[Phil (Phil Snow)]

Hi @sho25052007 ,

Welcome to the community

You're correct that you'll need to use GraphQuery to do this because you're getting Slice data from within a Slice, which fetchlinks doesn't do:

GraphQuery

Pro-tip though: Ask chatgpt for help with this because it can be tricky, just let it know you're custom type structure and make sure you specify that it's Prismic GraphQuery and not GraphQL.

Thanks.

[sho25052007 (shoski Suzuki)]

Hi,

I dont quite understand how to use GraphQuery, i think that's my problem.

graphQuery: `{
	         menu {
	             slices1 {
	                 ...on menu_item {
	                         variation {
	                             ...on withSubMenu {
	                                 primary {
	                                     sub_menu
	                                 }
	                             }
	                         }
	                     }
	                 }
	             }
              }
 	}`,

i tried something like this, but with no avail.

[Phil (Phil Snow)]

I lost this thread in my backlog @sho25052007, my apologies.

This thread shows how to create a successful GraphQuery for the mega menu:

Mega menu

I have a navigation menu similar to Prismic's navigation. Some navigation has a drop-down menu and some doesn't; see the image below. How do I create it, and how do I fetch it with Nextjs 14? Thank you in advance!