ReactQuery - useInfiniteQuery 重新获取问题

Question

我已经在使用 React Query 库的项目上实现了无限滚动。

到目前为止一切顺利。使用

useInfiniteScroll

钩子

一切都按预期工作

我遇到的一个问题是这个库的缓存机制。 如果我查询资源，例如：GET

/posts/

，将触发 GET

/posts/?page=0

，向下滚动一点，获取下一个结果，GET

/posts/?page=1

，这完全没问题。如果我向页面添加搜索参数，将会执行 GET

/posts/?filter=someValue&page=0

。一切都很好...但是当我从搜索中删除

filter

时，它会自动执行 GET

/posts/?page=0

和 GET

/posts/?page=1

解决方案是使用查询本身的

remove()

方法从缓存中删除查询。但这意味着我必须为每个查询手动执行此操作。

我希望得到一个更好的解决方案来涵盖所有情况。我有一个 queryWrapper 我想在其中处理这个问题。

我尝试使用 queryClient 实例

invalidateQueries

和

resetQueries

但似乎都无法将其从缓存中删除...

在下面的示例中，我为参数保留了

ref

，如果它们发生更改，我可以通过

useLayoutEffect

钩子触发查询重置。这部分按预期工作

无效查询尝试

queryClient.invalidateQueries(
    [queryKey, JSON.stringify(paramsRef.current)],
    {
      exact: true,
      refetchActive: false,
      refetchInactive: false
    },
    { cancelRefetch: true }
);

重置查询尝试

queryClient
    .resetQueries([queryKey, JSON.stringify(paramsRef.current)], {
      refetchPage: (page, index) => index === 0
    })

我什至尝试了

queryClient.clear()

方法，该方法应该从缓存中删除所有现有查询，但页码仍然以某种方式保留缓存...我使用

useQueryClient

钩子访问 queryClient。如果我检查它，我可以看到里面的查询。

有人可以帮我解决这个缓存问题吗 谢谢！

Answer 1

但是当我从搜索中删除过滤器时，它会自动执行 GET /posts/?page=0 & GET /posts/?page=1

这是默认的react-query重新获取行为：无限查询只有一个缓存条目，具有多个页面。当重新获取发生时，所有当前可见的页面都将被重新获取。这已记录在here。

这对于一致性是必要的，因为例如，如果从第 1 页中删除了一个条目，并且我们不会重新获取第 2 页，则第 2 页（旧）上的第一个条目将等于第 1 页（新）的最后一个条目.

现在真正的问题是，当过滤器发生变化时，您是否想要重新获取？如果没有，那么设置

staleTime

将是最好的解决方案。如果您确实想要重新获取，重新获取所有页面是最安全的选择。否则，您可以尝试在查询卸载时使用

queryClient.setQueryData

删除除第一个页面之外的所有页面。 React-query 不会自动执行此操作，因为为什么我们要删除用户已向下滚动到已看到的数据。

另请注意，对于命令式重新获取，例如

invalidateQueries

，您可以选择传递

refetchPage

函数，您可以在其中为每个页面返回一个布尔值以指示是否应该重新获取。如果您只更新一项并且只想重新获取该项所在的页面，这会很有帮助。这已记录在here。