adamsoffer / next-apollo

React higher-order component for integrating Apollo Client with Next.js
MIT License
482 stars 64 forks source link

Could not find "client" in the context or passed in as an option #96

Closed herbievine closed 3 years ago

herbievine commented 3 years ago

I have the setup:

import { ApolloClient, InMemoryCache } from '@apollo/client'
import { withApollo } from 'next-apollo'

const createClient = new ApolloClient({
    uri: 'http://localhost:8080/graphql',
    credentials: 'include',
    cache: new InMemoryCache()
})

export default withApollo(createClient)

and I import it here:

import React from 'react'
import withApollo from '../utils/apolloWrapper'

interface IndexProps {}

const Index: React.FC<IndexProps> = () => {
    return (
        <div>
            <h2>Home Page</h2>
        </div>
    )
}

export default withApollo({ ssr: true })(Index)

and I get this error:

Invariant Violation: Could not find "client" in the context or passed in as an option. Wrap the root component in an <ApolloProvider>, or pass an ApolloClient instance in via options.
    at new InvariantError (Y:\Projects\.WebStorm\alpine\web\node_modules\ts-invariant\lib\invariant.js:23:28)
    at Object.invariant (Y:\Projects\.WebStorm\alpine\web\node_modules\ts-invariant\lib\invariant.js:35:15)
    at QueryData.OperationData.refreshClient (Y:\Projects\.WebStorm\alpine\web\node_modules\@apollo\client\react\data\data.cjs.js:37:99)
    at QueryData.execute (Y:\Projects\.WebStorm\alpine\web\node_modules\@apollo\client\react\data\data.cjs.js:357:14)
    at Y:\Projects\.WebStorm\alpine\web\node_modules\@apollo\client\react\hooks\hooks.cjs.js:55:95
    at useDeepMemo (Y:\Projects\.WebStorm\alpine\web\node_modules\@apollo\client\react\hooks\hooks.cjs.js:25:42)
    at useBaseQuery (Y:\Projects\.WebStorm\alpine\web\node_modules\@apollo\client\react\hooks\hooks.cjs.js:55:18)
    at Object.useQuery (Y:\Projects\.WebStorm\alpine\web\node_modules\@apollo\client\react\hooks\hooks.cjs.js:99:12)
    at useMeQuery (Y:\Projects\.WebStorm\alpine\web\.next\server\pages\_app.js:312:65)
    at Navigation (Y:\Projects\.WebStorm\alpine\web\.next\server\pages\_app.js:352:76)
    at processChild (Y:\Projects\.WebStorm\alpine\web\node_modules\react-dom\cjs\react-dom-server.node.development.js:3353:14)
    at resolve (Y:\Projects\.WebStorm\alpine\web\node_modules\react-dom\cjs\react-dom-server.node.development.js:3270:5)
    at ReactDOMServerRenderer.render (Y:\Projects\.WebStorm\alpine\web\node_modules\react-dom\cjs\react-dom-server.node.development.js:3753:22)
    at ReactDOMServerRenderer.read (Y:\Projects\.WebStorm\alpine\web\node_modules\react-dom\cjs\react-dom-server.node.development.js:3690:29)
    at renderToString (Y:\Projects\.WebStorm\alpine\web\node_modules\react-dom\cjs\react-dom-server.node.development.js:4298:27)
    at Object.renderPage (Y:\Projects\.WebStorm\alpine\web\node_modules\next\dist\next-server\server\render.js:54:851) {
  framesToPop: 1
}
herbievine commented 3 years ago

@adamsoffer

adamsoffer commented 3 years ago

hm have a look at the example to see if you set everything up correctly. https://github.com/adamsoffer/next-apollo-example

herbievine commented 3 years ago

It's fine I fixed it. I had it setup up on Netlify with static generation, not server-side. Switched to Vercel and all was fine 👍