使用 apollo/client 创建动态 graphql 查询

Question

我正在尝试创建一个 graphql 查询，其中查询数据类型和过滤器参数将根据用户输入动态传递。

我写了下面的查询，它只使用一个字段shipdate进行过滤。

const GET_SHIPDATA_WITH_FILTER = gql`
  query GetShipData($shipdateStart: timestamptz, $shipdateEnd: timestamptz, $limit: Int) {
    shipdata(where: {shipdate: { _gte: $shipdateStart, _lte: $shipdateEnd}},limit: $limit) {
      status
      import_time
      shipdate
    }
  }
`;

const variables = {
  shipdateStart: "some date",
  shipdateEnd: "some date",
  limit: 50,
};

如果没有过滤器通过，我正在使用这个

const GET_SHIPDATA = gql`
  query GetShipData($limit: Int) {
    shipdata(limit: $limit) {
      status
      import_time
      shipdate
    }
  }
`;
const variables = {
  limit: 50,
};

您可以看到我已经编写了两个查询来处理两种类型的过滤器，如果我想添加更多过滤器，它们将不起作用。

现在我正在尝试编写一个动态查询，如果用户想要添加更多过滤器，如status: {_eq: $status}或import_time: { _gt: $importTimeStart, _lt: $importTimeEnd}那么我将传递变量和查询将动态处理过滤器。 就像是

const GET_SHIPDATA = gql`
  query GetShipData($allfilters: AllFilterTypes) {
    shipdata(filter: $allfilters) {
      status
      import_time
      shipdate
    }
  }
`;
const variables = {
  //pass allFilters based on user input,
};

顺便说一句，如果有帮助的话，我正在使用 react 和 hasura。

Answer 1

Hasura 已经在您的 GraphQL 架构中公开了引用“过滤条件”的类型。 在 Hasura 中，它们被称为 Bool_Exp（boolean 表达式的缩写）并且它们 map 直接指向where子句。

如果您只是更新您的查询以接收一个shipdata_bool_exp ，您将能够在您的应用程序代码中构建一个动态过滤器表达式，并且它将按预期工作。

const GET_SHIPDATA_WITH_FILTER = gql`
  query GetShipData($filter: shipdata_bool_exp!) {
    shipdata(where: $filter,limit: $limit) {
      status
      import_time
      shipdate
    }
  }
`;