我想在我的下一个应用程序中使用查询，但是当我使用它时，我收到错误错误：无法读取未定义的属性（读取'Symbol（APOLLO_CONTEXT）'）
这是我的阿波罗客户端：
import { ApolloClient, InMemoryCache } from "@apollo/client";
const apolloClient = new ApolloClient({
uri: "http://localhost:8000/",
cache: new InMemoryCache(),
});
export default apolloClient;
布局.tsx：
import Footer from "./footer";
import Header from "./header";
import PageWrapper from "./pagewrapper";
import "@/styles/nav.css";
export const metadata = {
title: "Next.js",
description: "Generated by Next.js",
};
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body>
<Header></Header>
<PageWrapper>{children}</PageWrapper>
<Footer></Footer>
</body>
</html>
);
}
页面包装：
"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";
import Header from "./header";
const PageWrapper = ({ children }: { children: React.ReactNode }) => {
const [theme, setTheme] = useState("dark");
const toggleTheme = () => {
theme == "light" ? setTheme("dark") : setTheme("light");
console.log(theme);
};
console.log(theme);
return (
<ApolloProvider client={client}>
<ThemeProvider theme={theme == "light" ? lightTheme : darkTheme}>
<GlobalStyles />
<button onClick={toggleTheme}>Switch Theme</button>
{children}
</ThemeProvider>
</ApolloProvider>
);
};
export default PageWrapper;
我使用查询的地方：
import Image from "next/image";
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>;
console.log(data);
return (
<main className={styles.main}>
<h1>Recently added:</h1>
</main>
);
}
查询：
import { ApolloClient, InMemoryCache, gql } from "@apollo/client";
export const GET_ADVERTS = gql`
query GetAdverts {
getAdverts {
id
location
price
}
}
`;
我尝试在要查询数据的页面中使用 use client 指令，但它给出了其他错误
如果您首先从服务器组件导入
@apollo/client