Gatsby: Using Apollo for a gatsby app but client context is not passed to query

Created on 3 Jan 2019  路  2Comments  路  Source: gatsbyjs/gatsby

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

gatsby-browser.js

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

Environment

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
question or discussion

All 2 comments

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.

Was this page helpful?
0 / 5 - 0 ratings