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
}

它现在返回 true 但单击按钮仍会删除以前的数据。

Answer 1

我认为您遇到了与update 中所述相同的问题：react-query 仅采用 一个 选项对象，您应该将所有选项放在其中，例如 initialData、getNextPageParam 和 @ 987654324@，比如：

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

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

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