如何在GraphQL+Apollo Client中实现动态筛选排序查询数据？

你遇到的语法错误是GraphQL的固有设计限制导致的：GraphQL的变量仅支持传递值，不能代替查询文档中的字段名、结构片段这类语法部分，你尝试把字符串类型的$orderPart、$wherePart直接嵌入查询的结构中，在查询解析阶段就会因为语法不合法被拦截，不可能直接运行。

以下三种方案都可以实现动态排序、筛选的需求，你可以根据自身场景选择：

1. 前端动态拼接查询文档（最常用） #

直接根据用户选择的筛选、排序规则，实时拼接生成完整的GraphQL查询语句，不需要依赖静态查询加变量的写法。
示例代码：

import { gql } from '@apollo/client';

// 入参可以根据你的需求扩展，比如支持多条件筛选、多字段排序
function generateProductQuery(orderConfig, whereConfig) {
  // 可以在这里加白名单校验，避免拼接非法字段导致注入风险
  const allowOrderFields = ['productID', 'description', 'cathegoryNumber'];
  const orderField = allowOrderFields.includes(orderConfig.field) ? orderConfig.field : 'productID';
  const orderDir = orderConfig.direction === 'ASC' ? 'ASC' : 'DESC';

  return gql`
    query {
      getProductInfo(
        order { ${orderField}: ${orderDir} }
        where { ${whereConfig.field}: { ${whereConfig.operator}: ${JSON.stringify(whereConfig.value)} } }
      ) {
        productID
        description
        size
        model
        cathegoryNumber
      }
    }
  `;
}

// 调用示例：按description降序，筛选分类编号等于12
const query = generateProductQuery(
  { field: 'description', direction: 'DESC' },
  { field: 'cathegoryNumber', operator: 'eq', value: 12 }
);
// 直接把生成的query传给useQuery等Apollo Client的查询方法即可

该方案灵活性最高，不需要后端做任何修改，只要做好字段白名单校验即可避免注入风险。

2. 后端配合使用JSON标量参数 #

和后端约定，把getProductInfo接口的order、where参数类型修改为自定义的JSON标量类型（比如常见的JSONObject），这样你就可以把完整的排序、筛选对象作为变量直接传入，不需要修改查询结构。
查询写法如下：

query ($order: JSONObject!, $where: JSONObject!) {
  getProductInfo(order: $order, where: $where) {
    productID
    description
    size
    model
    cathegoryNumber
  }
}

调用时直接传入变量即可：

const variables = {
  order: { description: "DESC" },
  where: { cathegoryNumber: { eq: 12 } }
}

该方案查询是静态的，前端不需要处理拼接逻辑，但需要后端配合修改接口，同时后端要做好JSON结构的合法性校验。

3. 预定义全量字段（适合字段少的场景） #

如果可排序、可筛选的字段数量很少，你可以把所有可能的字段都预定义到静态查询中，不需要的字段传null即可，大部分GraphQL服务端会自动忽略值为null的条件。
示例查询：

query (
  $orderProductID: sortEnumType
  $orderDescription: sortEnumType
  $orderCategory: sortEnumType
  $whereProductID: Int
  $whereDescription: String
  $whereCategory: Int
) {
  getProductInfo(
    order: {
      productID: $orderProductID
      description: $orderDescription
      cathegoryNumber: $orderCategory
    }
    where: {
      productID: { eq: $whereProductID }
      description: { eq: $whereDescription }
      cathegoryNumber: { eq: $whereCategory }
    }
  ) {
    productID
    description
    size
    model
    cathegoryNumber
  }
}

使用时仅给需要生效的字段传值，其余传null即可，该方案不需要拼接、不需要改后端，但字段多的话查询会非常冗余，扩展性差。

• 优先选第一种动态拼接的方案，开发成本最低，灵活性最高
• 如果对安全要求极高、不想前端处理拼接逻辑，选第二种和后端配合的方案
• 只有字段数量小于5个的临时场景才考虑第三种方案

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