React Query 重新获取查询失效问题求助

核心问题：重复创建QueryClient实例 #

你的App组件中，每次渲染都会执行const queryClient = new QueryClient();，这会导致：

• 应用中存在多个独立的QueryClient实例，第一个标签页的查询绑定到初始渲染的client上，而后续mutation操作的是新渲染生成的client，自然找不到目标查询
• 调试工具仅关联了第一个创建的client，所以看不到后续组件使用的client中的查询

修复步骤 #

1. 确保全局只有一个QueryClient实例 #

将QueryClient的创建移到App组件外部，或者用useMemo缓存，避免每次渲染生成新实例：

// App.tsx
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

// 全局单例QueryClient
const queryClient = new QueryClient();

const App: React.FC<AppProps> = ({}) => {
  if (__DEV__) {
    import('react-query-native-devtools').then(({addPlugin}) => {
      console.log('addPlugin');
      addPlugin({queryClient});
    });
  }

  useEffect(() => {
    RNBootSplash.hide({fade: true}); // fade
  }, []);

  return (
    <GestureHandlerRootView style={{flex: 1}}>
      <QueryClientProvider client={queryClient}>
        <BottomSheetModalProvider>
          <AppContainer />
        </BottomSheetModalProvider>
      </QueryClientProvider>
    </GestureHandlerRootView>
  );
};

export default App;

2. 验证查询键的一致性 #

确保mutation中使用的查询键和目标查询的键完全匹配。如果后续查询需要携带参数（比如token），建议将参数加入查询键，确保缓存唯一性：

export const useNewOrders = (bodyQuery: {token: string | null}) => {
  console.log('token>>', bodyQuery.token);
  return useQuery(
    ['getNewOrders', bodyQuery.token], // 将token加入查询键
    () => getNewOrders(bodyQuery), 
    {
      enabled: bodyQuery.token != null,
    });
};

对应的mutation中同步更新查询键：

queryClient.invalidateQueries(['getNewOrders', userInfo.token]);

3. 简化mutation的refetch逻辑 #

不需要同时调用invalidateQueries和refetchQueries，二者选其一即可：

• invalidateQueries标记查询为过时，组件重新渲染时自动触发重新获取
• refetchQueries立即触发重新获取

推荐在mutation的onSuccess中处理，保持逻辑内聚：

export const useMutateAcceptedOrder = () => {
  const queryClient = useQueryClient();
  return useMutation(
    ['AcceptedOrder'],
    (bodyQuery: AcceptedOrderProps) => acceptOrder(bodyQuery),
    {
      onSuccess: () => {
        console.log('success, refetch now!');
        queryClient.invalidateQueries(['getNewOrders']);
      },
      onError: () => {
        console.error('err');
      },
    },
  );
};

验证修复效果 #

1. 重启应用，进入第一个标签页
2. 打开react-query-native-devtools，确认查询已被记录
3. 执行mutation操作，检查目标查询是否自动重新获取

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