javascript - 将Apollo-link-error中的Apollo React onError添加到链接const

Question

我想将onError添加到我的index.js Apollo文件中。这样video帮助了我一个非常基本的示例。但是，由于我的项目中还有更多链接，因此与此处显示的内容有些不同。

Index.js:

import { InMemoryCache } from 'apollo-cache-inmemory'
import { setContext } from 'apollo-link-context'
import { WebSocketLink } from 'apollo-link-ws'
import { split } from 'apollo-link'
import { onError } from "apollo-link-error";
const httpLink = createHttpLink({
  uri: 'http://localhost:4000',
})

const authLink = setContext((_, { headers }) => {
  const token = localStorage.getItem(AUTH_TOKEN)
  return {
    headers: {
      ...headers,
      authorization: token ? `Bearer ${token}` : '',
    },
  }
})

const wsLink = new WebSocketLink({
  uri: `ws://localhost:4000`,
  options: {
    reconnect: true,
    connectionParams: {
      authToken: localStorage.getItem(AUTH_TOKEN),
    },
  },
})

const link = split(
  ({ query }) => {
    const { kind, operation } = getMainDefinition(query)
    return kind === 'OperationDefinition' && operation === 'subscription'
  },
  wsLink,
  authLink.concat(httpLink),
)

const client = new ApolloClient({
  link,
  cache: new InMemoryCache(),
})

现在，我想将errorLink添加到我的项目中，以使用以下代码跟踪错误:

const errorLink = onError(({ graphQLErrors, networkError }) => {
  if (graphQLErrors)
    graphQLErrors.map(({ message, location, path }) =>
      console.log(`[GraphQL error]: Message: ${message}, Location: ${location}, Path: ${path}`),
    );

 if (networkError) console.log(`[Network error]: ${networkError}`);
});

但是我不确定如何将新链接添加到link const。它是用concat还是其他完成的？

我已经看过composing links部分。但这与我的示例也有很大不同。

Answer 1

split 返回一个新的ApolloLink。

在这种情况下，应该执行link: ApolloLink.from([errorLink, link])。它将根据ApolloLink数组创建一个新的ApolloLink。