Nexjs с apollo auth, не может прочитать свойство 'query' из undefined - PullRequest
Новая
       37

Nexjs с apollo auth, не может прочитать свойство 'query' из undefined

0 голосов
/ 21 декабря 2018

Я руководствовался этим примером из репозитория Nextjs репо и внедрял его в свой проект, но выдает мне эту ошибку:

enter image description here

Мой API не работает с веб-токенами json, но я правильно определил ApolloProvider с помощью файлов cookie ... Вы можете проверить полный код здесь:

Компонент снимка экрана взят из страниц /login.js.

https://github.com/MontoyaAndres/BarHalem

И протестируйте его в папке сервера docker-compose -f docker-compose.dev.yml up --build и в папке клиента с помощью: yarn dev

1 Ответ

0 голосов
/ 21 декабря 2018

Только добавив ctx.ctx.apolloClient = apollo в файл withApollo.js, все будет работать.Полный код будет: 

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} />;
    }
  };
};
...