如何基于预定义JSON数组创建含可变查询片段的Relay-GraphQL查询

嘿，我刚好在Relay+React+GraphQL的项目里折腾过类似的动态查询场景，给你分享下我验证过的可行方案——核心思路是利用GraphQL的AST（抽象语法树）API动态构建查询片段，再结合Relay的编译机制实现需求。

假设你的预定义JSON数组结构大概是这样（定义要查询的类型和对应字段）：

[
  { "type": "User", "fields": ["id", "name", "email"] },
  { "type": "Post", "fields": ["id", "title", "createdAt"] }
]

1. 用GraphQL AST API构建动态片段 #

我们可以借助graphql包（graphql-js）的API，把JSON配置转换成Relay能识别的查询AST结构：

import { print } from 'graphql';
import { graphql, useLazyLoadQuery } from 'react-relay';

// 你的预定义JSON配置
const predefinedQueryConfig = [
  { "type": "User", "fields": ["id", "name", "email"] },
  { "type": "Post", "fields": ["id", "title", "createdAt"] }
];

// 把JSON转换成GraphQL片段AST
const buildDynamicFragmentSelections = (configArray) => {
  return configArray.reduce((acc, { type, fields }) => {
    // 生成字段选择的AST字符串
    const selectionStr = fields.map(field => `  ${field}`).join('\n');
    acc[type] = selectionStr;
    return acc;
  }, {});
};

2. 结合Relay构建完整查询 #

有了动态生成的字段选择字符串后，我们可以把它插入到Relay的graphql模板标签中，生成合法的查询：

const DynamicQueryComponent = () => {
  // 生成各类型的字段选择片段
  const fragmentSelections = buildDynamicFragmentSelections(predefinedQueryConfig);

  // 构建完整的Relay查询
  const dynamicQuery = graphql`
    query DynamicUserPostsQuery {
      viewer {
        # 插入User类型的动态字段
        ${fragmentSelections.User}
        posts {
          edges {
            node {
              # 插入Post类型的动态字段
              ${fragmentSelections.Post}
            }
          }
        }
      }
    }
  `;

  // 执行查询
  const data = useLazyLoadQuery(
    dynamicQuery,
    {},
    { fetchPolicy: 'store-or-network' }
  );

  return (
    <div>
      <h3>当前用户：{data.viewer.name}</h3>
      <h4>发布的帖子：</h4>
      <ul>
        {data.viewer.posts.edges.map(({ node }) => (
          <li key={node.id}>{node.title}</li>
        ))}
      </ul>
    </div>
  );
};

export default DynamicQueryComponent;

3. 处理复杂场景（嵌套字段/参数） #

如果你的JSON配置需要支持嵌套字段（比如User下的profile { avatarUrl }），可以扩展构建函数：

// 支持嵌套字段的JSON配置示例
const complexConfig = [
  {
    "type": "User",
    "fields": [
      "id",
      "name",
      { "field": "profile", "subFields": ["avatarUrl", "bio"] }
    ]
  }
];

// 递归生成嵌套字段的选择字符串
const buildNestedSelection = (field) => {
  if (typeof field === 'string') return `  ${field}`;
  const subFields = field.subFields.map(sub => buildNestedSelection(sub)).join('\n');
  return `  ${field.field} {\n${subFields}\n  }`;
};

const buildDynamicFragmentSelections = (configArray) => {
  return configArray.reduce((acc, { type, fields }) => {
    const selectionStr = fields.map(buildNestedSelection).join('\n');
    acc[type] = selectionStr;
    return acc;
  }, {});
};

• Schema匹配：确保JSON里的类型、字段完全匹配你的GraphQL Schema，否则Relay编译阶段会报错。
• 编译兼容性：因为最终插入到graphql标签的是静态字符串（编译时生成），Relay的编译器能正常识别并生成查询 artifacts，不会影响Relay的缓存和优化机制。
• 参数支持：如果需要给动态字段加参数（比如posts(first: 10)），可以在JSON里增加params字段，然后在构建函数里拼接参数字符串。

如果你的JSON配置有更特殊的结构需求，可以再补充细节，我再调整方案～

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