So I’m getting this error: Invariant Violation: Could not find "client" in the context or passed in as an option
And the reason is because my component is not wrapped in ApolloProvider
So at my home page I have:
export default function Home() {
return (
<ApolloProvider client={client}>
<Products />
</ApolloProvider>
);
}
and this works fine, I make a query inside <Products />
all good
but I have a pages/product/[id].js
page and this is where the issue is and it blows up here and I believe because this page lives outside of the component tree
historically (in CRA) the index entry point would render every thing but beneath but I can’t see this concept in next.js
Surely the solution is not to wrap every subsequent page in <ApolloProvider client={client}>
so how can I fix this, what is the correct next.js solution to this?