Having difficulty integration Apollo Client with GatsbyJS

Question

I'm having some problem integrating Apollo Client with GatsbyJS. When I run gatsby develop everything seems to be working fine and I can use Apollo Client without any problem. However, I keep getting errors when I run gatsby build, specifically I keep getting the following error: WebpackError: Invariant Violation: Could not find "client" in the context of ApolloConsumer. Wrap the root component in an <ApolloProvider>

I can't seem to figure where this problem is coming from. Here are all my files that concern Apollo Client.

This is the client.js file: // 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
});

This is the wrap-root-element.js file

// 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>
)

This is the gatsby-browser.js file

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

Finally, this is the gatsby-srr.js file

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

Like, I've said previously I've successfully integrated Apollo Client with GatsbyJS however, I can't seem to build it for production. This the error I get when I build it via 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

score 2 · Accepted Answer · answered Jan 19 '19 at 21:32

2

You'll want to implement replaceRenderer in gatsby-ssr.js.

See this thread - https://github.com/gatsbyjs/gatsby/issues/3650

answered Jan 19 '19 at 21:32

Justin

9,419
7
34
41

Having difficulty integration Apollo Client with GatsbyJS

1 Answers1