I am trying to wrap my whole layout with Apollo so I can use graphQL in all of my page.
but it shows error whenever I tried to wrap the apolloprovider outside children component
⨯ node_modules\rehackt\rsc.js (36:12) @ throwNoContext
⨯ Error: Context is not available in this environment.
at stringify (<anonymous>)
digest: "1025442082"
null
// apolloClient.js
import { ApolloClient, InMemoryCache } from "@apollo/client";
let apolloClient;
const getApolloClient = () => {
if (apolloClient == null){
apolloClient = new ApolloClient({
uri: "http://localhost:3000/api/graphql",
cache: new InMemoryCache(),
});
}
return apolloClient
};
export default getApolloClient;
// layout.js
import { ApolloProvider } from "@apollo/client";
import getApolloClient from "@/db/apolloClient";
export default async function RootLayout({ children }) {
const session = await getServerSession();
const apolloClient = getApolloClient();
return (
<html lang="en" suppressHydrationWarning={true}>
<body className={inter.className}>
<ApolloProvider client={apolloClient}>
{children}
</ApolloProvider>
</body>
</html>
);
}
