基于Apollo Client创建动态GraphQL查询（React+Hasura）

1. 定义通用动态查询模板 #

利用Hasura自动生成的_bool_exp类型作为过滤变量类型，编写单个查询即可支持所有可选过滤条件。当变量字段为null或未传入时，Hasura会自动忽略该过滤规则。

query GetFilteredData($filters: your_table_bool_exp) {
  your_table(where: $filters) {
    id
    status
    ship_date
    import_time
    # 其他需要返回的字段
  }
}

替换your_table为你的实际表名，your_table_bool_exp是Hasura为该表生成的布尔表达式类型，支持所有字段的过滤操作（如_eq、_gte、_lte等）。

2. React中动态构建过滤变量 #

根据用户输入动态组装filters对象，仅保留有值的过滤条件：

import { useQuery, gql } from '@apollo/client';
import { useState } from 'react';

// 定义查询
const GET_FILTERED_DATA = gql`
  query GetFilteredData($filters: your_table_bool_exp) {
    your_table(where: $filters) {
      id
      status
      ship_date
      import_time
    }
  }
`;

function FilteredDataComponent() {
  // 存储用户输入的过滤条件
  const [filterParams, setFilterParams] = useState({
    status: '',
    shipDateStart: '',
    importTimeEnd: ''
  });

  // 动态构建Hasura兼容的过滤变量
  const filters = {};
  if (filterParams.status) {
    filters.status = { _eq: filterParams.status };
  }
  if (filterParams.shipDateStart) {
    filters.ship_date = { _gte: filterParams.shipDateStart };
  }
  if (filterParams.importTimeEnd) {
    filters.import_time = { _lte: filterParams.importTimeEnd };
  }

  // 执行查询
  const { loading, error, data } = useQuery(GET_FILTERED_DATA, {
    variables: { filters }
  });

  // 处理用户输入变更
  const handleInputChange = (e) => {
    setFilterParams(prev => ({
      ...prev,
      [e.target.name]: e.target.value
    }));
  };

  return (
    <div>
      <input
        name="status"
        value={filterParams.status}
        onChange={handleInputChange}
        placeholder="输入状态"
      />
      <input
        name="shipDateStart"
        type="date"
        value={filterParams.shipDateStart}
        onChange={handleInputChange}
        placeholder="发货日期起始"
      />
      <input
        name="importTimeEnd"
        type="datetime-local"
        value={filterParams.importTimeEnd}
        onChange={handleInputChange}
        placeholder="导入时间截止"
      />

      {loading && <p>加载中...</p>}
      {error && <p>查询错误: {error.message}</p>}
      {data && (
        <ul>
          {data.your_table.map(item => (
            <li key={item.id}>
              状态: {item.status}, 发货日期: {item.ship_date}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

3. 扩展更多过滤条件 #

如果需要新增过滤字段（如customer_id、amount等），只需在filterParams中添加对应状态字段，然后在构建filters对象时补充对应的过滤规则即可，无需修改GraphQL查询本身。

关键说明 #

• Hasura的_bool_exp类型支持复杂逻辑组合，比如_and、_or，如果需要多条件组合过滤，可以直接在filters中嵌套这些逻辑，例如：

  filters._and = [
    { status: { _eq: 'completed' } },
    { ship_date: { _gte: '2024-01-01' } }
  ];
  

• 确保在Apollo Client配置中正确引入Hasura的GraphQL端点，并且已为目标表生成对应的查询权限。

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