Question

我在将Apollo Client与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

Answer 1

您将要在replaceRenderer中实现gatsby-ssr.js。

查看此主题-https://github.com/gatsbyjs/gatsby/issues/3650

难以将Apollo Client与GatsbyJS集成

1 个答案: