Problem of fetching data of content relatioinship using GraphQuery

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', {
        layout {
              ...on menu_item{
                variation {
                  ...on withSubmenu{
                    primary {
                        ...on submenu{
  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, index)=>{
  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(
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!