0

我正在尝试创建一个加载更多的页面，并使用一个对列表的特定项目执行突变的按钮，这是查询：

  const { data, fetchMore, networkStatus } =
    useSearchItemsQuery({
      notifyOnNetworkStatusChange: true,
      variables,
    });

这是 fetchMore：

    fetchMore({
      variables: {
        offset: data.searchItems.nodes.length,
      },
    });

这是我的阿波罗配置：

return new ApolloClient({
    ...
    cache: new InMemoryCache({
      typePolicies: {
        Item: {
          keyFields: ["uuid"],
          merge: true,
        },
        Query: {
          fields: {
            searchItems: {
              keyArgs: false,
              merge(existing = [], incoming, { args }) {
                console.log("options", args);
                return deepmerge(existing, incoming, {
                  arrayMerge: (destinationArray, sourceArray) => {
                    const refs = [...destinationArray, ...sourceArray].map(
                      (o) => o.__ref
                    );

                    const array = [...destinationArray, ...sourceArray].filter(
                      ({ __ref }, index) => !refs.includes(__ref, index + 1)
                    );

                    console.log("array", array);

                    return array;
                  },
                });
              },
            },
          },
        },
      },
    }),
  });
};

fetchMore 工作正常，但是当我尝试运行突变时，我可以在屏幕上看到更改，但searchItems查询已被重新获取，并且屏幕上的列表在 fetchMore 之前更新为初始状态。

例子：

  • 打开页面，出现 1 个项目
  • 点击获取更多
  • 出现一个新项目
  • 针对第一项或第二项运行突变
  • 列表现在只包含第一项

我可以在网络选项卡上看到突变后的初始查询，它使用初始偏移量/限制执行

4

0 回答 0