Возникли трудности с интеграцией Apollo Client с GatsbyJS

У меня возникла проблема с интеграцией клиента Apollo с GatsbyJS. Когда я запускаю gatsby develop, все вроде работает нормально, и я могу использовать Apollo Client без каких-либо проблем. Однако при запуске gatsby build я продолжаю получать ошибки, в частности, я получаю следующую ошибку: WebpackError: Invariant Violation: Could not find "client" in the context of ApolloConsumer. Wrap the root component in an <ApolloProvider>

Я не могу понять, откуда взялась эта проблема. Вот все мои файлы, которые касаются Apollo Client.

Это файл client.js: // client.js

import {ApolloClient} from 'apollo-boost';
import {InMemoryCache} from 'apollo-cache-inmemory';
import { split } from 'apollo-link';
import { HttpLink } from 'apollo-link-http';
import { WebSocketLink } from 'apollo-link-ws';
import { getMainDefinition } from 'apollo-utilities';
import fetch from 'isomorphic-fetch';

const httpLink = new HttpLink({
  uri: 'https://api.emaildrop.io/graphql'
});

// Create a WebSocket link:
const wsLink = new WebSocketLink({
  uri: `wss://api.emaildrop.io/subscriptions`,
  options: {
    reconnect: true
  }
});

const link = split(
  // split based on operation type
  ({ query }) => {
    const { kind, operation } = getMainDefinition(query);
    return kind === 'OperationDefinition' && operation === 'subscription';
  },
  wsLink,
  httpLink,
);

const cache = new InMemoryCache();
export const client = new ApolloClient({
  link,
  cache,
  fetch
});

Это файл wrap-root-element.js

// wrap-root-element.js
import React from 'react';
import {ApolloProvider} from 'react-apollo';
import {client} from './client';

export const wrapRootElement = ({ element }) => (
    <ApolloProvider client = {client}>
        {element}
    </ApolloProvider>
)

Это файл gatsby-browser.js

export {wrapRootElement} from './src/apollo/wrap-root-element'

Наконец, это файл gatsby-srr.js

// gatsby-srr.js
export {wrapRootElement} from './src/apollo/wrap-root-element'

Как я уже говорил, я успешно интегрировал Apollo Client с GatsbyJS, однако, похоже, я не могу создать его для производства. Это ошибка, которую я получаю при сборке через gatsby build:

error Building static HTML for pages failed

See our docs page on debugging HTML builds for help https://gatsby.app/debug-html

  38 |       var args = [a, b, c, d, e, f];
  39 |       var argIndex = 0;
> 40 |       error = new Error(
     | ^
  41 |         format.replace(/%s/g, function() { return args[argIndex++]; })
  42 |       );
  43 |       error.name = 'Invariant Violation';


  WebpackError: Invariant Violation: Could not find "client" in the context of ApolloConsumer. Wrap the root component in an <ApolloProvider>

  - invariant.js:40 invariant
    [lib]/[invariant]/invariant.js:40:1

  - ApolloConsumer.js:4 ApolloConsumer
    [lib]/[react-apollo]/ApolloConsumer.js:4:1



  - bootstrap:25 a.render
    lib/webpack/bootstrap:25:1

  - bootstrap:24 a.read
    lib/webpack/bootstrap:24:1

  - bootstrap:36 renderToString
    lib/webpack/bootstrap:36:1

  - static-entry.js:190 Module.default
    lib/.cache/static-entry.js:190:18

  - bootstrap:24 Promise
    lib/webpack/bootstrap:24:1


  - gatsby-browser-entry.js:3 Promise._resolveFromExecutor
    lib/.cache/gatsby-browser-entry.js:3:1

  - bootstrap:68 new Promise
    lib/webpack/bootstrap:68:1


  - bootstrap:5 tryCatcher
    lib/webpack/bootstrap:5:1

  - bootstrap:50 MappingPromiseArray._promiseFulfilled
    lib/webpack/bootstrap:50:1

  - api-runner-ssr.js:8 MappingPromiseArray.PromiseArray._iterate
    lib/.cache/api-runner-ssr.js:8:1
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
2
0
2 321
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы захотите реализовать replaceRenderer в gatsby-ssr.js.

Смотрите эту ветку - https://github.com/gatsbyjs/gatsby/issues/3650

Другие вопросы по теме

NodeJS - Как подключиться к удаленному ПК, на котором запущено приложение Node?
Как исправить `Предупреждение: текстовое содержимое не соответствует. Сервер: "Некоторые данные" Клиент: "Загрузка ..." `
Добавить директиву схемы для всех запросов в GraphQL
Вложенная выборка, вторая не работает - React & GraphQL
Выполняет ли обновление подписчика местного штата apollo при обновлении неиспользуемых данных
Мутация обновляет кеш apollo, но обновление кеша не отражается в пользовательском интерфейсе
Как внести изменения в схему graphQL дальше, чем было создано при настройке?
Как мутация graphql может принимать массив аргументов с помощью apollo server express?
Как структурировать код React с помощью Apollo Query, чтобы случайно запрошенный массив объектов не перерисовывался с изменением состояния?
Graphql Mutation обновляет данные пользователя, но меняет пароль, и я не могу войти в систему после выхода из системы