React Native中GraphQL查询如何传递动态Filter键值？

我正在开发基于React Native和GraphQL的应用，现有如下查询：

{
 products(
 filter: {category_uid: {eq: "Mw=="}, bestseller: {eq: "44"}}
 sort: {name: ASC}
 pageSize: 10
 currentPage: 1
  ) {
total_count
items {
  uid
  name
  sku
  boutique_name
  small_image {
    url
    label
   }
  }
 }
}

该查询的filter参数包含bestseller这类筛选键，我共有bestseller、top_rated、new_arrivals、trending等5类筛选条件。当切换为new_arrivals时，查询需改为：

{
 products(
 filter: {category_uid: {eq: "Mw=="}, new_arrival: {eq: "45"}}
 sort: {name: ASC}
 pageSize: 10
 currentPage: 1
  ) {
total_count
items {
  uid
  name
  sku
  boutique_name
  small_image {
    url
    label
   }
  }
 }
}

但传递动态键时，键会被转为字符串（如下所示），导致报错：

{
 products(
 filter: {category_uid: {eq: "Mw=="}, "new_arrival": {eq: "44"}}
 sort: {name: ASC}
 pageSize: 10
 currentPage: 1
  ) {
total_count
items {
  uid
  name
  sku
  boutique_name
  small_image {
    url
    label
   }
  }
 }
}

请问如何在上述GraphQL查询中传递动态的Filter参数键值？

方法1：用ES6计算属性名构建Filter对象（推荐） #

这是主流GraphQL客户端（如Apollo Client）的标准做法，通过变量传递filter，并用ES6计算属性名动态设置键，彻底避免字符串引号问题。

示例代码（React Native + Apollo Client）：

// 动态获取当前选中的筛选键和对应值
const activeFilterKey = 'new_arrival'; // 可从组件state/context中动态获取
const activeFilterValue = '45';

// 构建符合GraphQL输入类型的filter对象
const filter = {
  category_uid: { eq: "Mw==" },
  [activeFilterKey]: { eq: activeFilterValue } // 计算属性名实现动态键
};

// 带变量的GraphQL查询模板
const GET_PRODUCTS = gql`
  query GetProducts($filter: ProductFilterInput!) {
    products(
      filter: $filter
      sort: {name: ASC}
      pageSize: 10
      currentPage: 1
    ) {
      total_count
      items {
        uid
        name
        sku
        boutique_name
        small_image {
          url
          label
        }
      }
    }
  }
`;

// 发起查询
client.query({
  query: GET_PRODUCTS,
  variables: { filter }
});

方法2：模板字符串拼接查询（应急用） #

如果无法使用变量，可在可控范围内用模板字符串动态拼接查询内容，但要确保筛选键是固定集合，避免注入风险：

const activeFilterKey = 'new_arrival';
const activeFilterValue = '45';

// 动态拼接查询内容
const query = gql`
  {
    products(
      filter: {category_uid: {eq: "Mw=="}, ${activeFilterKey}: {eq: "${activeFilterValue}"}}
      sort: {name: ASC}
      pageSize: 10
      currentPage: 1
    ) {
      total_count
      items {
        uid
        name
        sku
        boutique_name
        small_image {
          url
          label
        }
      }
    }
  }
`;

client.query({ query });

方法3：后端Schema调整（可选） #

如果后端允许，可将动态筛选统一为通用字段，比如filter: {category_uid: {eq: "Mw=="}, tag: {eq: "new_arrival"}}，这样前端无需动态修改键名，但需要后端配合调整GraphQL Schema的输入类型。

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