JS中使用GraphQL+Apollo客户端实现部分字符串匹配查询

核心逻辑是根据storeId是否存在动态生成查询过滤值，不需要改动原有Hook的整体结构，具体调整如下：

• 先对storeId做非空判断（覆盖null/undefined场景，可根据业务需要把空字符串也纳入无效值判断）
• 当storeId为有效值时，沿用原有精确匹配逻辑，拼接owner_id=${ownerId}&store_id=${storeId}作为查询条件
• 当storeId无效时，生成前缀匹配字符串owner_id=${ownerId}%，实现仅按owner维度的模糊查找
• 额外优化：把GQL中语义冲突的$ownerId参数改名为$queryStr，避免和函数入参ownerId混淆，提升代码可读性

调整后的完整代码如下：

function useAllOrders(ownerId, storeId) {
  // 动态生成查询匹配字符串
  const queryStr = storeId != null
    ? `owner_id=${ownerId}&store_id=${storeId}`
    : `owner_id=${ownerId}%`;

  const { data, loading, error } = useQuery(
    gql`
      query getOrders($queryStr: String!) {
        orders(query: { owner_id: $queryStr }) {
          _id
          // ... 其余字段保持原有配置即可
        }
      }
    `,
    { variables: { queryStr } }
  );

  if (error) {
    throw new Error(`Failed to fetch orders: ${error.message}`);
  }
  const orders = data?.orders ?? [];
  return { orders, loading };
}

注意事项 #

上述前缀匹配方案默认你的GraphQL服务/底层数据库支持%作为字符串模糊匹配通配符，如果你的服务使用正则匹配规则，把无storeId场景的匹配值替换为new RegExp(^owner_id=${ownerId})即可。

如果后端GraphQL接口支持多字段独立过滤，优先选择拆分字段传参的实现，不需要做字符串模糊匹配，能避免前缀匹配误命中相似字符串的问题，逻辑更严谨，示例：

function useAllOrders(ownerId, storeId) {
  const { data, loading, error } = useQuery(
    gql`
      query getOrders($ownerId: String!, $storeId: String) {
        orders(query: { 
          owner_id: $ownerId,
          store_id: $storeId // 传null时后端自动忽略该条件，即可实现仅按owner查询
        }) {
          _id
          // ... 字段列表
        }
      }
    `,
    { variables: { ownerId, storeId } }
  );
  // 其余逻辑不变
}

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