带有字段策略的 Apollo 3 分页 [英] Apollo 3 pagination with Field Policies

问题描述

有人可以提供一个使用 Apollo Client 3.0 字段策略实现的分页示例.我一直在按照文档中的示例来实现无限滚动，但在我的控制台中我收到以下警告:

 fetchMore 的 updateQuery 回调已弃用，将被移除在 Apollo Client 的下一个主要版本中.请将 updateQuery 函数转换为适当的字段策略读取和合并函数，或使用/调整辅助函数(例如concatPagination、offsetLimitPagination 或relayStylePagination)来自@apollo/客户端/实用程序.现场政策系统比一个更有效地处理分页手写updateQuery函数，你只需要定义策略一次，而不是每次调用 fetchMore 时.

我对 Apollo 还很陌生，我真的不知道如何以 3.0 的方式做到这一点.我希望能提供一些示例以更好地理解.

这是我当前的代码:

从反应"导入反应；import { useGetUsersQuery } from "./generated/graphql";import { Waypoint } from react-waypoint";const App = () =>{const { 数据，加载，错误，fetchMore } = useGetUsersQuery({变量:{限制:20，偏移:0}，});if (loading) return <div>Loading...</div>;if (error) return 
Error
;返回 (
{数据&&数据用户&&(<div>{data.users.map((user, i) => {返回 (<div key={i} style={{ margin: "20px 0"}}><div>{user.id}</div><div>{user.name}</div>
);})}<航点onEnter={() =>{获取更多({变量:{偏移量:data.users.length}，updateQuery: (prev, { fetchMoreResult }) =>{控制台日志(称为")；if (!fetchMoreResult) 返回上一个；返回 Object.assign({}, prev, {用户:[...prev.users, fetchMoreResult.users],});},});}}/>

)}

);};导出默认应用程序；

解决方案

彻底去除updateQuery回调函数:

fetchMore({ variables: { offset: data.users.length } });

并将您的缓存更改为:

import { offsetLimitPagination } from "@apollo/client/utilities";const cache = new InMemoryCache({类型政策:{询问: {字段:{用户: offsetLimitPagination(),},},},});

所以你在 qraphql 中的查询必须有 offset 和 limit 参数.

其他选项有:concatPagination 和 relayStylePagination

如果您需要区分对同一字段的不同请求 users 例如.put keyArg: offsetLimitPagination(["filters"]) 并使用过滤器 arg 查询您的用户.缓存会单独存储.

官方发布的更多信息

Could someone provide an example of pagination implemented with Apollo Client 3.0 Field Policies. I've been following the example from the docs to implement infinite scroll but in my console I'm getting the following warning:

The updateQuery callback for fetchMore is deprecated, and will be removed
in the next major version of Apollo Client.

Please convert updateQuery functions to field policies with appropriate
read and merge functions, or use/adapt a helper function (such as
concatPagination, offsetLimitPagination, or relayStylePagination) from
@apollo/client/utilities.

The field policy system handles pagination more effectively than a
hand-written updateQuery function, and you only need to define the policy
once, rather than every time you call fetchMore.

I'm fairly new to Apollo and I don't really get how to do that the 3.0 way. I would appreciate some examples to get better understanding.

Here is my current code:

import React from "react";
import { useGetUsersQuery } from "./generated/graphql";
import { Waypoint } from "react-waypoint";

const App = () => {
  const { data, loading, error, fetchMore } = useGetUsersQuery({
    variables: { limit: 20, offset: 0 },
  });

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error</div>;

  return (
    <div className="App">
      {data && data.users && (
        <div>
          {data.users.map((user, i) => {
            return (
              <div key={i} style={{ margin: "20px 0" }}>
                <div>{user.id}</div>
                <div>{user.name}</div>
              </div>
            );
          })}
          <Waypoint
            onEnter={() => {
              fetchMore({
                variables: { offset: data.users.length },
                updateQuery: (prev, { fetchMoreResult }) => {
                  console.log("called");
                  if (!fetchMoreResult) return prev;
                  return Object.assign({}, prev, {
                    users: [...prev.users, fetchMoreResult.users],
                  });
                },
              });
            }}
          />
        </div>
      )}
    </div>
  );
};

export default App;

解决方案

Remove updateQuery callback function completely:

fetchMore({ variables: { offset: data.users.length } });

And change your cache to:

import { offsetLimitPagination } from "@apollo/client/utilities";

const cache = new InMemoryCache({
  typePolicies: {
    Query: {
      fields: {
        users: offsetLimitPagination(),
      },
    },
  },
});

So your query in qraphql must have offset and limit arguments.

Other options are: concatPagination and relayStylePagination

If you need to distinguish different request to same field users ex. put keyArg: offsetLimitPagination(["filters"]) and query your users with filters arg. Cache will store it separately.

More info in official release

这篇关于带有字段策略的 Apollo 3 分页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！