如何使用 graphql gatsby 中第一个查询的变量从第二个查询获取数据？

Question

我正在尝试渲染目录中的所有照片，该目录将在名为 carouselPhotosDir 的 mdx 文件的 frontmatter 中定义。我认为要做到这一点，我需要查询特定的 mdx 的 carouselPhotosDir frontmatter 字段。然后，将其存储到一个变量中，然后查询 allFile，其中相对路径等于我从第一个查询中获得的 carouselPhotosDir frontmatter 字段。我不太确定该怎么做。我尝试执行您在下面看到的查询，但它只是查询了所有内容。我使用在 frontmatter 字段中定义的硬编码路径测试了查询，它起作用了，所以来自第一个查询的变量不起作用。变量没有定义？我认为它的工作方式类似于 id 变量。

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

Answer 1

简答：不能。

Is the variable not defined?

确实如此。

在 GraphQL 中，请求的每个“级别”的字段都是并行执行和解析的。在您的示例中，mdx 和 allFile 都是同一类型（根查询类型）的字段，因此它们将同时解析。这意味着每个查询基本上都不知道对方或对方解决了什么问题。

如果您使用某些 GraphQL 客户端作为 Apollo，您可以使用某种组合来混合 client-side 上的查询，但在这种情况下，查询是运行在 build-time.

也就是说，您有两个选择：

当您 createPage 进入 gatsby-node 中的每个模板页面时，您知道当时正在创建哪个 mdx，因此您可以通过 carouselPhotosDir 变量作为上下文（参见 https://www.gatsbyjs.com/docs/how-to/querying-data/page-query/）。这样，carouselPhotosDir 将在 gatsby-node 中查询，但在 page/template 查询中使用。
数据获取完成后，在模板中使用 JavaScript 过滤。您只需要在 allFile 数据中过滤每个模板的特定 carouselPhotosDir。您可以使用与以前相同的 pageContext 变量，但不是在 GraphQL 查询中，而是在 JavaScript 过滤循环中以获取文件的特定节点。

如何使用 graphql gatsby 中第一个查询的变量从第二个查询获取数据？

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

javascript

reactjs

graphql

gatsby

mdxjs