使用带有 NextJS 的 Apollo Client 时服务器端渲染数据？

Question

我的组件目前在浏览器上水合，这是我想避免的。当您访问该链接时，我希望它预先包含它需要显示的所有数据，即在服务器上呈现。目前，该组件如下所示：

import { graphql } from "react-apollo";
import gql from 'graphql-tag';
import withData from "../../apollo/with-data";
import getPostsQuery from '../../apollo/schemas/getPostsQuery.graphql';


const renderers = {
  paragraph: (props) => <Typography variant="body2" gutterBottom {...props} />,
};

const GET_POSTS = gql`${getPostsQuery}`;

const PostList = ({data: {error, loading, posts}}) => {
  let payload;
  if(error) {
    payload = (<div>There was an error!</div>);
  } else if(loading) {
    payload = (<div>Loading...</div>);
  } else {
    payload = (
      <>
        {posts.map((post) => (
          <div>
            <div>{post.title}</div>
            <div>{post.body}</div>
          </div>
        ))}
      </>
    );
  }
    return payload;
};

export default withData(graphql(GET_POSTS)(PostList));

如您所见，它首先在后台获取帖子时显示文本Loading...。我不想要那个。我希望它已经与获取的数据一起预水合。

作为参考，我的 Apollo 初始化如下所示：

// apollo/with-data.js

import React from "react";
import PropTypes from "prop-types";
import { ApolloProvider, getDataFromTree } from "react-apollo";
import initApollo from "./init-apollo";

export default ComposedComponent => {
  return class WithData extends React.Component {
    static displayName = `WithData(${ComposedComponent.displayName})`;
    static propTypes = {
      serverState: PropTypes.object.isRequired
    };

    static async getInitialProps(ctx) {
      const headers = ctx.req ? ctx.req.headers : {};
      let serverState = {};

      // Evaluate the composed component's getInitialProps()
      let composedInitialProps = {};
      if (ComposedComponent.getInitialProps) {
        composedInitialProps = await ComposedComponent.getInitialProps(ctx);
      }

      // Run all graphql queries in the component tree
      // and extract the resulting data
      if (!process.browser) {
        const apollo = initApollo(headers);
        // Provide the `url` prop data in case a graphql query uses it
        const url = { query: ctx.query, pathname: ctx.pathname };

        // Run all graphql queries
        const app = (
          <ApolloProvider client={apollo}>
            <ComposedComponent url={url} {...composedInitialProps} />
          </ApolloProvider>
        );
        await getDataFromTree(app);

        // Extract query data from the Apollo's store
        const state = apollo.getInitialState();

        serverState = {
          apollo: {
            // Make sure to only include Apollo's data state
            data: state.data
          }
        };
      }

      return {
        serverState,
        headers,
        ...composedInitialProps
      };
    }

    constructor(props) {
      super(props);
      this.apollo = initApollo(this.props.headers, this.props.serverState);
    }

    render() {
      return (
        <ApolloProvider client={this.apollo}>
          <ComposedComponent {...this.props} />
        </ApolloProvider>
      );
    }
  };
};

// apollo/init-apollo.js

import { InMemoryCache } from 'apollo-cache-inmemory';
import { ApolloClient } from 'apollo-client';
import { ApolloLink } from 'apollo-link';
import { onError } from 'apollo-link-error';
import { HttpLink } from 'apollo-link-http';
import fetch from 'isomorphic-fetch';

let apolloClient = null;

// Polyfill fetch() on the server (used by apollo-client)
if (!process.browser) {
  global.fetch = fetch;
}

const create = (headers, initialState) => new ApolloClient({
  initialState,
  link: ApolloLink.from([
    onError(({ graphQLErrors, networkError }) => {
      if (graphQLErrors) {
        graphQLErrors.forEach(({ message, locations, path }) => console.log(
          `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`,
        ));
      }
      if (networkError) console.log(`[Network error]: ${networkError}`);
    }),
    new HttpLink({
      // uri: 'https://dev.schandillia.com/graphql',
      uri: process.env.CMS,
      credentials: 'same-origin',
    }),
  ]),
  ssrMode: !process.browser, // Disables forceFetch on the server (so queries are only run once)
  cache: new InMemoryCache(),
});

export default function initApollo(headers, initialState = {}) {
  // Make sure to create a new client for every server-side request so that data
  // isn't shared between connections (which would be bad)
  if (!process.browser) {
    return create(headers, initialState);
  }

  // Reuse client on the client-side
  if (!apolloClient) {
    apolloClient = create(headers, initialState);
  }

  return apolloClient;
}

更新：我尝试将https://github.com/zeit/next.js/tree/canary/examples/with-apollo 的官方withApollo 示例合并到我的项目中，但它在getDataFromTree() 上抛出了一个不变的错误：

元素类型无效：应为字符串（用于内置组件）或类/函数（用于复合组件）但得到：未定义。

对于/init/apollo.js、/components/blog/PostList.jsx 和/pages/Blog/jsx 文件，我使用了与示例存储库中完全相同的代码。在我的具体情况下，唯一的区别是我有一个明确的_app.jsx，内容如下：

/* eslint-disable max-len */

import '../static/styles/fonts.scss';
import '../static/styles/style.scss';
import '../static/styles/some.css';

import CssBaseline from '@material-ui/core/CssBaseline';
import { ThemeProvider } from '@material-ui/styles';
import jwt from 'jsonwebtoken';
import withRedux from 'next-redux-wrapper';
import App, {
  Container,
} from 'next/app';
import Head from 'next/head';
import React from 'react';
import { Provider } from 'react-redux';

import makeStore from '../reducers';
import mainTheme from '../themes/main-theme';
import getSessIDFromCookies from '../utils/get-sessid-from-cookies';
import getLanguageFromCookies from '../utils/get-language-from-cookies';
import getUserTokenFromCookies from '../utils/get-user-token-from-cookies';
import removeFbHash from '../utils/remove-fb-hash';

class MyApp extends App {
  static async getInitialProps({ Component, ctx }) {
    let userToken;
    let sessID;
    let language;

    if (ctx.isServer) {
      ctx.store.dispatch({ type: 'UPDATEIP', payload: ctx.req.headers['x-real-ip'] });

      userToken = getUserTokenFromCookies(ctx.req);
      sessID = getSessIDFromCookies(ctx.req);
      language = getLanguageFromCookies(ctx.req);
      const dictionary = require(`../dictionaries/${language}`);
      ctx.store.dispatch({ type: 'SETLANGUAGE', payload: dictionary });
      if(ctx.res) {
        if(ctx.res.locals) {
          if(!ctx.res.locals.authenticated) {
            userToken = null;
            sessID = null;
          }
        }
      }
      if (userToken && sessID) { // TBD: validate integrity of sessID
        const userInfo = jwt.verify(userToken, process.env.JWT_SECRET);
        ctx.store.dispatch({ type: 'ADDUSERINFO', payload: userInfo });
      }
      ctx.store.dispatch({ type: 'ADDSESSION', payload: sessID }); // component will be able to read from store's state when rendered
    }
    const pageProps = Component.getInitialProps ? await Component.getInitialProps(ctx) : {};
    return { pageProps };
  }

  componentDidMount() {
    // Remove the server-side injected CSS.
    const jssStyles = document.querySelector('#jss-server-side');
    if (jssStyles) {
      jssStyles.parentNode.removeChild(jssStyles);
    }
    // Register serviceWorker
    if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/serviceWorker.js'); }

    // Handle FB's ugly redirect URL hash
    removeFbHash(window, document);
  }

  render() {
    const { Component, pageProps, store } = this.props;

    return (
      <Container>
        <Head>
          <meta name="viewport" content="user-scalable=0, initial-scale=1, minimum-scale=1, width=device-width, height=device-height, shrink-to-fit=no" />
          <meta httpEquiv="X-UA-Compatible" content="IE=edge,chrome=1" />
          <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
          <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
          <link rel="icon" type="image/png" sizes="194x194" href="/favicon-194x194.png" />
          <link rel="icon" type="image/png" sizes="192x192" href="/android-chrome-192x192.png" />
          <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
          <link rel="manifest" href="/site.webmanifest" />
          <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#663300" />
          <meta name="msapplication-TileColor" content="#da532c" />
          <meta name="msapplication-TileImage" content="/mstile-144x144.png" />
        </Head>
        <ThemeProvider theme={mainTheme}>
          {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
          <CssBaseline />
            <Provider store={store}>
              <Component {...pageProps} />
            </Provider>
        </ThemeProvider>
      </Container>
    );
  }
}

export default withRedux(makeStore)(MyApp);

删除这个文件不是一个选项，因为这是我处理一些预加载 cookie 逻辑的地方。

供参考的回购位于https://github.com/amitschandillia/proost/tree/master/web

Answer 1

在使用 Next.js 和 Apollo 时，您需要实现两个关键目标：SSR 和缓存网络数据。 两者兼顾是一个艰难的平衡。但这是可能的。

方法是：

1. 在您的 getInitialProps 函数中，使用 apolloclient 获取在页面加载时应该可见的数据。如果操作正确，数据将与 HTML ie (SSR) 一起检索，并且在您的初始页面加载时不会显示烦人的加载程序。

现在，如果您有一些页面数据需要编辑、添加或删除，并且您希望在更改后更新页面而不刷新页面，那么以上是不够的。 因为例如，如果您编辑数据，典型/推荐的 Apollo 方法是不做任何事情。阿波罗为您神奇地处理这一切。除了初始数据必须来自 apollo 缓存并且它必须有一个 Id 字段。 现在您已经直接从服务器加载了初始数据，很可能您没有从之前缓存的数据中读取数据。

因此需要下面的第 2 步来启用数据更改时数据的自动刷新。

1. 您知道要编辑的任何数据都必须来自缓存。所以不要试图使用来自 getInitialProps 的数据来填充这些数据。相反，您可以使用 useQuery 或其等效项来使用与 getInitialProps 查询相同的 Graphql 查询来查询相同的数据。现在发生的情况是，阿波罗这次没有从网络中获取数据，而是从服务器上一次查询中获取数据。然后突然之间，你看到的不是加载......到处都是，而是立即加载数据。然后在您编辑数据的同时，它也会立即更新，因为数据首先是从缓存中填充的，现在更新会更改缓存的数据并自动刷新您的页面。

这样，您可以毫不费力地继续使用所有您喜欢的最新工具，例如 useQuery 和 getDataFromTree。

Answer 2

一些有用的研究：

我相信你应该使用getMarkupFromTree，正如本期建议的https://github.com/apollographql/react-apollo/issues/3251 以及如何实现https://github.com/trojanowski/react-apollo-hooks/issues/52。

看来，如果你想使用钩子，你需要 @trojanowski 的 react-apollo-hooks 包。

有些人说这个解决方案不起作用。一些人认为它有一些低效率，例如，它将整个标记呈现两次，一次由下一次，一次是为了获取阿波罗查询。作为回应，他们建议做一些事情，比如直接在 get initial props 中调用查询，这只是比应该做的更多的工作，因为 ssr 功能应该是开箱即用的。