Ошибка: невозможно прочитать свойства неопределенного (чтение «Символ (__APOLLO_CONTEXT__)»)

у меня проблема с проектом next.js.

Я пытаюсь получить данные с помощью клиента apollo в моем проекте next.js. Коды, которые работали раньше, теперь не работают. Я попытался полностью удалить папку node_modules и установить. Я попытался удалить папку _next и запустить ее снова. Я попытался обновить пакеты npm. Перепробовал все способы, которые нашел на форумах. Однако это не работает.

Это сообщение об ошибке:

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

Это источник/детали сообщения об ошибке: Источник

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.info("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)

эта проблема возникает, когда я пытаюсь получить данные с помощью Apollo. это коды: Коды apolloclient.js:

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;

Коды моей следующей страницы:

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.info("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: [],
     },
   };
}

пакет 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
   }
}

следующий.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;

Думаю, я пробовал все. ChatGPT не смог найти решение :)