Error: Cannot read properties of undefined (reading 'Symbol(__APOLLO_CONTEXT__)')

i have issue a next.js project.

I am trying to get data with apollo client in my next.js project. Codes that worked before do not work now. I tried deleting the node_modules folder completely and installing. I tried deleting the _next folder and running it again. I tried updating the npm packages. I tried all the methods I found on the forums. However, it doesn't work.

This error message:

Unhandled Runtime Error
Error: Cannot read properties of undefined (reading 'Symbol(__APOLLO_CONTEXT__)')

This is error message source/details:
Source

contextKey
node_modules\@apollo\client\react\context\context.cjs (27:49)
getApolloContext
node_modules\@apollo\client\react\hooks\hooks.cjs (30:45)
useApolloClient
node_modules\@apollo\client\react\hooks\hooks.cjs (86:28)
app\[blog]\page.jsx (32:44) @ result
30 | export default function Hakkimda({ params, launches }) {
31 | //console.log("launches", launches);
> 32 | const { loading, error, data } = useQuery(result, client);
|                                          ^
33 | 
34 | if (loading) return <p>Loading...</p>;
35 | if (error) return <p>Error: {error.message}</p>;
Call Stack
type
node_modules\next\dist\compiled\react-server-dom-webpack\cjs\react-server-dom-webpack-server.edge.development.js (1447:17)
attemptResolveElement
node_modules\next\dist\compiled\react-server-dom-webpack\cjs\react-server-dom-webpack-server.edge.development.js (1759:20)
resolveModelToJSON
node_modules\next\dist\compiled\react-server-dom-webpack\cjs\react-server-dom-webpack-server.edge.development.js (1249:13)
stringify
<anonymous>
stringify
node_modules\next\dist\compiled\react-server-dom-webpack\cjs\react-server-dom-webpack-server.edge.development.js (181:13)
processModelChunk
node_modules\next\dist\compiled\react-server-dom-webpack\cjs\react-server-dom-webpack-server.edge.development.js (2062:25)
retryTask
node_modules\next\dist\compiled\react-server-dom-webpack\cjs\react-server-dom-webpack-server.edge.development.js (2109:6)
performWork
node_modules\next\dist\compiled\react-server-dom-webpack\cjs\react-server-dom-webpack-server.edge.development.js (1544:13)
listOnTimeout
node:internal/timers (569:17)
process.processTimers
node:internal/timers (512:7)

this problem happens when i try to get data with apollo.
this is the codes:
apolloclient.js codes:

import { ApolloClient, ApolloProvider, InMemoryCache } from "@apollo/client";
const client = new ApolloClient({
uri: "https://api.mocki.io/v2/c4d7a195/graphql",
cache: new InMemoryCache(),
});
export default client;

My next page codes:

import { gql, useQuery } from "@apollo/client";
import client from "../lib/apolloClient";
const GET_POSTS = gql`
{
users {
ID
e-mail
name
}
}
`;
const result = await client.query({
query: gql`
{
users {
ID
e-mail
name
}
}
`,
});
export default function About Me({ params, launches }) {
// console.log("launches", launches);
const { loading, error, data } = useQuery(result, client);
if (loading) return <p>Loading...</p>;
if (error) return <p>Error: {error.message}</p>;
return (
<main className="container min-h-screen px-8 mx-auto max-w-7xl">
<h1 className="mb-6 text-2xl capitalize">Incoming Parameter: {}</h1>
<div></div>
</main>
);
}
export async function getStaticProps() {
return {
props: {
launches: [],
},
};
}

package json:

{
"name": "salihonderfrontend",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint",
"cache-clean": "npm cache clean --force && yarn cache clean"
},
"dependencies": {
"@apollo/client": "^3.7.14",
"@fortawesome/free-brands-svg-icons": "^6.4.0",
"@fortawesome/free-solid-svg-icons": "^6.4.0",
"@fortawesome/react-fontawesome": "^0.2.0",
"@headlessui/react": "^1.7.14",
"@heroicons/react": "^2.0.17",
"autoprefixer": "^10.4.14",
"eslint": "^8.40.0",
"eslint-config-next": "^13.4.1",
"graphql": "^16.6.0",
"next": "^13.4.1",
"postcss": "^8.4.23",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"tailwindcss": "^3.3.2"
},
"browser": {
"fs": false,
"os": false,
"path": false
}
}

next.config.js:

/** @type { import('next').NextConfig} */
const nextConfig = {
//reactStrictMode: true,
//swcMinify: true,
experimental: {
appDir: true,
},
webpack: (config) => {
config.experiments = config.experiments || {};
config.experiments.topLevelAwait = true;
return config;
},
};
module.exports = nextConfig;

I think I tried everything. ChatGPT couldn't find a solution

I will assume that this is in the Next.js App Router.

You can import the Apollo Client Provider component and the Apollo Client hooks only in files that are part of a React Client Component.

That means that the file that contains the import of Apollo Client hooks or Provider has to be either marked "use client", or has to be imported by a file that is marked "use client" (or a file that imports a file and so on).

In your case, you seem to be doing that from a React Server Component, which causes that error.

You need to create a provider component and wrap the next.js root layout with the provider, NOTE: the provider you create needs to indicate use client at the top of the file.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

import { ApolloProvider } from "@apollo/client";
import { client } from "./xxxxxx";
export function ApolloClientProvider({ children }: { children: React.ReactNode }) {
return (
<ApolloProvider client={client}>
{children}
</ApolloProvider>
)
}
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body className={inter.className}>
<ApolloClientProvider >
{children}
</ApolloClientProvider>
</body>
</html>
);
}

<!-- end snippet -->