如何编写动态GraphQL查询适配不同响应字段？

当然可以处理这种场景，下面提供几种实用的实现方案：

方案一：使用条件片段（Fragments）+ 查询类型判断 #

先定义对应不同返回结构的GraphQL片段，再根据前端识别的用户查询类型（邮箱/追踪号/订单号），动态选择要包含的片段：

// 定义片段
const OrderWithTotal = gql`
  fragment OrderWithTotal on Order {
    id
    tokenValue
    number
    total
    shippingTotal
  }
`;

const OrderWithDuplicates = gql`
  fragment OrderWithDuplicates on Order {
    id
    tokenValue
    number
    duplicates
    shippingTotal
  }
`;

// 识别用户输入的查询类型
const getQueryType = (input) => {
  if (input.includes('@')) return 'email';
  if (/^[A-Z0-9]+$/i.test(input)) return 'tracking';
  return 'number';
};

// 动态生成查询
const buildOrderQuery = (queryType) => {
  let fragment = '';
  switch(queryType) {
    case 'email':
      fragment = '...OrderWithTotal';
      break;
    case 'tracking':
      fragment = '...OrderWithDuplicates';
      break;
    default:
      // 订单号查询返回所有字段
      fragment = '...OrderWithTotal\n        ...OrderWithDuplicates';
  }

  return gql`
    query GetOrder($query: String!) {
      getOrder(query: $query) {
        ${fragment}
      }
    }
    ${OrderWithTotal}
    ${OrderWithDuplicates}
  `;
};

// 使用示例
const userInput = 'user@example.com';
const query = buildOrderQuery(getQueryType(userInput));

方案二：动态拼接查询字段 #

直接根据查询类型判断需要包含的字段，拼接成查询字符串后用gql解析：

const buildDynamicQuery = (includeTotal, includeDuplicates) => {
  // 基础字段
  const baseFields = ['id', 'tokenValue', 'number', 'shippingTotal'];
  // 根据条件添加字段
  if (includeTotal) baseFields.push('total');
  if (includeDuplicates) baseFields.push('duplicates');

  return gql`
    query GetOrder($query: String!) {
      getOrder(query: $query) {
        ${baseFields.join('\n        ')}
      }
    }
  `;
};

// 使用示例
const userInput = 'TRK7890';
// 追踪号查询不包含total，邮箱查询不包含duplicates
const query = buildDynamicQuery(
  !/^[A-Z0-9]+$/i.test(userInput),
  !userInput.includes('@')
);

方案三：后端配合返回null而非省略字段 #

如果能调整后端逻辑，让不存在的字段返回null而不是直接省略，那你完全可以保留原有的固定查询，只需要在前端渲染时判断字段是否为null即可：

// 原查询保持不变
export const GET_ORDER = gql`
  query GetOrder($query: String!) {
    getOrder(query: $query) {
      id
      tokenValue
      number
      total
      duplicates
      shippingTotal
  }
}`;

// 渲染时处理
const renderOrder = (order) => {
  return (
    <div>
      <p>订单号：{order.number}</p>
      {order.total !== null && <p>总价：{order.total}</p>}
      {order.duplicates !== null && <p>重复项：{order.duplicates}</p>}
    </div>
  );
};

这三种方案里，前两种是前端动态生成查询，第三种依赖后端调整，你可以根据实际场景选择最适合的方式。

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