search

apollographql / apollo-client

:rocket:  A fully-featured, production ready caching GraphQL client for every UI framework and GraphQL server.
https://apollographql.com/client
MIT License
19.34k stars 2.66k forks source link

React functionality 'useContext' is not available in this environment [Nextjs app] #11857

Closed MiguelG97 closed 4 months ago

MiguelG97 commented 4 months ago

Issue Description

I encountered this issue while integrating apollo client graphql in a nextjs app.

Apparently apollo is using rehackt npm package and somehow it's not exporting the useContext functionality:

Link to Reproduction

code below

Reproduction Steps

in a nextjs project, wrap the content with the apolloProvider in a LAYOUT page!:

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={inter.className}>
        {/* <ReduxContext>{children}</ReduxContext> */}

        <ReduxContext>
          <ApolloProvider client={client}>
            {children}
          </ApolloProvider>
        </ReduxContext>
      </body>
    </html>
  );
}

@apollo/client version

^3.10.4

alessbell commented 4 months ago

Hi @MiguelG97 👋 If you haven't already, you may want to check out our @apollo/experimental-nextjs-app-support library at https://github.com/apollographql/apollo-client-nextjs

To your question, Apollo Client does use rehackt - if you're curious as to why, there's more information in its README.

But back to the error you're seeing: is an RSC rendering your RootLayout? If that's the case, I would expect you to see that error since React context is not supported in Server Components.

MiguelG97 commented 4 months ago

thanks for the hints, apparently if I create another react component and label it as "use client", it lets me wrap the layout content without issues

github-actions[bot] commented 4 months ago

Do you have any feedback for the maintainers? Please tell us by taking a one-minute survey. Your responses will help us understand Apollo Client usage and allow us to serve you better.

github-actions[bot] commented 3 months ago

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. For general questions, we recommend using StackOverflow or our discord server.