I get an Invariant Violation when using the apollo client on react, specifically when I use the ApolloProvider. If I delete those ApolloProvider lines the problem goes, also I already tried removing the provider from Next-Auth. I’m using typescript and I don’t know if the declaration of the apollo configuration is correct.
This is the error:
⨯ node_modulests-invariantlibinvariant.cjs (16:27) @ call ⨯ Invariant Violation: An error occurred! For more details, see the full error text at https://go.apollo.dev/c/err#%7B%22version%22%3A%223.8.4%22%2C%22message%22%3A43%2C%22args%22%3A%5B%5D%7D at stringify (<anonymous>) null
import './globals.css'
import type { Metadata } from 'next'
import { Inter } from 'next/font/google'
import AuthProviders from "../Providers/Providers";
//graphQL
import {
ApolloClient,
InMemoryCache,
ApolloProvider,
HttpLink,
from,
} from "@apollo/client";
import { onError, ErrorResponse } from "@apollo/client/link/error";
const inter = Inter({ subsets: ['latin'] })
export const metadata: Metadata = {
title: 'test',
description: 'Generated by create next app',
}
// const errorLink = onError((errorResponse: ErrorResponse) => {
// if (errorResponse.graphqlErrors) {
// errorResponse.graphqlErrors.map(({ message }) => {
// alert(`GraphQL error ${message}`);
// });
// }
// });
const link = from([
// errorLink,
new HttpLink({ uri: "https://localhost:4000" }),
]);
const client = new ApolloClient({
cache: new InMemoryCache(),
link: link,
});
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body className={inter.className}>
<ApolloProvider client={client}>
<AuthProviders>
{/* {children} */}
</AuthProviders>
</ApolloProvider>
</body>
</html>
)
}