Инвариантное нарушение при использовании реакционных хаков apollo вместе с компонентами запроса - PullRequest
Новая
       57

Инвариантное нарушение при использовании реакционных хаков apollo вместе с компонентами запроса

1 голос
/ 08 ноября 2019

Я начинаю переход с Apollo Client 2.x на бета-версию 3.x, и у меня возникают проблемы с использованием как ловушек apollo, так и устаревших компонентов запроса / мутации.

Яс использованием пакетов: 

@apollo/client: 3.0.0-beta.4
@apollo/react-components: 3.1.3

В этом случае нормально работает хуки apollo, но, используя компонент запроса, я получаю следующую ошибку:

Не удалось найти инвариантное нарушение "клиент "в контексте или передан в качестве опции. Оберните корневой компонент в или передайте экземпляр ApolloClient с помощью параметров.

Я создал коды и поле, в которых эта проблема показана здесь: https://codesandbox.io/s/react-example-9p9ym

Я думаю, что проблемас исходным кодом ApolloProvider, который я использую, но не уверен, какой пакет получить, если я хочу использовать новую бета-версию, при этом все еще используя компоненты запроса.

1 Ответ

2 голосов
/ 08 ноября 2019

Вы должны импортировать ApolloProvider из того же пакета, что и компонент или хук, который его использует. Это потому, что контекст, предоставляемый ApolloProvider, должен совпадать с контекстом, используемым компонентом или ловушкой. если вы используете разные пакеты, объект контекста будет другим.

Пакет react-apollo экспортирует все три: ApolloProvider, Query и useQuery. Если вы используете этот пакет, вы можете использовать ApolloProvider с Query и useQuery. Однако @apollo/client экспортирует только ApolloProvider и useQuery. Это потому, что graphql HOC и компоненты рендеринга пропа устарели. Если вы настаиваете на использовании Query и useQuery, вам необходимо импортировать Query из другого пакета, например @apollo/react-components, и добавить также ApolloProvider: 

import {
  ApolloProvider as ApolloProvider2,
  Query,
} from '@apollo/react-components'
import {
  ApolloProvider,
  ApolloClient,
  HttpLink,
  InMemoryCache,
  useQuery,
  gql,
} from '@apollo/client'

<ApolloProvider2 client={client}>
  <ApolloProvider client={client}>
    <App/>
  </ApolloProvider>
</ApolloProvider2>

Обратите внимание, что выможно импортировать gql напрямую из apollo@client.

...