Добавьте Apollo React onError из apollo-link-error в ссылку const - PullRequest
Новая
       11

Добавьте Apollo React onError из apollo-link-error в ссылку const

0 голосов
/ 13 апреля 2020

Я хочу добавить onError в мой index.js файл Apollo. Так что video помогло мне, как выглядит очень простой c пример. Но так как у меня есть еще несколько ссылок в моем проекте, это немного отличается от того, что там показано.

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 или с чем-то еще?

Я уже заглянул в раздел Составление ссылок . Но это также слишком отличается от моего примера.

Ответы [ 2 ]

2 голосов
/ 13 апреля 2020

split возвращает новый ApolloLink.

В этом случае выполнение link: ApolloLink.from([errorLink, link]) должно работать. Он создаст новый ApolloLink из массива ApolloLink.

0 голосов
/ 14 апреля 2020

Как я также хотел, чтобы не позволил пользователю столкнуться с сообщением об ошибке . Это один метод, который предотвращает интерфейс от , показывая ошибка : 

const defaultOptions = { 
  query: {
    errorPolicy: 'all',
  },
  mutate: {
    errorPolicy: 'all'
  }
}

const client = new ApolloClient({
  link: ApolloLink.from([errorLink, link]),
  cache: new InMemoryCache(),
  defaultOptions,
})
...