React- query :使用不同参数的useInfiniteQuery进行新查询

基础概念

useInfiniteQuery 是 React Query 库中的一个钩子函数，用于处理无限滚动加载的数据。它允许你通过分页机制从服务器获取数据，并且能够自动管理缓存、状态更新和重新获取数据的逻辑。

类型与应用场景

类型

基于游标的分页：通过游标（cursor）来标记每一页的结束位置。
基于偏移量的分页：通过设置偏移量和限制数量来获取数据。

应用场景

社交媒体动态：如新闻推送、朋友圈等。
商品列表：电商网站的商品展示。
搜索结果：搜索引擎的分页显示。

示例代码

以下是一个使用 useInfiniteQuery 的基本示例：

import { useInfiniteQuery } from 'react-query';
import axios from 'axios';

function fetchPosts({ pageParam = 1 }) {
  return axios.get(`/api/posts?page=${pageParam}`);
}

function Posts() {
  const {
    data,
    fetchNextPage,
    hasNextPage,
    isFetchingNextPage,
    status,
  } = useInfiniteQuery(
    'posts',
    fetchPosts,
    {
      getNextPageParam: (lastPage, pages) => lastPage.nextPage,
    }
  );

  return (
    <div>
      {status === 'loading' ? (
        <span>Loading...</span>
      ) : status === 'error' ? (
        <span>Error fetching posts</span>
      ) : (
        <>
          {data?.pages.map((page, i) => (
            <React.Fragment key={i}>
              {page.results.map((post) => (
                <div key={post.id}>{post.title}</div>
              ))}
            </React.Fragment>
          ))}
          <button
            onClick={() => fetchNextPage()}
            disabled={!hasNextPage || isFetchingNextPage}
          >
            {isFetchingNextPage ? 'Loading more...' : 'Load More'}
          </button>
        </>
      )}
    </div>
  );
}

遇到问题及解决方法

问题：新查询没有触发或数据没有更新

原因：

可能是由于 React Query 的缓存机制导致的，相同键值的查询会被缓存，除非明确指定需要刷新。
参数变化没有正确传递给 useInfiniteQuery。

解决方法：

确保每次查询的键值是唯一的，可以通过添加时间戳或其他唯一标识符来实现。
使用 queryClient.invalidateQueries 手动清除缓存并触发重新获取数据。

import { useQueryClient } from 'react-query';

function refreshQuery() {
  const queryClient = useQueryClient();
  queryClient.invalidateQueries('posts');
}

通过上述方法，可以确保在使用不同参数进行 useInfiniteQuery 新查询时，能够正确触发并获取最新的数据。