Nested GraphQL query to show latests blog posts in React / GatsbyJS

Question

I'm building a website in Gatsby / React with 2 content types: Pages and posts and query my data via GraphQL (in Prismic).

I want to include a "Recent news"-module on the page, showing the latests blogposts.

My question is the following:

Is there a way to access the data directly in my module, without passing the data through every parent React component?

I'm using Prismic in this case, but the same scenario could apply to Contentful, Sanity or any other headless CMS I guess.

This is how I query my data:

query pageQuery($uid: String, $lang: String) {
    prismic {
      allPages(uid: $uid, lang: $lang) {
        edges {
          node {
            title
            heading
            body {
              ... on PRISMIC_PageBodyNews {
                type
                primary {
                  news_heading
                }
              }
            }
          }
        }
      }
      allRecentPosts: allPosts(first: 2) {
        edges {
          node {
            publish_date
            title
            _meta {
              uid
              lang
            }
          }
        }
      }
    }
  }

What I was looking for a way to achieve:

query pageQuery($uid: String, $lang: String) {
    prismic {
      allPages(uid: $uid, lang: $lang) {
        edges {
          node {
            title
            heading
            body {
              ... on PRISMIC_PageBodyNews {
                type
                primary {
                  news_heading
                }
                allRecentPosts: allPosts(first: 2) {
                  edges {
                    node {
                      publish_date
                      title
                      _meta {
                        uid
                        lang
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }

Right now I'm getting the following error: error Cannot query field "allPosts" on type "PRISMIC_PageBodyNews" graphql/template-string which makes sense, since allPosts is not allowed in the current schema.

However, before I try changing my schema I want to hear if it's even possible to define my schema in a way that allows "sub-queries" in GraphQL / Prismic this way?

Answer 1

You can add root query field or a prismic field as a field of some objecttypes. But I don't think that Prismic supports this.

It is better to use fragments and/or several graphql queries. Depending on your graphql client and caching policy it can still trigger only one roundtrip to your server.

Also you can just use useContext to pass data to a deep nested component.

If you really need to have nested queries then take a look at graphql-compose. It supports callback as a field type definition. So it should not have troubles with type loops and self-referencing.