Null ⨯ node_modules\ts-invariant\lib\invariant.js (11:27) @ call

Help
1

I am using Apollo client for data fetching using in next js . but I am getting this error.
⨯ node_modules\ts-invariant\lib\invariant.js (11:27) @ call
⨯ Invariant Violation: An error occurred! For more details, see the full error text at Error code details - Apollo GraphQL Docs
at stringify ()
digest: “810932931”
null

kindly guide how to resolve the error.
see this is my code.

layout.tsx

import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import Link from "next/link";
import { APP_ROUTES } from "./lib/constants";
import { ApolloProvider } from "@apollo/client";
import client from "./components/apolloClient";
const inter = Inter({ subsets: ["latin"] });
export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <ApolloProvider client={client}>
      <html lang="en">
        <body className={inter.className}>
          <div className="flex flex-col h-screen">
            <header className="flex shadow-lg p-4 bg-gray-900 text-white">
              <Link href={APP_ROUTES.AXIOS}></Link>
            </header>
            <div className="flex-1 p-16 flex justify-center items-center">
              {children}
            </div>
          </div>
        </body>
      </html>
    </ApolloProvider>
  );
}

this is my apolloClient (page.js)

// components/CountryInfo.js
"use client";
import React from "react";
import { useQuery, gql } from "@apollo/client";
const GET_COUNTRY_DATA = gql`
  query {
    country(code: "BR") {
      name
      native
      capital
      emoji
      currency
      languages {
        code
        name
      }
    }
  }
`;
const CountryApollo = () => {
  const { loading, error, data } = useQuery(GET_COUNTRY_DATA);
  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;
  const countryData = data.country;
  return (
    <div>
      <h1>Country Information</h1>
      <p>Name: {countryData.name}</p>
      <p>Native Name: {countryData.native}</p>
      <p>Capital: {countryData.capital}</p>
      <p>Emoji: {countryData.emoji}</p>
      <p>Currency: {countryData.currency}</p>
      <p>Languages:</p>
      <ul>
        {countryData.languages.map((language) => (
          <li key={language.code}>{language.name}</li>
        ))}
      </ul>
    </div>
  );
};
export default CountryApollo;
2

Hi @SHRIRAM :wave: welcome to the forum! ApolloProvider can only be used in Client components, so putting it in layout.tsx won’t work. More info on recommended usage can be found here: