# Next.js SSR + React server components - error ApolloProvider

**URL:** <https://community.apollographql.com/t/next-js-ssr-react-server-components-error-apolloprovider/5492>\
**Category:** Client SDKs\
**Tags:** client, web\
**Created:** [January 16, 2023, 3:26pm UTC](https://community.apollographql.com/t/next-js-ssr-react-server-components-error-apolloprovider/5492 "2023-01-16T15:26:03Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![SGthatGui](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/sgthatgui/32/3734_2.png) [@SGthatGui](https://community.apollographql.com/u/SGthatGui)\
**Post date:** [January 16, 2023, 3:26pm UTC](https://community.apollographql.com/t/next-js-ssr-react-server-components-error-apolloprovider/5492/1 "2023-01-16T15:26:03Z")

</div>

Hello everyone, apologies for such a noob questions but while learning and playing with the Apollo React Client I keep having an error that I’m not sure how to handle.

`Unhandled Runtime Error Error: Cannot read properties of undefined (reading 'Symbol( __APOLLO_CONTEXT__ )')`

I am trying to wrap the {children} in the layout.tsx, I am using both /app in nextjs 13.1 and react server components,

`import React from ‘react’  
import Link from ‘next/link’  
import {  
ApolloClient,  
InMemoryCache,  
ApolloProvider,  
gql,  
} from ‘@apollo/client’

let pokelist: any =

const client = new ApolloClient({  
uri: ‘[https://beta.pokeapi.co/graphql/v1beta](https://beta.pokeapi.co/graphql/v1beta)’,  
cache: new InMemoryCache(),  
})

client  
.query({  
query: gql` { gen3_species: pokemon_v2_pokemonspecies( limit: 69 order_by: { name: asc } ) { name id } } `,  
})  
.then((res) =\> (pokelist = res.data.gen3\_species))

export default async function layout({  
children,  
}: {  
children: React.ReactNode  
}) {  
// section for await  
console.log(client)  
return (

  
  

  
{pokelist.map((el: any) =\> (  
-   
\<Link href={`/pokemongql/${el.id}`}\>{el.name}  
  
))}  

  
  
  
{children}  
  

  
)  
}  
`

---

<div class="post-metadata">

**Author:** ![JeffAuriemma](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/jeffauriemma/32/2845_2.png) [@JeffAuriemma](https://community.apollographql.com/u/JeffAuriemma)\
**Post date:** [January 18, 2023, 6:48pm UTC](https://community.apollographql.com/t/next-js-ssr-react-server-components-error-apolloprovider/5492/2 "2023-01-18T18:48:53Z")

</div>

Hi @SGthatGui 👋 welcome to the community forum! React Server Components are stateless so any React hooks that contain hooks like `useState` and `useContext` can only be used on client components. That includes parts of the Apollo Client React API including `ApolloProvider` and hooks like `useQuery`. Hope that helps!

---

<div class="post-metadata">

**Author:** ![watson](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/watson/32/2053_2.png) [@watson](https://community.apollographql.com/u/watson)\
**Post date:** [January 18, 2023, 10:49pm UTC](https://community.apollographql.com/t/next-js-ssr-react-server-components-error-apolloprovider/5492/3 "2023-01-18T22:49:07Z")

</div>

> [@SGthatGui](#):
>
> Unhandled Runtime Error Error: Cannot read properties of undefined (reading ‘Symbol( **APOLLO\_CONTEXT** )’)

One thing to think about here is that using SSR and server components is that there is no cache (`@apollo/client`’s cache doesn’t matter here because things are loading only once on the server - stateless).

I can think of three options you have here in the short term if you really want to use React server components today:

1. If you don’t use `ApolloProvider` and instead pass the `ApolloClient` instance to `useQuery` directly:

```auto
const client = new ApolloClient({...});
...

const result = useQuery(MY_QUERY,{client});

```

1. Use the `query` or `mutate` methods available on `ApolloClient`:

```auto
const client = new ApolloClient({...});
...

const result = await client.query({ query: MY_QUERY });

```

1. Use something like [`urql`](https://formidable.com/open-source/urql/) for your server components and `@apollo/client` for the rest of your app.

I hope this helps and if you want to talk more about it live, we have a [Discord server](https://discord.gg/graphos) that you can join. Feel free to ping me (@watson)!

---

<div class="post-metadata">

**Author:** ![SGthatGui](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/sgthatgui/32/3734_2.png) [@SGthatGui](https://community.apollographql.com/u/SGthatGui)\
**Post date:** [January 19, 2023, 9:29am UTC](https://community.apollographql.com/t/next-js-ssr-react-server-components-error-apolloprovider/5492/4 "2023-01-19T09:29:33Z")

</div>

tyvm for your help and insight, makes perfect sense.  
👋🏻 howdy and thank you for the warm welcome, get ready for loads of these noob 😅 questions.

---

<div class="post-metadata">

**Author:** ![SGthatGui](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/sgthatgui/32/3734_2.png) [@SGthatGui](https://community.apollographql.com/u/SGthatGui)\
**Post date:** [January 19, 2023, 9:52am UTC](https://community.apollographql.com/t/next-js-ssr-react-server-components-error-apolloprovider/5492/5 "2023-01-19T09:52:51Z")

</div>

let me begin for thanking you for your time and attention 🫰  
Will think about it and test out the different solutions you have depicted, good to stumble on these noob problems now as a lot of js frameworks are adopting new render and hydration methods, this is also my first contact with graphQL and Apollo 😅 still a lvl0 noob

---

<div class="post-metadata">

**Author:** ![watson](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/watson/32/2053_2.png) [@watson](https://community.apollographql.com/u/watson)\
**Post date:** [January 20, 2023, 10:07pm UTC](https://community.apollographql.com/t/next-js-ssr-react-server-components-error-apolloprovider/5492/6 "2023-01-20T22:07:57Z")

</div>

❤ we’re always here to help level up! 💪

---

<div class="post-metadata">

**Author:** ![salman\_sheriff](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/salman_sheriff/32/4254_2.png) [@salman\_sheriff](https://community.apollographql.com/u/salman_sheriff)\
**Post date:** [May 5, 2023, 5:33pm UTC](https://community.apollographql.com/t/next-js-ssr-react-server-components-error-apolloprovider/5492/9 "2023-05-05T17:33:17Z")

</div>

```auto
'use client'; 

import { ApolloProvider } from '@apollo/client'; 
import { client } from '@/graphQL/apollo-client';

interface IGraphQlProviderProps {
    children: React.ReactNode; 
}

const GraphQlProvider: React.FC<IGraphQlProviderProps> = ({
    children
}) => {
    return (
        <ApolloProvider client={client}>
            {children}
        </ApolloProvider>

    )
}

export default GraphQlProvider; 

```

Adding “use client” at the top of the provider cleared my error.

```auto
import AuthProvider from "@/providers/AuthProvider";
import "./globals.css";
import { Inter } from "next/font/google";
import UIProvider from "@/providers/UIProvider";
import GraphQlProvider from "@/providers/GraphQlProvider";

const inter = Inter({ subsets: ["latin"] });

export const metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

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

        <AuthProvider>
          <UIProvider>{children}</UIProvider>
        </AuthProvider>
        </GraphQlProvider>
      </body>
    </html>
  );
}

```

and then wrap in layout.tsx like this

---

<div class="post-metadata">

**Author:** ![Justin\_Gonzalez](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/justin_gonzalez/32/5359_2.png) [@Justin\_Gonzalez](https://community.apollographql.com/u/Justin_Gonzalez)\
**Post date:** [February 6, 2025, 8:48pm UTC](https://community.apollographql.com/t/next-js-ssr-react-server-components-error-apolloprovider/5492/10 "2025-02-06T20:48:54Z")

</div>