如何在反应管理员上处理从graphql后端返回的错误？

Question

我想显示在提交用于创建新产品的 simpleForm 时从后端收到的错误。

我的查询构建器代码：

       case 'CREATE':
                if (typeof resource !== 'undefined' && resource.type.name === 'Product'){
                    result = {
                        query: PRODUCT_CREATE_ONE,
                        variables: { input: params.data },
                        parseResponse: response => ({
                            data: response.data.productCreate.product,
                            errors: response.data.productCreate.errors,
                        }),
                    }
 
 
                };
 

我可以在第一次尝试时成功添加产品！但是当我尝试使用现有的唯一键添加它时，我得到了

TypeError: Cannot read property 'hasOwnProperty' of null
    at validateResponseFormat (validateResponseFormat.js:25)
    at performPessimisticQuery.js:42

我从服务器收到的内容：

{
  "data": {
    "productCreate": {
      "product": null,
      "errors": [
        {
          "message": "Product with this Slug already exists.",
          "__typename": "ProductError"
        }
      ],
      "__typename": "ProductCreate"
    }
  }
}

我所期待的是，当 errors[] 不为空时会显示带有错误消息的通知

有没有办法处理从后端收到的错误以及如何处理？

Answer 1

我建议你使用来自阿波罗的ErrorLink。

import { onError } from "@apollo/client/link/error";

// Log any GraphQL errors or network error that occurred
const errorLink = onError(({ graphQLErrors, networkError }) => {
  if (graphQLErrors)
    graphQLErrors.map(({ message, locations, path }) =>
      console.log(
        `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`
      )
    );
  if (networkError) console.log(`[Network error]: ${networkError}`);
});

const client = new ApolloClient({
  link: from([errorLink, httpLink]),
  cache: new InMemoryCache()
});

来源：Apollo Error Link

这将在请求中发生错误并且您可以通过例如处理它时触发。一个错误边界。