Gatsby 的 gatsby-source-filesystem 的动态 graphQL 查询答案

【问题标题】：Dynamic graphQL query for Gatsby's gatsby-source-filesystemGatsby 的 gatsby-source-filesystem 的动态 graphQL 查询
【发布时间】：2021-03-12 12:11:28
【问题描述】：

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

例如，我希望完成以下工作：

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

理想情况下，我想将文件名作为道具传递。

【问题讨论】：

标签： reactjs graphql gatsby

【解决方案1】：

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

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

【讨论】：

啊，是的，我也看到了here。我还注意到this 理想情况下我想做的事情。我的最终目标是能够在源系统上导入（查询）不同的文件。当文件名相差两个字符时，一遍又一遍地编写相同的查询感觉很愚蠢。我会调查你列出的选项。谢谢！
哦，是的，在这种情况下，您可以创建一个 GraphQL “接口”，这两种类型都继承自该接口，然后用它扩展 Gatsby 模式。这将让您定义一个适用于这两种类型的单个 GraphQL 片段。 gatsby-plugin-sanity-image 库对图像类型执行此操作，以便单个图像片段可用于碰巧都是图像的不同 GraphQL 类型（完全公开：我是作者）。如果您正在寻找示例，可能值得参考。