React Query：更改查询参数时如何处理条件重新渲染

Question

我想在组件中实现无限滚动，但我的后端没有“当前”端点，这意味着 infiniteQuery 的实际版本已出的问题（据我了解）。

在我的组件中，我使用有状态变量作为 queryKey 参数创建了一个查询：

useQuery([`posts_paginated`, { page }] {
    // request to  http://.../posts?_sort=createdAt&_order=desc&_page=${page}&_limit=10
}

我的问题是，修改查询键会创建一个新的查询实例，触发响应对象中的 isLoading 布尔值，并且组件的呈现值取决于：

return (IsLoading) ? <LoadingComponent /> : <ViewComponent />

这意味着当设置页面变量时，ViewComponent 被卸载，结果我丢失了滚动条的当前位置。

我尝试使查询无效，这样只有 isFetching 会触发，但我认为由于查询的回调闭包已经设置，因此无法以这种方式更改参数值（我无法将其更改为运行除了初始值之外的任何值。

我可以使用 isLoading 有条件地停止渲染，或者我可以在某种状态下开始明确地管理我的滚动条位置，但是 我想知道是否有一种明显的方法可以仅使用 React 来实现我所需要的-查询.

Answer 1

这样的分页可以通过设置 keepPreviousData 属性来实现。它会在键更改时将前一个查询键的数据 return 编辑为 data，以及 isPreviousData 布尔标志，以便您可以禁用下一个按钮或显示背景加载指示器取决于它。查询将始终保持 success 状态，数据到达时将直接转换为新数据。

这在pagination docs

中也有描述

此外，我认为您可以得到一个“真正的”无限查询，即使后端是分页的。 getNextPageParam 只需要从函数中提取 某些东西 return，然后可以将其“注入”到 queryFn 中。如果您只想 return 缓存中当前页面的 count 并每次将其递增一个 - 我认为这没有什么不好的:)

React Query：更改查询参数时如何处理条件重新渲染

ReactQuery: how to deal with conditional re-rendering when changing parameters of a query

pagination

scrollbar

reactjs

react-query