Next Js with apollo auth, cannot read 属性 'query' of undefined

Question

我一直在指导 Nextjs repo 中的这个示例，并将其实施到我的项目中，但抛出了这个错误：

我的 API 不适用于 json 网络令牌，但我已经使用 cookie 正确定义了 ApolloProvider...您可以在此处查看完整代码：

截图组件来自pages/login.js.

https://github.com/MontoyaAndres/BarHalem

并在服务器文件夹 docker-compose -f docker-compose.dev.yml up --build 和客户端文件夹中对其进行测试运行：yarn dev

Answer 1

只需要在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} />;
    }
  };
};

Next Js with apollo auth, cannot read 属性 'query' of undefined

Nexjs with apollo auth, cannot read property 'query' of undefined

graphql

react-apollo

next.js