Graphql 具有apollo auth的Nexjs，无法读取属性'；查询'；未定义的

我一直在从Nextjs中指导这个示例，并将其实现到我的项目中，但我遇到了以下错误：

我的API不适用于json web令牌，但我已使用Cookie正确定义了Apollo提供程序。。。您可以在此处检查完整的代码：

屏幕截图的组件来自pages/login.js

---

并在服务器文件夹

docker compose-f docker-compose.dev.yml up--build

和客户机文件夹中运行它，使用：

warn dev
只需在withApollo.js文件中添加
ctx.ctx.apolloClient=apollo
，所有操作都将正常。完整的代码是：

import React from "react";
import Head from "next/head";
import { getDataFromTree } from "react-apollo";

import initApollo from "./initApollo";

export default App => {
  return class WithData extends React.Component {
    static displayName = `WithData(${App.displayName})`;

    static async getInitialProps(ctx) {
      const { Component, router } = ctx;
      const apollo = initApollo({});

      ctx.ctx.apolloClient = apollo;

      let appProps = {};
      if (App.getInitialProps) {
        appProps = await App.getInitialProps(ctx);
      }

      // Run all GraphQL queries in the component tree
      // and extract the resulting data
      if (!process.browser) {
        try {
          // Run all GraphQL queries
          await getDataFromTree(
            <App
              {...appProps}
              Component={Component}
              router={router}
              apolloClient={apollo}
            />
          );
        } catch (error) {
          console.error("Error while running `getDataFromTree`", error);
        }

        // getDataFromTree does not call componentWillUnmount
        // head side effect therefore need to be cleared manually
        Head.rewind();
      }

      // Extract query data from the Apollo store
      const apolloState = apollo.cache.extract();

      return {
        ...appProps,
        apolloState
      };
    }

    constructor(props) {
      super(props);
      this.apolloClient = initApollo(props.apolloState);
    }

    render() {
      return <App {...this.props} apolloClient={this.apolloClient} />;
    }
  };
};

从“React”导入React；
从“下一个/Head”导入Head；
从“react apollo”导入{getDataFromTree}；
从“/initApollo”导入initApollo；
导出默认应用=>{
返回数据扩展为React.Component的类{
静态显示名=`WithData（${App.displayName}）`；
静态异步getInitialProps（ctx）{
const{Component，router}=ctx；
const apollo=initApollo（{}）；
ctx.ctx.apollo客户端=阿波罗；
设appProps={}；
如果（应用程序getInitialProps）{
appProps=等待App.getInitialProps（ctx）；
}
//运行组件树中的所有GraphQL查询
//并提取结果数据
如果（！process.browser）{
试一试{
//运行所有GraphQL查询
等待getDataFromTree(
);
}捕获（错误）{
console.error（“运行`getDataFromTree`'时出错，错误”）；
}
//getDataFromTree不调用componentWillUnmount
//因此，需要手动清除头部副作用
头。倒带（）；
}
//从Apollo存储中提取查询数据
const apolloState=apollo.cache.extract（）；
返回{
…appProps，
阿波罗州
};
}
建造师（道具）{
超级（道具）；
this.apolloClient=initApollo（props.apolloState）；
}
render（）{
回来
}
};
};
是的，这解释了未定义的上下文