Having difficulty integration Apollo Client with GatsbyJS - reactjs

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

Answer 1

You'll want to implement replaceRenderer in gatsby-ssr.js.
See this thread - https://github.com/gatsbyjs/gatsby/issues/3650