Question

我有一个将next.js与Apollo / Graphql结合使用的应用程序，并且我试图全面了解getInitialProps生命周期挂钩的工作方式。

在我的理解中，生命周期getInitialProps用于设置一些初始道具，这些道具将在应用程序首次加载时呈现服务器端，可用于从数据库中预取数据以帮助SEO或仅用于增强页面加载时间。

我的问题是这个：

每次我有一个query组件都会在我的计算机中获取一些数据应用中的所有组件，是否必须使用getInitialProps 确定数据将在服务器端呈现？

我的理解也是getInitialProps仅在页面索引组件中（以及在_app.js中起作用），这意味着在组件树中位于下方的任何组件都无法访问这个生命周期，并且需要在页面级别上获得一些初始道具，然后将它们传递到组件树下。（如果有人可以确认这个假设，那将很棒）

这是我的代码：

_app.js （在/pages文件夹中）

import App, { Container } from 'next/app';
import { ApolloProvider } from 'react-apollo';

class AppComponent extends App {
  static async getInitialProps({ Component, ctx }) {
    let pageProps = {};
    if (Component.getInitialProps) {
      pageProps = await Component.getInitialProps(ctx)
    }
    // this exposes the query to the user
    pageProps.query = ctx.query;
    return { pageProps };
  }
  render() {
    const { Component, apollo, pageProps } = this.props;

    return (
      <Container>
        <ApolloProvider client={apollo}> 
          <Component client={client} {...pageProps} />               
        </ApolloProvider>
      </Container>
    );
  }
}

export default AppComponent;

Index.js （在/pages/users文件夹中）

import React, { PureComponent } from 'react';
import { Query } from 'react-apollo';
import gql from 'graphql-tag';

const USERS_QUERY = gql`
  query USERS_QUERY {
    users {
      id
      firstName
    } 
  }
`;

class Index extends PureComponent {
  render() {
    return (
      <Query query={USERS_QUERY}>
        {({data}) => {
          return data.map(user => <div>{user.firstName}</div>);
        }}
      </Query>
    );
  }
}

export default Index;

Answer 1

答案是否定的

如果您将Apollo与Next JS一起使用，则不必在每个页面上使用getInitialProps来获取一些初始数据来获取服务器端呈现的一些初始数据。 getInitialProps的以下配置足以使所有组件在其中具有<Query>组件的情况下通过各自的查询呈现出来

static async getInitialProps({ Component, ctx }) {
    let pageProps = {};
    if (Component.getInitialProps) {
      pageProps = await Component.getInitialProps(ctx)
    }
    // this exposes the query to the user
    pageProps.query = ctx.query;
    return { pageProps };
  }

我的问题以及为什么看不到任何服务器端渲染是Heroku或Now无法使用公共URL（即my-app.heroku.com）执行SSR。为了解决这个问题，我购买了一个自定义URL并在Heroku中应用了它。连同自定义URL，我在Apollo配置中进行了以下配置

  const request = (operation) => {
    operation.setContext({
      fetchOptions: {
        credentials: 'include'
      },
      headers: { cookie: headers.cookie }
    });
  };

这完全解决了问题，现在我有了SSR，而不必在每个页面上手动设置getInitialProps

希望这对某人有帮助

Next.js-了解getInitialProps

1 个答案: