How to retrieve linked document data with GraphQuery

Hi, could someone explain to me how to retrieve a linked document in my case?

I have a custom type: "home-page". My "home-page" has 2 slices "carousel" and "available_offers". "available_offers" is linked to another document
image

Current query:

const graphQuery = `{
    home-page {
      ...home-pageFields
    }
  }`;
  const res = await client.getSingle('home-page', {
    lang: appLocale,
    graphQuery
  });

I get a response but it's missing linked document data. Current response:

{"page":1,"results_per_page":1,"results_size":1,"total_results_size":1,"total_pages":1,"next_page":null,"prev_page":null,"results":[{"id":"YWanmxIAACsA3yX8","uid":"home-page","url":"/","type":"home-page","href":"https://ocb-base-local.cdn.prismic.io/api/v2/documents/search?ref=YXawVhIAACkAZecx&integrationFieldsRef=ocb-base-local%7E5effe007-9cd7-4e66-bbd6-58f1c0c4e47c&q=%5B%5B%3Ad+%3D+at%28document.id%2C+%22YWanmxIAACsA3yX8%22%29+%5D%5D","tags":[],"first_publication_date":"2021-10-13T09:32:15+0000","last_publication_date":"2021-10-25T13:25:42+0000","slugs":["home-page"],"linked_documents":[],"lang":"en-gb","alternate_languages":[],"data":{"slices":[{"slice_type":"carousel","slice_label":null,"version":"sktwi1xtmkfgx8626","variation":"default-slice","primary":{"arrowColor":"primary.main","dotColor":"primary.main"},"items":[{"title":[],"description":[],"textColor":"light.main","background":{"dimensions":{"width":1920,"height":1280},"alt":null,"copyright":null,"url":"https://images.prismic.io/ocb-base-local/2295dffc-65a3-4164-b496-3947db9892c2_meeting-1245776_1920.jpg?auto=compress,format"},"backgroundColor":"dark.main","ctaTextColor":"light.main","ctaBackgroundColor":"primary","ctaTextLink":[],"slideVariation":"full-width","imageFit":"cover"}]},{"slice_type":"available_offers","slice_label":null,"version":"sktwi1xtmkfgx8626","variation":"default-slice","primary":{"offers":{"id":"YXatGBIAACoAZddj","type":"offers","tags":[],"slug":"available-offers","lang":"en-gb","first_publication_date":"2021-10-25T13:11:57+0000","last_publication_date":"2021-10-25T13:11:57+0000","link_type":"Document","isBroken":false}},"items":[{}]}]}}],"version":"31acd9d","license":"All Rights Reserved"}

I imagine my GraphQuery should be something like this:

const graphQuery = `{
    home-page {
      ...home-pageFields
      ...on available_offers {
        non-repeat {
          ...non-repeatFields
        }
        repeat {
          ...repeatFields
        }
      }
    }
  }`;

But that doesn't work. Not sure how to achieve this...

Hello @tomasvit6

Welcome to the Prismic community, and thanks for reaching out to us.

You have to specify the Content Relationship field to retrieve any content from the linked documents. The Content Relationship field won’t provide any content from the linked document unless you specify. Here is the documentation for this.

I believe in your case, your GraphQuery should be like this if your repeatable zone of the Slice has a content relationship:

const graphQuery = `{
    home-page {
      ...home-pageFields
      ...on available_offers {
        non-repeat {
          ...non-repeatFields
        }
        repeat {
          ...repeatFields
         name_of_content_relationship_field {
            ... on linked_doc_type {
              ...linked_doc_type_Fields
            }
        }
      }
    }
  }`;

You can change if you have a Content Relationship field in the non-repeatable zone. Give this a try, and let me know if you have any further questions.

Thanks
Priyanka

Thanks for your reply Priyanka. Unfortunately, that didn't help. I get an odd error:

{"type":"api_validation_error","message":"Unable to parse fetch query Invalid fetch parsing Exception.\n\nInvalid input ' ', expected AlphaNum, AlphaChar, '_', '-' or test (line 4, column 12):\n      ...on available_offers {\n           ^\n\n5 rules mismatched at error location:\n  ...racketed/ /$anonfun/ +:-36 /Relation/ |:-5 /Fragment/ /FragmentName/ /Key/ capture:-2 / +:-2 / | / AlphaNum:<CharPredicate>\n  ...acketed/ /$anonfun/ +:-36 /Relation/ |:-5 /Fragment/ /FragmentName/ /Key/ capture:-2 / +:-2 / | / AlphaChar:<CharPredicate>\n  ...onfun/ +:-52 /Doc/ /bracketed/ /$anonfun/ +:-36 /Relation/ |:-5 /Fragment/ /FragmentName/ /Key/ capture:-2 / +:-2 / | / '_'\n  ...onfun/ +:-52 /Doc/ /bracketed/ /$anonfun/ +:-36 /Relation/ |:-5 /Fragment/ /FragmentName/ /Key/ capture:-2 / +:-2 / | / '-'\n  .../ /bracketed/ /$anonfun/ +:-52 /Doc/ /bracketed/ /$anonfun/ +:-36 /Relation/ |:-5 /Fragment/ /FragmentName/ <action> / test\n"}

Current implementation:

Hello @tomasvit6

I think we are very close to solving it. By default, the Slices of your documents are found in the body section of the response object.
Trying to modify your query with this:

const graphQuery = `{
  home-page {
    ...home-pageFields
    body {
     ...on available_offers {
       non-repeat {
         ...non-repeatFields
         name_of_content_relationship_field {
           ... on linked_doc_type {
             ...linked_doc_type_Fields
           }
        }
      }
        repeat {
          ...repeatFields
       }
     }
    }
  }
 }`;

Let me know if it still doesn't solve your issue.

Thanks,
Priyanka

That just gives me:

{
"type": "api_validation_error",
"message": "Unable to parse fetch query Invalid fetch parsing Exception.\n\nUnable to find body in home-page"
}

Can you please send me the URL of your Prismic repository? You can send me a private message though.

Okay, done

I have checked your repository. This issue is related to as GraphQuery doesn't work with Slice Machine slices, and this is already a known issue. This issue is already in our issue tracker, and I will update you when I get any updates from the product team.

Is it possible to do the same with fetchLinks? I really don't want to call 2endpoints and then map them to achieve this. :confused:

Hello @tomasvit6

I understood your point, but It is not possible to retrieve the field in a Slice. My team will indeed look into the issue ASAP. I will update you when I get any updates from the team.

Thanks
Priyanka

1 Like

This thread is being monitored as an open ticket in the internal Prismic issue tracker. The Prismic support team will update this post as we get more information from our dev team. If you have a similar use-case, you can ‘Flag’ this topic to reopen and add it here.