React Query首次渲染时列表未更新问题求助

更新列表内容并返回原页面后，getList接口已返回更新后的列表数据，但页面首次渲染时UI并未显示更新后的内容。

相关代码 #

export default function App() {
  const [id] = useQueryState("category-id", parseAsInteger);

  const queryKey = useMemo(() => ["list", id], [id]);

  const { data: list, isLoading } = useQuery({
    queryKey,
    queryFn: () => getList({ categoryId: id || null }),
    enabled: !!id,
    refetchOnMount: 'always',
    staleTime: 0
  });

  const isList1Empty = useMemo(() => {
    if (id !== 1 && !list) return false;
    return list.length === 0;
  }, [id, list]);

  const isList2Empty = useMemo(() => {
    if (id !== 2 && !list) return false;
    return list.length === 0;
  }, [id, list]);

  useEffect(() => {
    if (!list) return;

    if (
      (id === 1 && isList1Empty) ||
      (id === 2 && isList2Empty)
    ) {
      // navigate to update list page
    }
  }, [id, list]);

  if (isLoading) {
    return (
      <h1>loading</h1>
    );
  }

  return <div>{id === 1 ? <List1 list={list} /> : <List2 list={list} />}</div>;
}

操作步骤 #

• 页面加载完成
• 调用获取列表的API
• 检查列表是否为空，若为空则跳转到列表更新表单页面
• 在更新页面修改列表内容并提交
• 返回原页面
• 观察到getList接口返回更新后的列表数据，但页面UI未同步显示新内容

分析与解决方案 #

核心原因

React Query 默认会缓存查询结果，即便你设置了refetchOnMount: 'always'和staleTime: 0，但如果返回页面时组件未触发重新挂载（比如路由使用了缓存组件逻辑），或者更新列表后未主动通知React Query失效对应缓存，就会导致UI依然展示旧数据。

解决方法

1. 更新列表后主动失效对应查询缓存
   在提交列表更新的逻辑中，调用queryClient.invalidateQueries来标记对应查询为失效，这样返回原页面时React Query会自动重新获取最新数据：

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

// 在更新页面的组件中
const queryClient = useQueryClient();
const categoryId = /* 当前分类ID */;

const handleSubmit = async (formData) => {
  // 调用更新API
  await updateList(formData);
  // 失效对应列表的查询缓存
  queryClient.invalidateQueries({ queryKey: ['list', categoryId] });
  // 跳转回原页面
  navigate(-1);
};

2. 监听路由变化触发重新查询
   如果路由返回时组件未重新挂载，可以通过监听路由路径变化，手动触发查询的重新获取：

import { useLocation } from 'react-router-dom';

// 在原页面组件中
const location = useLocation();
const { data: list, isLoading, refetch } = useQuery({ /* 原配置 */ });

useEffect(() => {
  // 每次路由回到当前页面时重新获取数据
  refetch();
}, [location.pathname, refetch]);

3. 检查数据引用是否变化
   确保getList接口返回的是新的数组引用（而非修改原数组后返回），如果后端返回的是同一引用，React可能无法检测到数据变化。不过React Query通常会处理这一点，它会将新获取的数据作为新引用存储到缓存中。

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