WebpackError: Invariant Violation: Could not find "client" in the context or passed in as a prop. Wrap the root component in an <ApolloProvider>, or pass an ApolloClient instance in via props.
I am running into this error whilst using apollo with gatsby. The code is working whilst I run develop but when I try to build I get the error.
I have implemented apollo almost identically to this gatsby-mail example, but without auth.
Gatsby-mail
import React from 'react';
import { ApolloProvider } from 'react-apollo';
import ApolloClient from 'apollo-boost';
const client = new ApolloClient({
uri: `<myurlhere>`
})
export const wrapRootElement = ({ element }) => {
return (
<ApolloProvider client={client}>
{element}
</ApolloProvider>
)
}
System:
OS: macOS High Sierra 10.13.6
CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
Shell: 5.3 - /bin/zsh
Binaries:
Node: 10.13.0 - ~/.nvm/versions/node/v10.13.0/bin/node
npm: 6.4.1 - ~/.nvm/versions/node/v10.13.0/bin/npm
Browsers:
Chrome: 71.0.3578.98
Safari: 12.0.2
npmPackages:
gatsby: ^2.0.53 => 2.0.73
gatsby-image: ^2.0.22 => 2.0.25
gatsby-plugin-create-client-paths: ^2.0.3 => 2.0.3
gatsby-plugin-manifest: ^2.0.9 => 2.0.12
gatsby-plugin-offline: ^2.0.16 => 2.0.20
gatsby-plugin-react-helmet: ^3.0.2 => 3.0.4
gatsby-plugin-react-svg: ^2.0.0-beta1 => 2.0.0
gatsby-plugin-sass: ^2.0.0-rc.2 => 2.0.7
gatsby-plugin-sharp: ^2.0.17 => 2.0.17
gatsby-source-contentful: ^2.0.21 => 2.0.21
gatsby-source-filesystem: ^2.0.8 => 2.0.12
gatsby-transformer-json: ^2.1.6 => 2.1.6
gatsby-transformer-remark: ^2.1.17 => 2.1.17
gatsby-transformer-sharp: ^2.1.8 => 2.1.9
npmGlobalPackages:
gatsby-cli: 2.4.7
Looking at this example I guess you also need to wrap your page with the Provider in gatsby-ssr.js.
great, thanks @LekoArts. That worked. I moved the creation of client into a new file, it also seems you need to install node-fetch or isomorphic-fetch as in the example you provided. I don't really know the difference between the two packages but it seems either will work.