如何通过变量指定GraphQL根节点名称执行查询？

这个问题其实戳中了GraphQL的核心特性——它的查询结构是静态类型校验的，字段名不能直接用变量替换，所以你尝试的query($ext: String, $name: String) { $name (filter: { extension: { eq: $ext } }) }写法确实行不通。不过结合你提到的Gatsby场景（用到createPages），有几种可行的实现方案：

1. 在Gatsby构建时（gatsby-node.js）拼接动态查询字符串 #

如果你的需求是在构建页面时动态查询不同根节点的数据，最直接的方式是在gatsby-node.js里用模板字符串拼接查询语句，把根节点名称作为变量插入查询中。

举个例子：

// gatsby-node.js
exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions;

  // 假设你从某个地方拿到要动态查询的根节点名称列表
  const nodeNames = ["MyName1Nodes", "MyName2Nodes", "allFile"];

  for (const nodeName of nodeNames) {
    // 用模板字符串拼接查询，动态插入根节点名称
    const query = `
      query GetDynamicData($ext: String) {
        ${nodeName}(filter: { extension: { eq: $ext } }) {
          edges {
            node {
              name
              id
            }
          }
        }
      }
    `;

    // 执行查询
    const result = await graphql(query, { ext: "jpg" });
    const data = result.data[nodeName];

    // 创建页面，把查询到的数据或者节点名称传到页面上下文
    createPage({
      path: `/dynamic/${nodeName}`,
      component: require.resolve("./src/templates/dynamic-page.js"),
      context: {
        nodeName,
        nodes: data.edges.map(edge => edge.node),
      },
    });
  }
};

这种方式的优势是完全贴合Gatsby的构建流程，因为查询是在构建时执行的，不会影响客户端性能。

2. 创建自定义GraphQL根字段（通用动态查询） #

如果需要在客户端或者页面组件里动态切换根节点查询，可以通过Gatsby的createSchemaCustomization和createResolversAPI，自定义一个通用的根字段，接受节点类型作为参数，内部帮你查询对应的根节点。

第一步：定义自定义Schema #

在gatsby-node.js里添加：

exports.createSchemaCustomization = ({ actions }) => {
  const { createTypes } = actions;
  const typeDefs = `
    # 定义自定义查询字段，接受节点类型和筛选条件
    type Query {
      dynamicNodes(
        nodeType: String!
        filter: JSON
      ): [Node]
    }
  `;
  createTypes(typeDefs);
};

第二步：实现解析器 #

接着添加解析逻辑，根据传入的nodeType动态查询对应的根节点：

exports.createResolvers = ({ createResolvers }) => {
  const resolvers = {
    Query: {
      dynamicNodes: {
        resolve: async (source, args, context) => {
          const { nodeType, filter } = args;
          // 拼接目标根节点名称（比如传入"MyName1"对应"MyName1Nodes"）
          const rootFieldName = `${nodeType}Nodes`;

          // 构建动态查询
          const query = `
            query GetNodes($filter: JSON) {
              ${rootFieldName}(filter: $filter) {
                nodes
              }
            }
          `;

          // 执行查询并返回结果
          const result = await context.graphql(query, { filter });
          return result.data[rootFieldName]?.nodes || [];
        },
      },
    },
  };
  createResolvers(resolvers);
};

第三步：使用自定义查询 #

现在你就可以在页面组件的查询里用变量指定节点类型了：

query($nodeType: String!, $ext: String) {
  dynamicNodes(
    nodeType: $nodeType
    filter: { extension: { eq: $ext } }
  ) {
    name
    # 其他你需要的字段
  }
}

这种方式的优势是灵活性高，允许在客户端或者页面组件里动态切换查询的根节点，不过需要注意筛选条件的兼容性（因为用了JSON类型，需要确保你的节点筛选器支持这种格式）。

3. 注意事项 #

• GraphQL本身不支持动态字段名，所以所有解决方案都是通过间接方式实现的，要么在构建时拼接查询，要么通过自定义字段封装动态逻辑。
• 如果是用Gatsby的useStaticQuery，因为它要求查询是完全静态的，所以不能直接用这种动态方式，建议优先用page query结合createPages上下文，或者上面的自定义根字段方案。

内容的提问来源于stack exchange，提问作者GWorking