OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

How do build a top component wrapper in next.js?

  • Thread starter Thread starter Red Baron
  • Start date Start date
R

Red Baron

Guest
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:

Code:
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?

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