next.js 错误:无法读取未定义的属性(阅读“Symbol(__APOLLO_CONTEXT__)')”)

dw1jzc5e  于 2023-05-17  发布在  其他
关注(0)|答案(1)|浏览(101)

我发布了一个next.js项目。
我试图在我的next.js项目中使用apollo客户端获取数据。以前有效的代码现在不起作用了。我尝试完全删除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.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)

这个问题发生在我试图用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.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: [],
     },
   };
}

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;

我想我什么都试过了。ChatGPT无法找到解决方案:)

56lgkhnf

56lgkhnf1#

我假设这是在Next.js应用路由器中。
您只能在React客户端组件的一部分文件中导入Apollo客户端提供程序组件和Apollo客户端钩子。
这意味着包含Apollo客户端钩子或Provider导入的文件必须标记为"use client",或者必须由标记为"use client"的文件(或导入文件的文件等)导入。
在你的例子中,你似乎是从一个React服务器组件中这样做的,这导致了这个错误。

相关问题