Facing issue when adding graphql to nextjs
This is my root layout file but when I use this I am getting runtime error
import localFont from "next/font/local";
import "./globals.css";
import { ApolloClient, InMemoryCache, ApolloProvider } from "@apollo/client";
const geistSans = localFont({
src: "./fonts/GeistVF.woff",
variable: "--font-geist-sans",
weight: "100 900",
});
const geistMono = localFont({
src: "./fonts/GeistMonoVF.woff",
variable: "--font-geist-mono",
weight: "100 900",
});
// apollo client
const client = new ApolloClient({
uri: process.env.NEXT_PUBLIC_STRAPI_GRAPHQL_URL,
cache: new InMemoryCache(),
});
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
>
<ApolloProvider client={client}>{children}</ApolloProvider>
</body>
</html>
);
}import localFont from "next/font/local";
import "./globals.css";
import { ApolloClient, InMemoryCache, ApolloProvider } from "@apollo/client";
const geistSans = localFont({
src: "./fonts/GeistVF.woff",
variable: "--font-geist-sans",
weight: "100 900",
});
const geistMono = localFont({
src: "./fonts/GeistMonoVF.woff",
variable: "--font-geist-mono",
weight: "100 900",
});
// apollo client
const client = new ApolloClient({
uri: process.env.NEXT_PUBLIC_STRAPI_GRAPHQL_URL,
cache: new InMemoryCache(),
});
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
>
<ApolloProvider client={client}>{children}</ApolloProvider>
</body>
</html>
);
}Unhandled Runtime Error
Error: React functionality 'useContext' is not available in this environment.Unhandled Runtime Error
Error: React functionality 'useContext' is not available in this environment.
