Problem of fetching data of content relatioinship using GraphQuery

Developing with Prismic
1

Hello,
I followed the tutorial on creating a two-level nested menu how to model a second-level nested submenu in my Next.js project.
Additionally, I read through the thread on Mega menu and the documentation on GraphQuery API.

Despite reading through all these resources, I still encounter difficulties in fetching data from related documents using GraphQuery.
Here's the structure of my project (almost identical to the tutorial except the structure of Submenu custom type document ):

Layout (singular custom document)
       -  Header (Tab)
                - MenuItem (slice with 2 variations) 
                      - Default (variation 1: menu without submenu)
                      - WithSubmenu (variation 2)
                           - Submenu (content relationship field, linked to a reusable custom type called Submenu)

Submenu (reusable custom type)
        -  Main (Tab)
            - UID field 
            - Key text field
        - Dates (Tab)
            - Group field

My Next.js project structure :

- App
   - components 
      - Header.tsx (parent)
      - Navigation.tsx (child)
  - getData.tsx

I attempt to retrieve data in getDatas.tsx


import { createClient } from "@/prismicio"

export async function getLayoutData() {
  const client = createClient();
  const layoutData = await client.getSingle('layout', {
    graphQuery:`{
        layout {
            slices{
              ...on menu_item{
                variation {
                  ...on withSubmenu{
                    primary {
                      submenu{
                        ...on submenu{
                          ...submenuFields
                        }
                      }
                    }
                  }
                }
              }
            }
        }
    }`
  });
 
  return layoutData;
}

In Header.tsx, I attempt to fetch the data, but I'm unable to access the Submenu content relationship field:

import { getLayoutData } from "@/app/getDatas";

export default async function Header() {
  const layoutdata = await getLayoutData();

// Here I want to expand the data to see if the query worked, but I can't access the submenu's data

 layoutdata.data.slices.map((item, index)=>{
    if(item.variation==='withSubmenu'){
      console.log(item.primary.submenu)
    }
  })
  return (
    <>
      <Navigation layoutdata={layoutdata} />
    </>
  );
}

the console.log will return my submenu document's data, but I don't have access to it:

{
  id: 'ZjO96BIAAKpJ5s5q',
  type: 'submenu',
  tags: [],
  lang: 'fr-fr',
  slug: '-',
  first_publication_date: '2024-05-02T16:23:37+0000',
  last_publication_date: '2024-05-02T16:24:36+0000',
  uid: 'travaux_submenu',
  data: {
    all: 'all',
    date: [ [Object], [Object], [Object] ],
    uid: 'travaux_submenu',
  },
  link_type: 'Document',
  isBroken: false
}

What I hope to get is something like this : console.log(item.primary.submenu.data.uid)
But the only option below item.primary.submenu is link_type, seems like I didn't well destructured the data inside the graphQuery, but my developper tool didn't throw any error at that part, I don't quite understand.

Thanks for the hlep!

4

Hi, @elegant-type. I'd be happy to help you sort out the GraphQuery for this. Can you provide me with the URL of your Prismic repository? If you don't want to share it publicly, you can send it to me in a DM.

5

Hello Levi,
Thanks for the response. The problem has been solved. The part of GraphQuery code is correct.
I was able to get the property by adding some conditions like these:

{
 slice.variation==="withSubmenu" 
 && isFilled.contentRelationship(slice.primary.submenu)
 && slice.primary.submenu.uid
 && <PrismicNextLink field={slice.primary.link}>{slice.primary.label}</PrismicNextLink>
}
6

I'm glad to hear that you've sorted this out. And thanks for posting your solution in case others run into similar issues :slight_smile:

1 Like
7

No problem, that's what this forum is for.

8

I'm having a similar problem. The following code:

  //@ts-ignore
  console.log(`The id is ${slice.primary.product.id}`);

gives the following output in my Next.js app:

The id is ZnWLsBAAACEAo417

But if I remove the ts-ignore, I get the following TypeScript error:

Property 'id' does not exist on type 'ContentRelationshipField<"product">'.
  Property 'id' does not exist on type 'EmptyLinkField<"Document">'.

This is in a slice with a single "Product" content relationship field. It seems like I'm receiving all the correct data from the slice, but TypeScript doesn't know that somehow.

This is the full console.log of slice:

{
  variation: 'default',
  version: 'initial',
  items: [],
  primary: {
    product: {
      id: 'ZnWLsBAAACEAo417',
      type: 'product',
      tags: [],
      lang: 'en-us',
      slug: 'sweater',
      first_publication_date: '2024-06-21T14:18:48+0000',
      last_publication_date: '2024-06-21T16:22:33+0000',
      uid: 'as1235',
      link_type: 'Document',
      isBroken: false
    }
  },
  id: 'product_listing_single$f9bc6ebf-6dda-4fd2-bd64-9e2a0c824207',
  slice_type: 'product_listing_single',
  slice_label: null
}
9

Hi @josh.klope, have you tried adding a condition similar to the isFilled.contentRelationship(...) example mentioned above?

10

I had not expected that to apply to my situation, but it does seem to fix the issue. Thanks!

1 Like