Возникают трудности интеграции клиента Apollo с GatsbyJS - PullRequest
Новая
       26

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

0 голосов
/ 13 января 2019

У меня возникли проблемы при интеграции клиента Apollo с GatsbyJS. Когда я запускаю gatsby develop, кажется, все работает нормально, и я могу без проблем использовать клиент Apollo. Тем не менее, я продолжаю получать ошибки при запуске 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

1 Ответ

0 голосов
/ 20 января 2019

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

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

...