React-Query v3中useInfiniteQuery重新获取数据行为异常问题

问题根源 #

React Query v3 的useInfiniteQuery在调用refetchQueries或invalidateQueries时，会默认复用已缓存的pageParams重新获取对应页面数据。但删除条目后，原有的分页结构（每页内容、总页数）已发生变化，继续使用旧pageParams会导致请求错误的页面（甚至额外请求不存在的页面），无法实现"重新获取所有页面"的预期。

解决方案 #

方案1：移除查询缓存，强制从头初始化 #

在mutation的onSuccess中直接移除目标查询的缓存，让组件自动重新发起初始页请求：

const { isLoading: isLoadingRemovingContent, mutate: removeContent } =
  useMutation({
    mutationFn: ({ userId, contentId }) =>
      removeFromUserWatchlist(userId, contentId),
    onSuccess: () => {
      // 清空该查询的所有缓存数据
      queryClient.removeQueries(['watchlist', userId], { exact: true });
      onContentRemoved && onContentRemoved();
    },
  });

此方法会完全清除缓存，组件将重新执行useInfiniteQuery，从初始页（pageNumber=1）开始加载数据，完全符合删除后重新加载整个列表的需求。

方案2：重置查询数据为初始状态并触发refetch #

如果需要保留查询缓存结构但重置内容，可手动设置初始状态后触发refetch：

onSuccess: () => {
  // 重置无限查询的pages和pageParams为空初始状态
  queryClient.setQueryData(['watchlist', userId], {
    pages: [],
    pageParams: []
  });
  // 重新获取数据，从初始页开始
  queryClient.refetchQueries(['watchlist', userId], {
    exact: true,
    active: true,
    inactive: true
  });
  onContentRemoved && onContentRemoved();
}

该方法会清空已加载的页面数据，让useInfiniteQuery重新从第一页开始获取，避免复用旧分页参数。

方案3：在自定义钩子中添加重置方法 #

在useUserWatchlist钩子中暴露重置查询的方法，直接调用infiniteQuery的reset函数：

function useUserWatchlist({
  userId,
  pageNumber = 1,
  pageSize = 24,
  queryOptions,
}) {
  const userList = useInfiniteQuery(/* 现有配置 */);

  // 新增重置方法
  const resetWatchlist = () => {
    userList.reset();
  };

  // ...现有返回逻辑...
  return {
    // ...现有返回字段...
    resetWatchlist
  };
}

然后在mutation的onSuccess中调用该方法：

const { resetWatchlist } = useUserWatchlist(/* 对应参数 */);

const { isLoading: isLoadingRemovingContent, mutate: removeContent } =
  useMutation({
    // ...现有配置...
    onSuccess: () => {
      resetWatchlist();
      onContentRemoved && onContentRemoved();
    },
  });

reset()方法会将无限查询恢复到初始状态，重新获取第一页数据并清空已加载的所有页面。

关键注意点 #

• 避免直接使用refetchQueries而不重置分页参数，否则会复用旧pageParams导致错误请求。
• 若删除条目会导致总页数减少，重置查询后getNextPageParam会基于新的总页数正确计算下一页，不会出现多余请求。

内容的提问来源于stack exchange，提问作者Juan de Tomaso