Reactjs 无法使用Apollo客户端GraphQL设置Next.js 14

发布于03月12日

我对Next.js和Amp；GraphQL是新手，需要在一个项目上使用两者.因此，try 使用Next.js(JavaScript，Reaction)、Apollo客户端、Apollo服务器来设置一个虚拟项目.服务器端已顺利启动并运行.但是客户端无法在UI中加载Apollo服务器数据，我可以从客户端创建一个基本的API调用并加载数据，但不能使用ApolloProvider/ApolloWrapper进行渲染.

我试着关注了网上的许多文章，但都没有奏效.最后一个看起来很有前途，很容易，但却是为TypeScrip-Medium Article和Amp；Repo编写的.我试着跟随它，但仍然不能理解错误:

Error Message个

100

import { Inter } from "next/font/google";
import "./globals.css";
import { ApolloProvider } from "@apollo/client";
// import { ApolloWrapper } from "../lib/apollo-wrapper";
import client from "../lib/client";


const inter = Inter({ subsets: ["latin"] });

export const metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({ children }) {
  return (
      <html lang="en">
        <body className={inter.className}>
          <ApolloProvider client={client}>{children}</ApolloProvider>
        </body>
      </html>
  );
}

100

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

const httpLink = new HttpLink({
  uri: '/'
})

const client = new ApolloClient({
    cache: new InMemoryCache(),
    uri: "http://localhost:4000/",
    link: from([httpLink])
  });
  
export default client;

100

  "dependencies": {
    "@apollo/client": "^3.9.0-rc.1",
    "@apollo/experimental-nextjs-app-support": "^0.8.0",
    "graphql": "^16.8.1",
    "next": "14.1.0",
    "react": "^18",
    "react-dom": "^18"
  },
  "devDependencies": {
    "autoprefixer": "^10.0.1",
    "eslint": "^8",
    "eslint-config-next": "14.1.0",
    "postcss": "^8",
    "tailwindcss": "^3.3.0"
  }

"use client"; import { ApolloLink, HttpLink } from "@apollo/client"; import { ApolloNextAppProvider, NextSSRInMemoryCache, NextSSRApolloClient, SSRMultipartLink, } from "@apollo/experimental-nextjs-app-support/ssr"; function makeClient() { const httpLink = new HttpLink({ uri: "http://localhost:4000/api/graphql", fetchOptions: { cache: "no-store" }, }); return new NextSSRApolloClient({ cache: new NextSSRInMemoryCache(), link: typeof window === "undefined" ? ApolloLink.from([ new SSRMultipartLink({ stripDefer: true, }), httpLink, ]) : httpLink, }); } export function ApolloWrapper({ children }) { return ( <ApolloNextAppProvider makeClient={makeClient}> {children} </ApolloNextAppProvider> ); }

import { Inter } from "next/font/google"; import "./globals.css"; import { ApolloWrapper } from "./ApolloWrapper"; const inter = Inter({ subsets: ["latin"] }); export const metadata = { title: "Create Next App", description: "Generated by create next app", }; export default function RootLayout({ children }) { return ( <html lang="en"> <body> <ApolloWrapper>{children}</ApolloWrapper> </body> </html> ); }

Reactjs 无法使用Apollo客户端GraphQL设置Next.js 14

推荐答案

Reactjs相关问答推荐

从Microsoft Excel粘贴复制的单元格时，将Excel单元格格式(粗体、下划线、斜体)带入Reaction

获取点击的国家/地区名称react 映射

GoLang有条件地为.js.gz提供服务(如果它存在)，否则为.js

在新屏幕上显示照片时出现问题-react

如何使用useState响应快速/顺序状态更新

如何使用服务器中的数据自动填充表单字段？

如何在 ChartJS 中创建此图表？在 NEXTjs 和 TSX 中

Next.js 和理智｜ npm run build 时预渲染页面/时发生错误

使用新数据更新时，React 不更新具有过滤功能的深层嵌套对象数组中的变量状态

在准备回调中使用状态属性(Redux 工具包)

我可以更改 styled() 中的响应吗？ (MUI v5)

RTK 查询Mutations 在 StrictMode 中执行两次

如何在react 中更新子组件中的变量？

当用户输入相同信息时如何禁用更新

如何在 MUI 数据网格中的 renderCell 组件之间传递状态

React Router v6 - 访问嵌套路由和处理手写 url 的正确方法

react-query、react-hook-form 和表单验证

需要帮助在 document.queryselector 的 nextjs 页面上插入 useEffect 状态

如何在 v6.4 中将 Auth0 提供程序与新的 createBrowsereRouter 一起使用？

Select MenuItem 时 Material-ui 不更改样式