useInfiniteQuery 不保留以前的数据（反应查询）

Question

我正在尝试为不支持分页游标的后端（我正在使用限制和开始参数）使用过滤器实现分页滚动的 useInfiniteQuery。我能够检索我的数据，但我的 hasNextPage 变量始终未定义。我无法获取更多数据。使用按钮触发fetchNextPage时，可以看到新的数据，但会删除之前的数据。

我做错了什么？这是我的代码：

// Query data
  const { 
      data, 
      status, 
      error, 
      isSuccess, 
      hasNextPage,
      fetchNextPage, 
      isFetching,
      isFetchingNextPage, 
      isLoading,
      isError,
  } = useInfiniteQuery(
    [
      'vendors',
      {vendor_type: vendorTypesId}, 
      {country: countryId}, 
      {city: cityId}, 
      {vendor_product_types: productCategoryId}, 
      {page: thisPage}, 
      {start: start}, 
      {name: nameInput},
      {limit: limit},
    ],
    getVendors, 
   { 
      initialData: {
        pages : [{
          result: vendors,
          resultCount: 495,
          pageId: 0,
          nextPageId: 15
        }], 
        pageParams: startParams
      }
    },
    {getNextPageParam: (lastPage, pages) => lastPage.nextPageId}
    {keepPreviousData: true}
  )

更新： hasNextPage 始终未定义，因为 getNextPageParam 和 initialData 位于两个独立的对象中。我这样更正它：

{ 
      initialData: {
        pages : [{
          result: vendors,
          resultCount: 495,
          pageId: 0,
          nextPageId: 15
        }], 
        pageParams: startParams
      },
    
       getNextPageParam: (lastPage, pages) => lastPage.nextPageId
}

现在 returns 正确，但单击按钮仍会删除以前的数据。

Answer 1

我认为您遇到的问题与您在 update 中描述的问题相同：react-query 仅采用 one 选项对象，您应该将所有选项放在此处 initialData、getNextPageParam 和 keepPreviousData，比如：

useInfiniteQuery(
  'key',
  queryFn,
  {
    initialData: {...},
    getNextPageParam: () => ...,
    keepPreviousData: true,
  }
)

此外，请注意当查询键更改时也会应用 initialData，因为会创建一个新的缓存条目。因此，通过提供 initialData，keepPreviousData 可能变得无关紧要，因为之前的数据仅显示 ，直到 您拥有新查询键的正确数据。由于 initialData 被持久化到缓存中，因此它被视为对新查询键的有效响应。

如果您只想将 initialData 应用于特定的查询键（比如您最初显示的那个，没有应用过滤器），您需要自己确保这一点：设置 initialData 到 undefined 对于您不需要初始数据的所有键，并将其设置为您想要的所有键的内容。

useInfiniteQuery 不保留以前的数据（反应查询）

useInfiniteQuery doesn't keep previous data (react-query)

pagination

infinite-scroll

reactjs

next.js

react-query