我发布了一个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无法找到解决方案:)
1条答案
按热度按时间56lgkhnf1#
我假设这是在Next.js应用路由器中。
您只能在React客户端组件的一部分文件中导入Apollo客户端提供程序组件和Apollo客户端钩子。
这意味着包含Apollo客户端钩子或Provider导入的文件必须标记为
"use client"
,或者必须由标记为"use client"
的文件(或导入文件的文件等)导入。在你的例子中,你似乎是从一个React服务器组件中这样做的,这导致了这个错误。