React-admin：pessimistic mutationMode结合redirect=false后数据不更新问题

当你设置mutationMode="pessimistic"和redirect={false}后，页面停留在当前页但显示旧值，通常是因为本地缓存未同步更新，或者后端响应未返回最新数据。以下是几种可行的解决方式：

1. 手动触发缓存刷新 #

利用框架提供的更新钩子，在保存成功后强制刷新当前记录的缓存。以React Admin为例：

import { useUpdate, useRecordContext } from 'react-admin';

const CustomEditPage = () => {
  const record = useRecordContext();
  const update = useUpdate();

  const handleSave = async (values) => {
    // 执行更新操作
    await update('your-resource-name', { id: record.id, data: values });
    // 强制重新拉取最新数据更新缓存
    await update('your-resource-name', { id: record.id }, { refetch: true });
  };

  return (
    <Edit
      mutationMode="pessimistic"
      redirect={false}
      onSave={handleSave}
    />
  );
};

2. 保存成功后重新获取数据 #

使用数据获取钩子的refetch方法，在保存成功后主动拉取最新记录：

import { useGetOne, useRecordContext } from 'react-admin';

const CustomEditPage = () => {
  const record = useRecordContext();
  const { refetch } = useGetOne('your-resource-name', { id: record.id });

  return (
    <Edit
      mutationMode="pessimistic"
      redirect={false}
      onSaveSuccess={() => refetch()}
    />
  );
};

3. 检查后端响应格式 #

确保后端处理更新请求后，返回完整的更新后数据，而非仅返回状态码或旧数据。前端依赖后端返回的新数据来同步本地状态，如果返回数据不正确，自然无法显示新值。

4. 临时禁用对应资源的缓存 #

如果缓存机制导致数据不同步，可以在数据提供者中针对该资源禁用缓存，确保每次都从后端拉取最新数据：

const dataProvider = {
  // ...其他方法
  getOne: async (resource, params) => {
    const res = await fetch(`/api/${resource}/${params.id}`);
    const data = await res.json();
    // 设置响应头禁用缓存
    return {
      data,
      headers: { 'Cache-Control': 'no-cache, no-store, must-revalidate' }
    };
  }
};

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