反应阿波罗 - 在重新获取之前清除数据对象

Posted 2023-02-21

【中文标题】反应阿波罗 - 在重新获取之前清除数据对象

【英文标题】：react apollo - clear data object before refetch

【发布时间】：2021-10-09 11:31:57

【问题描述】：

当使用refetch 的useQuery 钩子时，data 对象仍被定义。并且当使用无限滚动时，只会重新获取第一页。

是否可以在调用refech 之前清除data 对象以便我们重新开始？

const  data, loading, error, fetchMore, refetch  = useQuery(GET_ALL_ITEMS, variables);
getNextPage = async () =>  // merges results for infinite scrolling
    await fetchMore( variables, 
        updateQuery: (previousResult,  fetchMoreResult ) => 
            const oldEntries = previousResult.items;
            const newEntries = fetchMoreResult.items;
            fetchMoreResult.items = [...oldEntries, ...newEntries];
            return fetchMoreResult;
        ,
    )

我可以做类似refresh = () => data = null; refetch(); 但不直接改变状态的事情吗？

【参考方案1】：

我找不到清除data 的方法，但在Apollo Client v3 docs 中找到了不同的方法。

基本上是在loading或error的情况下忽略加载的data：

const  data: loadedData, loading, error, fetchMore, refetch  = useQuery(
  GET_ALL_ITEMS, 
  
    variables,
    notifyOnNetworkStatusChange: true, // important for adequate loading state
  
);

const data = (loading || error) ? undefined : loadedData;

注意，为了使loading 可以重新获取，您需要传递notifyOnNetworkStatusChange: true 选项。

也可以从useQuery结果中得到networkStatus，然后像这样检查：

networkStatus === NetworkStatus.refetch

但它似乎只适用于 loading 和 error。

【讨论】：

考虑一个无限滚动的分页列表。 Refetch 将更新第一页的项目，但如果有更多页面，它将显示旧值。我不需要这些页面自动更新。但是最好让它们根本不出现，这样我们可以在滚动时再次获取它们。这就是为什么我需要一种方法来清除整个数据对象。