How to get data from the second query using a variable from the first query in graphql gatsby?

Question

I'm trying to render all photos from a directory that will be defined in the frontmatter of an mdx file called carouselPhotosDir. I thought that to do this, I would need to query the specific mdx's carouselPhotosDir frontmatter field. Then, store that into a variable and then query allFile where the relative path is equal to the carouselPhotosDir frontmatter field that I got from the first query. I'm not so sure how to do this. I tried doing the query that you see below but it just queried everything. I tested the query with a hardcoded path that is defined in the frontmatter field and it worked so the variable from the first query isnt working. Is the variable not defined? I thought it would work similarily to the id variable.

export const pageQuery = graphql`
  query ProjectQuery($id: String, $carouselPhotosDir: String) {
    mdx(id: { eq: $id }) {
      id
      body
      slug
      frontmatter {
        title
        repo
        carouselPhotosDir
      }
    }
    allFile(filter: { relativeDirectory: { eq: $carouselPhotosDir } }) {
      edges {
        node {
          id
          name
          base
          childImageSharp {
            gatsbyImageData(
              placeholder: BLURRED
              layout: CONSTRAINED
              transformOptions: { cropFocus: CENTER, fit: COVER }
            )
          }
        }
      }
    }
  }
`;

Example mdx frontmatter:

---
title: blob
author: JuanCarlos
thumbnail: ./blob-thumbnail.png
repo: https://github.com/blob/repo
carouselPhotosDir: blob/carousel-photos
order: 3
---

Ferran Buireu · Accepted Answer · 2022-05-02T06:24:34.853

Short answer: you can't.

Is the variable not defined?

Indeed.

In GraphQL, fields at each "level" of the request are executed and resolved in parallel. In your example, mdx and allFile are both fields of the same type (the root query type) so they will be resolved at the same time. That means each query essentially is not aware of the other or what the other resolved to.

If you were using some GraphQL client as Apollo you can use some kind of composing to mix the queries on the client-side but not in this scenario where the queries are run in the build-time.

That said, you have two options:

When you createPage in for each template page in the gatsby-node you know which mdx is being created at that time hence you can pass the carouselPhotosDir variable as a context (see https://www.gatsbyjs.com/docs/how-to/querying-data/page-query/). In that way, carouselPhotosDir will be queried in the gatsby-node but used in the page/template query.
Use JavaScript filtering in the template once the data fetch is done. You just need to filter among allFile data the specific carouselPhotosDir for each template. You can use the same pageContext variable as before but not in a GraphQL query but in a JavaScript filtering loop to get the specific node of files.

Thank you so much for furthering my understanding of gatsby. I added the property in the context object and was able to retrieve it from the template page. — Ronny Fitzgerald, May 02 '22 at 06:17

How to get data from the second query using a variable from the first query in graphql gatsby?

1 Answers1