Expo React Native中mutation及查询失效后数据仍陈旧如何解决

核心故障原因 #

你的代码存在3个直接导致问题的写法错误，按影响程度排序：

• Mutation未返回异步请求Promise：删除逻辑的mutation回调中，调用deleteCategory时没有返回对应的Promise，React Query无法感知删除请求的实际完成时机，onSettled回调会在删除请求刚发出时就立刻执行，此时后端数据还未完成更新，触发查询拿到的自然是删除前的旧数据。
• 冗余本地状态导致渲染不同步：你在useQuery的onSuccess回调中手动将查询数据存入本地searchResults状态，相当于维护了两份独立的数据源，极易出现查询数据已更新、但本地状态未同步的问题。
• 重复触发刷新引发时序竞争：queryClient.invalidateQueries本身会自动触发所有匹配key的活跃查询重新拉取数据，额外手动调用refetch会发起重复请求，可能出现后返回的旧请求覆盖先返回的新请求数据的问题。另外硬编码queryKey时字符串、数组格式混用，虽然React Query会做隐式转换，但存在匹配失效的隐患。

修复后可直接运行的代码 #

// 抽离queryKey为常量，统一格式避免匹配错误
const CATEGORIES_QUERY_KEY = ['getAllCategories'];

const { data, isLoading, isError } = useQuery(
  CATEGORIES_QUERY_KEY,
  getAllCategories,
  {
    // 用select做数据派生，替代onSuccess里手动setState的逻辑
    select: (rawData) => Object.values(rawData),
  }
);

const deleteCategoryMutation = useMutation(
  (id) => {
    // 必须return异步请求的Promise，让React Query正确追踪请求状态
    return deleteCategory({ categoryID: id, saveItems: true });
  },
  {
    onSettled: () => {
      // 失效对应查询即可，无需手动调用refetch
      queryClient.invalidateQueries(CATEGORIES_QUERY_KEY);
    },
  }
);

// 渲染直接使用query返回的派生数据，不需要单独维护searchResults状态
const searchResults = data ?? [];

React Native场景额外注意事项 #

• 如果你使用React Navigation作为导航库，确保QueryClientProvider包裹在导航容器最外层，默认配置下被标记为活跃的当前页面查询，在失效后会自动拉取最新数据，不需要额外加刷新逻辑。
• 如果目标页面被栈导航的上层页面覆盖，查询会被临时标记为非活跃状态，此时调用invalidateQueries不会立刻触发请求，等页面回到前台时会自动拉取最新数据，属于正常表现。

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