Query for related Content

Hey Prismic,

I have a (parent) page called education which has multiple (child) subpages called education_subpage. On the education template I’ve added a group called subpages with a content relationship field called subpage that lets the client add a a link to some of the subpages as some kind of teaser.
Within said education_subpage I have a teaser tab where the client can define a headline, excerpt and image to be served as a teaser on the parent education page.

How can I query for that teaser fields on my parent education page? Digging through your blog I found out about the GraphQuery and I already asked someone on your team to activate it (which I guess she already did :wink: ) but tbh I am a bit stuck with querying for that specific data.

So this is how I understood it to be done (with spaces instead of tabs, as the docs state!):

const subPageQuery = `
{
  education {
    subpages {
      subpage
    }
  }
 }
`

export const getServerSideProps = async () => {
  const educationSubPages = await client.query([
    Prismic.Predicates.at('document.type', 'education'),
    { 'graphQuery': subPageQuery }
  ])
  return {
    props: {
      educationSubPages
    }
  }
}

Unfortunately this throws and error: Unexpected status code [400] on URL https://PRISMIC_REPO_NAME.cdn.prismic.io/api [...]

I tried multiple types, all without success and again, unfortunately I can’t get my head around this query.

Thanks in advance

Hi @christian, there are a few things here:

  1. The query options need to go outside of the Predicates array:
  const educationSubPages = await client.query(
    [ Prismic.Predicates.at('document.type', 'education') ],
    { 'graphQuery': subPageQuery }
  )
  1. You need to specify the fields you want from the Content Relationship field as shown in the docs. So for you might look something like this:
const subPageQuery = `
{
  education {
    subpages {
      subpage {
        ...on education_subpage {
          name_of_the_field_you_want
          another_field
        }
      }
    }
  }
}
`
1 Like

Thank you for your quick response!

My bad… focused too much on the groups thing instead of the linked documents.

Works like a charm!

Love Prismic so much! :heart:

Happy to hear that it works and that you’re loving Prismic!!!

One more question @levi,
this feature is still in beta right and needs to be activated by you?!

Just wondering as the docs state one should at least use version @2.0.0 and you’re already on v3 of your prismic-javascript package? :thinking:

@christian yes, the feature is not automatically available for everyone just yet. One way to tell if you have it activated or not is to check to see if you have the GraphQL API. Just try going to (making sure to update your-repo-name to the id of your repository):
https://your-repo-name.prismic.io/graphql

If you see the GraphQL interface, then you know that you also have GraphQuery.

Reminder that GraphQL and GraphQuery are two different features. But if you have one, then you have the other.

The final piece, as you say, is to make sure that you’re using at least version 2.0.0 of the `prismic-javascript’ kit and you should be good to go.

1 Like

Thanks for clarifying.