微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

删除 updateQuery 后,无限滚动不使用缓存重新渲染

如何解决删除 updateQuery 后,无限滚动不使用缓存重新渲染

框架: Apollo / GraphQL / Django

场景:我正在使用来自 apollo/client 的 useQuery 来获取数据。我创建了一个无限滚动来监听滚动,然后调用 fetchMore。我可以使用 updateQuery 正确更新缓存,但是当我收到此错误时,这将被弃用:

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

这是在每次滚动时获取和更新缓存的工作代码

const handleGetMore = async () => {
    console.log("fetch");
    if (!pending) {
      try {
        pending = true;
        await fetchMore({
          variables: {
            isGm: true,offset: data?.getUsers?.length,limit: 12,},updateQuery: (prev,{ fetchMoreResult }) => {
            if (!fetchMoreResult) return prev;
            return Object.assign({},prev,{
              getUsers: [...prev.getUsers,...fetchMoreResult.getUsers],});
          },});
        pending = false;
      } catch (error) {
        console.log("handleGetMore Error:",error);
      }
    }
  };

所以,我更新了我的缓存,因为这似乎是未来的方法,看起来像这样:

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

export const cache = new InMemoryCache({
  typePolicies: {
    getUsers: {
      fields: {
        getUsers: offsetLimitPagination(),});

问题: UI 不会重新渲染以在无限滚动时显示更新的结果,并且缓存设置应该正确,但可以与 updateQuery 一起使用。如果我删除 updateQuery,它的行为就好像它永远不会在滚动时触发。如何更正此问题以使缓存更新正常工作并在更新缓存后重新呈现页面

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。