Error: Cannot read properties of undefined (reading ‘Symbol(__APOLLO_CONTEXT__)’) when using apollo provider

Question

i want to use query in my next app but when i’m using it i’m getting error Error: Cannot read properties of undefined (reading ‘Symbol(APOLLO_CONTEXT)’)

so this is my apollo client:

import { ApolloClient, InMemoryCache } from "@apollo/client";

const apolloClient = new ApolloClient({
  uri: "https://localhost:8000/",
  cache: new InMemoryCache(),
});

export default apolloClient;

layout.tsx:

import Footer from "./footer";
import Header from "./header";
import PageWrapper from "./pagewrapper";
import "@/styles/nav.css";

export const metadata = {
  title: "Next.js",
  description: "Generated by Next.js",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <Header></Header>
        <PageWrapper>{children}</PageWrapper>
        <Footer></Footer>
      </body>
    </html>
  );
}

page wrapper:

"use client";
import { ThemeProvider } from "styled-components";
import { GlobalStyles, darkTheme, lightTheme } from "@/styles/ThemeConfig";
import { useState } from "react";
import { ApolloProvider } from "@apollo/client";
import client from "./apollo";
import Header from "./header";

const PageWrapper = ({ children }: { children: React.ReactNode }) => {
  const [theme, setTheme] = useState("dark");

  const toggleTheme = () => {
    theme == "light" ? setTheme("dark") : setTheme("light");
    console.log(theme);
  };

  console.log(theme);
  return (
    <ApolloProvider client={client}>
      <ThemeProvider theme={theme == "light" ? lightTheme : darkTheme}>
        <GlobalStyles />
        <button onClick={toggleTheme}>Switch Theme</button>
        {children}
      </ThemeProvider>
    </ApolloProvider>
  );
};

export default PageWrapper;

where i use query:

import Image from "next/image";
import styles from "./page.module.css";
import { GET_ADVERTS } from "@/graphql/advert";
import { useQuery } from "@apollo/client";

export default function Home() {
  const { loading, error, data } = useQuery(GET_ADVERTS);

  if (loading) return <p>Loading....</p>;

  if (error) return <p>error: {error.message}</p>;

  console.log(data);
  return (
    <main className={styles.main}>
      <h1>Recently added:</h1>
    </main>
  );
}

query:

import { ApolloClient, InMemoryCache, gql } from "@apollo/client";

export const GET_ADVERTS = gql`
  query GetAdverts {
    getAdverts {
      id
      location
      price
    }
  }
`;

i tried to use use client directive in page where i want to query data, but it’s giving other error

Error: Cannot read properties of undefined (reading ‘Symbol(__APOLLO_CONTEXT__)’) when using apollo provider

Error: Cannot read properties of undefined (reading ‘Symbol(__APOLLO_CONTEXT__)’) when using apollo provider

0

Leave a Reply Cancel reply