How to retrieve linked document data with GraphQuery

tomasvit6 · October 26, 2021, 11:27am

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

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...

Priyanka · October 26, 2021, 1:06pm

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

tomasvit6 · October 26, 2021, 4:35pm

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:

Priyanka · October 27, 2021, 9:51am

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

tomasvit6 · October 27, 2021, 12:10pm

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"
}

Priyanka · October 27, 2021, 12:57pm

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

tomasvit6 · October 27, 2021, 12:58pm

Okay, done

Priyanka · October 27, 2021, 3:26pm

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.

tomasvit6 · October 27, 2021, 3:34pm

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

Priyanka · October 28, 2021, 9:55pm

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

Phil · November 23, 2021, 2:40pm

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.

dinhhuy.trinh · February 22, 2022, 8:42pm

So do we have a way to achieve this yet?

Priyanka · February 23, 2022, 2:25am

Hello @dinhhuy.trinh

Our Slice Machine team has fixed that issue. Now you can retrieve linked documents data with GraphQuery.

Are you still getting any issues? If so, Could you give me more details about what do you want to achieve?

Thanks,
Priyanka

dinhhuy.trinh · February 23, 2022, 7:33am

Hi,

I have a feature-blog-slice on my home page where editors can pick which blog they would like to display. In the feature-blog-slice, I have a "Content Relationship" linking to the blog type. I want to query all the blogs for the feature-blog-slice then display it on the home page.

I am using prismic client v6

const graphQuery = `{
    home-page {
      ...home-pageFields
      ...on feature-blog-slice {
        repeat {
          ...repeatFields
        }
      }
    }
  }`;

client.getSingle<PrismicDocument>("home-page", { ref,  graphQuery})

The query looks the same as the OP's one. I got the same error

{"type":"api_validation_error","message":"Unable to parse fetch query Invalid fetch parsing Exception.\n\nInvalid input '

How does graphQuery work with prismic client? In my case, should I use client.getSingle or what? I cannot find any example from the documentation.

Priyanka · February 23, 2022, 8:27am

Hello @dinhhuy.trinh

You have to specify the API ID of the Content Relationship field to retrieve content from the linked documents. Learn more about how to retrieve fields from linked documents.

If it still doesn't solve your issue, I need your repo name to debug it.

Thanks,
Priyanka

Pau · August 30, 2022, 5:43pm

We have released a new version of the GraphQuery document. Now it has support for Slice Machine.

Please let us know if you have questions, comments, or suggestions.
Cheers!

Topic		Replies	Views
Query linked document data inside a group field with GraphQuery Developing with Prismic graphquery , nuxtjs	11	1894	September 15, 2022
Get document data from link field in slice Developing with Prismic nextjs , slice-machine	1	236	July 26, 2023
Trouble with GraphQuery and FetchLinks Developing with Prismic nextjs	5	615	January 11, 2022
Query linked content in nested page slice Developing with Prismic nextjs , graphquery , custom-types-api	5	689	October 28, 2022
How to get fields from linked document inside a slice Developing with Prismic	16	2481	December 9, 2021

How to retrieve linked document data with GraphQuery

Related Topics