Ant Design表单结合React Query更新后页面状态丢失问题求助

1. 精准指定查询键，避免全局刷新 #

调用invalidateQueries时，一定要传入具体的queryKey，只刷新目标数据对应的缓存，不要用无参数的全局无效化。这样不会影响页面其他状态（比如选中列、分页）的缓存或本地状态。

示例代码：

const mutation = useMutation(
  (formData) => axios.post('/api/submit-form', formData),
  {
    onSuccess: () => {
      // 只刷新目标数据的查询缓存
      queryClient.invalidateQueries(['target-data-query']);
    },
  }
);

2. 手动更新缓存，替代重新请求 #

如果能在提交后得到最新数据，直接用setQueryData修改React Query的缓存，不用触发重新请求。这种方式不会重置页面状态，因为只是更新缓存数据，页面的本地状态（比如选中列）完全不受影响。

比如更新某条数据的场景：

const mutation = useMutation(
  (updatedItem) => axios.put(`/api/items/${updatedItem.id}`, updatedItem),
  {
    onSuccess: (res) => {
      queryClient.setQueryData(['item-list'], (oldData) => {
        if (!oldData) return oldData;
        // 替换数组中对应的旧数据为新数据
        return oldData.map(item => item.id === res.data.id ? res.data : item);
      });
    },
  }
);

如果是新增数据，直接把新数据插入缓存数组：

onSuccess: (res) => {
  queryClient.setQueryData(['item-list'], (oldData) => {
    return [res.data, ...(oldData || [])];
  });
}

3. 保留本地页面状态 #

把页面的操作状态（比如选中的列、分页参数、筛选条件）存在组件的useState或useRef中，这些状态不会因为React Query刷新缓存而被重置。渲染UI时直接使用这些本地状态，就能保持之前的操作状态。

示例（表格列状态）：

import { useState } from 'react';
import { Table } from 'antd';

const MyTable = () => {
  // 本地保存选中的列，不受React Query刷新影响
  const [visibleColumns, setVisibleColumns] = useState(['id', 'name', 'status']);
  const { data: items } = useQuery(['item-list'], fetchItems);

  // 过滤表格列，只显示选中的列
  const columns = [
    { key: 'id', title: 'ID' },
    { key: 'name', title: '名称' },
    { key: 'status', title: '状态' },
    { key: 'operation', title: '操作' },
  ].filter(col => visibleColumns.includes(col.key));

  return <Table columns={columns} dataSource={items} />;
};

4. 控制刷新的查询范围 #

调用invalidateQueries时，设置refetchType: 'active'，只刷新当前活跃的查询（也就是当前页面正在使用的查询），避免触发后台闲置查询的刷新，减少不必要的状态干扰。

示例：

queryClient.invalidateQueries(['target-data-query'], { refetchType: 'active' });

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