Next.js中使用Apollo Client查询时出现Symbol(__APOLLO_CONTEXT__)未定义错误

问题概述 #

在Next.js项目中使用Apollo Client执行GraphQL查询时，触发错误：Error: Cannot read properties of undefined (reading 'Symbol(__APOLLO_CONTEXT__)')。尝试在查询页面添加"use client"指令后，出现其他异常。

问题原因 #

1. Next.js 13+ App Router默认页面为服务器组件，而Apollo Client的useQuery是客户端Hook，无法在服务器组件中直接调用。
2. ApolloProvider在客户端组件PageWrapper中，但查询页面未声明为客户端组件时，服务器组件无法访问客户端上下文，导致上下文未定义报错。
3. 原代码中PageWrapper重复渲染了Header，可能引发组件层级混乱；同时Apollo Client的uri可能未指向正确的GraphQL端点。

解决方案 #

1. 声明查询页面为客户端组件 #

所有使用Apollo Client Hooks的组件必须添加"use client"指令，明确为客户端组件。

2. 调整ApolloProvider层级与组件结构 #

确保ApolloProvider包裹所有需要使用GraphQL的子组件，同时移除重复的组件渲染。

3. 验证Apollo Client配置 #

确认uri指向正确的GraphQL后端端点（通常需添加/graphql路径）。

修改后代码示例 #

查询页面（page.tsx） #

"use client";
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>;

  return (
    <main className={styles.main}>
      <h1>Recently added:</h1>
      {data?.getAdverts?.map(advert => (
        <div key={advert.id}>
          <p>Location: {advert.location}</p>
          <p>Price: {advert.price}</p>
        </div>
      ))}
    </main>
  );
}

PageWrapper组件 #

"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";

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

  const toggleTheme = () => {
    setTheme(prev => prev === "light" ? "dark" : "light");
  };

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

export default PageWrapper;

Apollo Client配置（apollo.ts） #

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

const apolloClient = new ApolloClient({
  uri: "http://localhost:8000/graphql", // 确保指向正确的GraphQL端点
  cache: new InMemoryCache(),
});

export default apolloClient;

关键注意事项 #

• 客户端Hook（如useQuery）只能在添加了"use client"的组件中使用。
• ApolloProvider必须在客户端组件中渲染，确保上下文能传递到所有子组件。
• 检查后端GraphQL服务是否正常运行，端点路径是否匹配。

内容的提问来源于stack exchange，提问作者tailai tailai