React Query中创建新帖子后如何重新调用useInfiniteQuery

要实现创建新帖子后让useInfiniteQuery重新执行并展示新内容，你可以借助TanStack Query（原React Query）的queryClient操作查询缓存，具体实现方式如下：

1. 获取QueryClient实例 #

在组件中通过useQueryClient钩子拿到操作缓存的核心对象：

import { useInfiniteQuery, useQueryClient } from '@tanstack/react-query';

// 组件内部代码
const queryClient = useQueryClient();

2. 创建帖子成功后触发查询失效 #

在处理创建新帖子的异步函数里，当接口返回创建成功的结果后，调用invalidateQueries并传入你的useInfiniteQuery缓存键["posts"]。这会标记该缓存为无效，useInfiniteQuery会自动重新执行查询，拉取包含新帖子的最新数据：

// 示例创建帖子函数
const createPost = async (newPostInfo) => {
  try {
    // 调用创建帖子的API接口
    await apiService.post.CREATE_POST(newPostInfo);
    // 失效posts查询缓存，触发重新获取数据
    queryClient.invalidateQueries(["posts"]);
  } catch (error) {
    console.error('创建帖子失败:', error);
  }
};

3. 可选：手动更新缓存（更高效但需维护数据结构） #

如果不想发起额外网络请求，也可以直接把新帖子插入到现有缓存的第一页数据中，这种方式性能更好，但需要保证手动维护的数据结构和接口返回完全一致：

const createPost = async (newPostInfo) => {
  try {
    const createdPost = await apiService.post.CREATE_POST(newPostInfo);
    // 手动更新缓存数据
    queryClient.setQueryData(["posts"], (existingData) => {
      if (!existingData) {
        // 若之前无缓存数据，直接返回包含新帖子的分页结构
        return {
          pages: [{ data: [createdPost] }],
          pageParams: [1]
        };
      }
      // 将新帖子插入到第一页数据的开头
      const updatedFirstPage = {
        ...existingData.pages[0],
        data: [createdPost, ...existingData.pages[0].data]
      };
      return {
        ...existingData,
        pages: [updatedFirstPage, ...existingData.pages.slice(1)]
      };
    });
  } catch (error) {
    console.error('创建帖子失败:', error);
  }
};

原理说明 #

• invalidateQueries(["posts"])会告知TanStack Query，键为["posts"]的查询缓存已过期，需要重新执行查询获取最新数据（前提是你的分页接口第一页会包含最新发布的帖子）。
• 手动更新缓存的方式适合对性能要求较高的场景，但需要严格对齐接口返回的数据结构，通用性和可靠性不如invalidateQueries。

内容的提问来源于stack exchange，提问作者Eilon Shamir