React-admin中Notification Snackbar的异常行为

问题说明 #

React-admin中执行删除、更新操作时，对应的Notification（Snackbar）会在data-provider的GraphQL查询返回响应前就弹出：

• 预期行为：点击删除按钮后，toast提示需等待GraphQL查询返回结果后再显示；若查询出错，提示条展示错误信息。
• 实际异常：点击删除按钮后立即显示“Element is Deleted”提示；若后续查询返回错误，错误提示会在成功提示之后弹出，逻辑混乱。

解决方案 #

1. 禁用对应操作的乐观更新 #

React-admin默认启用乐观更新，会先显示成功通知，再等待实际请求结果。通过mutationOptions禁用该特性，即可让通知等待请求完成后再触发：

// 自定义删除按钮示例
import { DeleteButton } from 'react-admin';

const CustomDeleteButton = (props) => (
    <DeleteButton
        {...props}
        mutationOptions={{ optimistic: false }}
    />
);

// 编辑页面禁用乐观更新示例
import { Edit, SimpleForm, TextInput } from 'react-admin';

const PostEdit = (props) => (
    <Edit {...props} mutationOptions={{ optimistic: false }}>
        <SimpleForm>
            <TextInput source="title" />
            <TextInput source="body" />
        </SimpleForm>
    </Edit>
);

2. 自定义通知触发逻辑 #

通过手动封装mutation和通知逻辑，完全控制提示的触发时机：

import { useNotify, useRefresh } from 'react-admin';
import { deleteResource } from './your-data-provider-path';

const CustomDeleteButton = ({ record, resource }) => {
    const notify = useNotify();
    const refresh = useRefresh();

    const handleDelete = async () => {
        try {
            await deleteResource(resource, { id: record.id });
            notify('Element is Deleted', { type: 'success' });
            refresh();
        } catch (error) {
            notify(error.message || 'Delete failed', { type: 'error' });
        }
    };

    return <button onClick={handleDelete}>Delete</button>;
};

使用该自定义按钮替代默认组件，即可确保只有请求成功/失败后才弹出对应提示。

3. 规范Data Provider的请求逻辑 #

检查GraphQL data-provider的删除/更新方法，确保它在请求完成并处理错误后才返回结果，避免提前resolve：

// 示例Data Provider的delete方法
const dataProvider = {
    delete: async (resource, params) => {
        const response = await fetch('/your-graphql-endpoint', {
            method: 'POST',
            body: JSON.stringify({
                query: `mutation Delete${resource}($id: ID!) { delete${resource}(id: $id) { id } }`,
                variables: { id: params.id },
            }),
            headers: { 'Content-Type': 'application/json' },
        });
        const result = await response.json();

        if (result.errors) {
            throw new Error(result.errors[0].message);
        }

        return { data: result.data[`delete${resource}`] };
    },
    // 其他data-provider方法...
};

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