有人可以提供使用 Apollo Client 3.0 字段策略实现分页的示例吗?我一直在遵循文档中的示例来实现无限滚动,但在我的控制台中我收到以下警告:
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.
我对 Apollo 相当陌生,我真的不知道如何以 3.0 的方式做到这一点。我希望能举一些例子来更好地理解。
这是我当前的代码:
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;