使用setQueryData更新react-query缓存时组件未重新渲染

核心原因 #

你通过queryClient.getQueryData直接读取缓存的方式不具备响应式能力——这个方法只是同步获取当前缓存的快照，不会订阅缓存的后续变化。当socket触发setQueryData更新缓存后，组件无法感知到数据变更，自然不会触发重新渲染。而Redux的useSelector是通过订阅状态变化实现渲染触发，因此能正常响应更新。

解决方案 #

1. 改用useQuery钩子获取数据（推荐） #

组件必须通过react-query提供的useQuery钩子来获取数据，它会自动订阅对应查询键的缓存变化，一旦缓存更新就触发组件重新渲染。示例代码：

import { useQuery } from '@tanstack/react-query';

function Todo({ resourceId, initialTodoData }) {
  const { data: todo } = useQuery({
    queryKey: ['todo', resourceId], // 必须和socket中setQueryData用的查询键完全一致
    queryFn: () => fetch(`/api/todos/${resourceId}`).then(res => res.json()),
    initialData: initialTodoData, // 传入初始数据
    enabled: false, // 如果不需要自动触发初始查询，可设为false
  });

  // 直接使用todo渲染即可，缓存更新时组件自动重渲染
  return <div>{todo?.title}</div>;
}

2. 确保查询键完全匹配 #

socket中调用setQueryData时的查询键，必须和组件中useQuery的查询键完全一致（包括数组元素的顺序、数据类型）。比如：

// socket监听器中
queryClient.setQueryData(['todo', resourceId], (oldData) => {
  // 不可变更新逻辑
  return oldData ? { ...oldData, ...updatedData } : updatedData;
});

如果查询键不匹配，react-query会判定为不同的查询，不会触发组件的更新逻辑。

3. 严格执行不可变更新 #

再次确认你的更新逻辑是完全不可变的：

• 禁止直接修改旧状态的属性（比如oldData.completed = true）
• 对象更新用扩展运算符{...oldData, key: newValue}，数组更新用[...oldArray]或array.map()等方法
• 复杂结构可借助Immer简化不可变操作：

  import { produce } from 'immer';
  
  queryClient.setQueryData(['todo', resourceId], produce((draft) => {
    if (draft) draft.completed = true;
  }));
  

4. 特殊场景：手动订阅缓存变化（不推荐） #

如果因业务限制必须使用getQueryData，可以通过useEffect结合缓存订阅手动监听变化：

import { useQueryClient, useEffect, useState } from 'react';

function Todo({ resourceId, initialTodoData }) {
  const queryClient = useQueryClient();
  const [todo, setTodo] = useState(() => 
    queryClient.getQueryData(['todo', resourceId]) || initialTodoData
  );

  useEffect(() => {
    const queryCache = queryClient.getQueryCache();
    const query = queryCache.getQuery(['todo', resourceId]);

    const unsubscribe = query?.subscribe(() => {
      const newData = queryClient.getQueryData(['todo', resourceId]) || initialTodoData;
      setTodo(newData);
    });

    return unsubscribe;
  }, [queryClient, resourceId, initialTodoData]);

  return <div>{todo?.title}</div>;
}

这种方式繁琐且易出错，优先推荐使用useQuery方案。

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