具有阿波罗身份验证的下一个 Js，无法读取未定义的属性“查询”

Posted 2023-03-08

【中文标题】具有阿波罗身份验证的下一个 Js，无法读取未定义的属性“查询”

【英文标题】：Nexjs with apollo auth, cannot read property 'query' of undefined

【发布时间】：2019-05-21 13:30:41

【问题描述】：

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

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

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

https://github.com/MontoyaAndres/BarHalem

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

【参考方案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 />;
    
  ;
;

【讨论】：

是的，这解释了未定义的上下文