React Admin提交表单时如何处理GraphQL后端返回的错误？

问题根因 #

你遇到的TypeError是React-Admin内置的响应格式校验逻辑导致的：校验函数会默认对parseResponse返回的data字段调用hasOwnProperty方法，而你在提交重复唯一键的场景下返回的data是null，就触发了空指针异常。

修复实现 #

方案1：自动触发全局错误通知 #

该方案不需要额外编写通知逻辑，框架会自动弹出错误提示：

1. 首先引入React-Admin内置的错误类

import { HttpError } from 'react-admin';

2. 修改queryBuilder中的parseResponse逻辑，检测到业务错误直接抛出异常：

case 'CREATE':
    if (typeof resource !== 'undefined' && resource.type.name === 'Product'){
        result = {
            query: PRODUCT_CREATE_ONE,
            variables: { input: params.data },
            parseResponse: response => {
                const { product, errors } = response.data.productCreate
                // 检测到业务错误直接抛出
                if (errors?.length) {
                    const errorMessage = errors.map(item => item.message).join('\n')
                    throw new HttpError(errorMessage, 400, errors)
                }
                return {
                    data: product
                }
            },
        }
    };

方案2：错误绑定到对应表单字段 #

如果需要把错误信息展示在对应表单项下方（比如slug重复就提示在slug输入框下面），只需要调整抛出错误的第三个参数为字段映射对象即可：

if (errors?.length) {
    const fieldErrors = {}
    errors.forEach(err => {
        // 这里需要根据你后端返回的错误字段调整，比如后端返回field属性就取err.field
        if (err.message.includes('Slug')) fieldErrors.slug = err.message
    })
    throw new HttpError('商品创建失败', 400, fieldErrors)
}

兜底修复（不需要抛出错误的场景） #

如果你不想走异常流，只需要给data字段兜底空对象即可解决报错，同时自己处理错误展示：

parseResponse: response => ({
    data: response.data.productCreate.product || {},
    errors: response.data.productCreate.errors,
}),

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