reactjs - Gatsby 的 gatsby-source-filesystem 的动态 graphQL 查询

Question

使用 Gatsby 的 gatsby-source-filesystem 插件时，有没有办法动态进行 graphQL 查询？

例如，我希望完成以下任务:

return (
    <StaticQuery
      query={graphql`
        query chartQuery {
          all${fileKey}Json {          <------- Is this a thing?
            nodes {
              name
              data
              color
            }
          }
        }
      `}

理想情况下，我想将 fileName 作为属性传递。

Answer 1

没有。 Gatsby 在执行代码之前通过静态分析从源代码中提取 GraphQL 查询。因此，您无法通过字符串操作函数或插值来组装它们 - 在将它们评估为 JavaScript 之前，将逐个字符地提取它们。

也就是说，还有无数其他方法可以实现您所追求的最终目标。例如，您可以添加自定义“解析器”——一个接受参数并调用您提供的函数来合成数据的字段。或者，您可以完全创建新节点，以适合您需求的方式将本地文件系统数据添加到 Gatsby GraphQL 服务器。或者在 Gatsby 之前预先解析文件，并在 Gatsby 有机会提取查询之前将正确的类型插入到查询中，从而在其之上分层。等等。