将 offsetLimitPagination 与过滤 Apollo Graphql 相结合答案

【问题标题】：Combine offsetLimitPagination with filtering Apollo Graphql将 offsetLimitPagination 与过滤 Apollo Graphql 相结合
【发布时间】：2021-07-30 03:51:54
【问题描述】：

我正在为大量复杂的数据实现一个非常高级的表（使用 React-Table）。我从遵循 Apollo 的实现基于偏移的分页的指南开始，我也得到了排序工作。我坚持的是将其与服务器端过滤相结合。

我对@987654322@ 的定义如下所示——我正在查询一个字段Targets：

const cache = new InMemoryCache({
    typePolicies: {
      Query: {
        fields: {
          Targets: {
            ...offsetLimitPagination(),       
            read(existing, { args }): any {
              if (args && args.limit !== undefined && args.offset !== undefined) {
                return existing && existing.slice(args.offset, args.offset + args.limit);
              }
            },
          },
        },
      },
    },
  });

这几乎是指南告诉我为 Pagination 做的事情的结果。我的组件查询后端：

const { networkStatus, error, data, fetchMore, refetch } = useQuery<GetTargetsQuery, GetTargetsQueryVariables>(GET_TARGETS, {
    ...
    notifyOnNetworkStatusChange: true,
    variables: {
      limit: tableState.pageSize,
      offset: tableState.pageNumber * tableState.pageSize,
      orderBy: tableState.orderBy,
      where: {
        _and: [initialFilters, queryFilters],
      },
    },
  });

问题是，当我修改queryFilters 并重新获取数据时，我在浏览器的网络选项卡中看到了正确的数据，但我的组件仍然从缓存中读取旧数据。似乎offsetLimitPagination 钩子并不是专门为合并过滤而设计的（？）。

我不能使用 React-Table 的内置过滤，因为它只对已查询的数据进行操作（在我的情况下，它是整个集合的一部分）。 如果设置了新的过滤器，我如何修改我的InMemoryCache 以覆盖缓存中的数据？ 或者有更好的方法来解决这个问题或提出更好的问题来完成这项工作？

【问题讨论】：

apollographql.com/docs/react/pagination/key-args
我不清楚在那里指定什么，如果唯一真正改变的是我的“哪里”的内容

标签： reactjs caching graphql apollo react-apollo

【解决方案1】：

为了澄清keyArgs，您需要指定将一个缓存与另一个缓存连接起来的键。

在您的情况下，您有变量 limit、offset、orderBy 和 where。

所以在改变limit&offset的情况下，你不希望Apollo在limit&offset改变的时候创建一个单独的缓存。所以你把它排除在keyArgs之外。

您要查看的 keyArgs 是您对 orderBy 和 where 所做的更改。据我了解，新的keyArgs 是您想要建立缓存的基础。因此，如果 orderBy 和 where 中的任何内容发生变化，您会希望 Apollo 将其视为某种单独的数据集。

另外，offsetLimitPagination 接受 keyArgs 道具。因此，对于像变量where 这样的嵌套变量，您可以在 keyArgs 中将其配置为嵌套值，以便 Apollo 了解这些值的内部。

嵌套数组语法适用于前一个参数值（where）。

const cache = new InMemoryCache({
    typePolicies: {
      Query: {
        fields: {
          Targets: {
            ...offsetLimitPagination(["orderBy", "where", ["_and"]]),
            read(existing, { args }): any {
              if (args && args.limit !== undefined && args.offset !== undefined) {
                return existing && existing.slice(args.offset, args.offset + args.limit);
              }
            },
          },
        },
      },
    },
  });

【讨论】：