React Query invalidateQueries执行后UI未更新，求技术排查

React Query invalidateQueries后UI不更新的修复方案 #

1. 确保QueryClient实例全局唯一 #

你当前_app.tsx里每次组件渲染都会新建QueryClient实例，这会导致缓存不共享——invalidateQueries操作的是新client，而useQuery使用的是旧client，自然无法触发UI更新。用useMemo缓存QueryClient，保证全局唯一：

修改_app.tsx中的QueryClient创建代码：

// 替换原来直接new的代码
const queryClient = useMemo(() => new QueryClient({
  defaultOptions: {
    queries: {
      retry: 0
    }
  }
}), []);

2. 给项目查询添加用户过滤逻辑 #

当前getProjects会拉取所有用户的项目，但你创建项目时是绑定当前用户user_id的，这可能导致新创建的项目未出现在当前用户的查询结果中。同时，原来的单一字符串'projects'作为queryKey无法区分不同用户，必须改成包含用户ID的数组key：

首先修改useProjects.ts：

import { getProjects } from 'queries/get-projects';
import { useQuery } from 'react-query';
import { useUser } from '@/utils/useUser';

function useGetProjectsQuery() {
  const { user } = useUser();
  // 用包含user.id的数组作为queryKey，用户切换时自动触发重新查询
  return useQuery(['projects', user.id], async () => {
    if (!user?.id) return [];
    return getProjects(user.id).then((result) => result.data);
  }, {
    enabled: !!user?.id, // 仅当用户ID存在时执行查询
  });
}

export default useGetProjectsQuery;

然后修改get-project.ts，加入用户ID过滤：

import { supabase } from '../utils/supabase-client';

export const getProjects = async (userId: string) => {
  return supabase.from('projects').select(`*`).eq('user_id', userId);
};

最后修改useCreateProject.ts中的invalidate逻辑，匹配新的queryKey：

// ...
onSuccess: () => {
  queryClient.invalidateQueries(['projects', user.id]);
}
// ...

3. 精确匹配queryKey触发更新 #

如果上述操作后仍无效果，给invalidateQueries加上exact: true，确保只触发指定key的查询：

queryClient.invalidateQueries({ queryKey: ['projects', user.id], exact: true });

4. 检查React Query Devtools缓存状态 #

打开React Query Devtools，查看['projects', user.id]这个query是否被触发重新获取。如果重新获取但数据未变化，说明查询逻辑存在问题；如果未触发重新获取，大概率是queryKey不匹配或QueryClient实例不唯一的问题。

5. 确认用户状态有效性 #

检查useUser返回的user是否包含有效ID，避免因用户ID为空导致查询未执行或过滤条件失效。

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