显示Apollo-Client的网络错误

在Apollo-Client中，当收到400错误等时，默认情况下不会显示错误消息。
Apollo-Client会在内部处理错误，并将与错误状态相符的消息存储在error.message中。

400 エラーの例

Error: Network error: Response not successful: Received status code 400

环境

{
  "dependencies": {
    "@apollo/react-hooks": "^3.1.3",
    "apollo-cache-inmemory": "^1.6.5",
    "apollo-client": "^2.6.8",
    "apollo-link-error": "^1.1.12",
    "apollo-link-http": "^1.5.16"
  }
}

阿波罗链接错误

在 apollo-client 中，存在一种名为 “link” 的机制，简单来说，它起到了类似中间件的作用。

简而言之，Apollo Links 是可链式连接的“单元”，通过组合它们，可以定义每个 GraphQL 请求在 GraphQL 客户端中是如何处理的。执行 GraphQL 请求时，每个链接的功能会依次应用。这样一来，您就可以以适合应用程序的方式来控制请求的生命周期。例如，链接可以提供重试、轮询、批处理等功能。

GraphQL的可组合网络- Apollo Link- Apollo GraphQL文档

在显示错误消息时，我们使用名为apollo-link-error的链接来处理错误。

$ yarn add apollo-link-error

给客户添加链接

before

import { InMemoryCache } from "apollo-cache-inmemory";
import { ApolloClient } from "apollo-client";
import { HttpLink } from "apollo-link-http";
import fetch from "isomorphic-unfetch";

const link = new HttpLink({
  uri: "https://sample.com/graphql/",
  fetch: fetch
});
const cache = new InMemoryCache();
const client = new ApolloClient({ link, cache });

after

import { InMemoryCache } from "apollo-cache-inmemory";
import { ApolloClient } from "apollo-client";
import { ApolloLink } from "apollo-link";
import { onError } from "apollo-link-error";
import { HttpLink } from "apollo-link-http";
import fetch from "isomorphic-unfetch";

const httpLink = new HttpLink({
  uri: "https://sample.com/graphql/",
  fetch: fetch
});
const cache = new InMemoryCache();
// errorLink
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 link = ApolloLink.from([errorLink, httpLink]);
const client = new ApolloClient({ link, cache });

创建 errorLink，并定义 onError 函数。
使用 ApolloLink.from 将 link 进行连接，并传递给 ApolloClient。

在使用ApolloLink.from连接链接时，需要注意顺序。

// error
const link = ApolloLink.from([httpLink, errorLink]);

我在我的环境中遇到了以下错误消息。

Error: You are calling concat on a terminating link, which will have no effect