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

Question

我正在尝试使用不支持分页游标的后端的过滤器来实现分页滚动的 useInfiniteQuery （我正在使用 limit 和 start 参数）。我能够检索我的数据，但我的 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和keepPreviousData，所以类似：

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

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

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