將 Apollo Client 與 NextJS 一起使用時服務器端渲染數據？

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文件，我使用了與示例 repo 中完全相同的代碼。 在我的具體情況下，唯一的區別是我有一個明確的_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 邏輯的地方。

供參考的 repo 位於https://github.com/amitschandillia/proost/tree/master/web

Answer 1

使用 Next.js 和 Apollo 時，您需要實現 2 個關鍵目標：SSR 和緩存網絡數據。 兩者兼顧是一個艱難的平衡。 但這是可能的。

這樣做的方法是：

1. 在您的 getInitialProps function 中，使用 apolloclient 獲取在頁面加載時應該可見的數據。 如果操作正確，將與 HTML 即（SSR）一起檢索數據，並且在初始頁面加載時不會顯示煩人的加載程序。

現在，如果您有一些頁面數據需要編輯、添加或刪除，並且您希望在更改后更新頁面而不刷新頁面，那么以上是不夠的。 因為例如，如果您編輯數據，典型/推薦的 Apollo 方法是不做任何事情。 阿波羅為您神奇地處理這一切。 除了初始數據必須來自 apollo 緩存並且它必須有一個 Id 字段。 現在，由於您直接從服務器加載了初始數據，很可能您沒有從先前緩存的數據中讀取數據。

因此，需要下面的第 2 步來啟用數據更改時數據的自動刷新。

2. 您知道要編輯的任何數據都必須來自緩存。 所以不要試圖使用來自 getInitialProps 的數據來填充這些數據。 相反，您可以使用 useQuery 或其等效項來使用與 getInitialProps 查詢相同的 Graphql 查詢來查詢相同的數據。 現在發生的情況是，阿波羅這次沒有從網絡中獲取數據，而是從服務器上一次查詢中獲取數據。 然后突然之間，你看到的不是加載......到處都是，而是立即加載數據。 然后在您編輯數據的同時，它也會立即更新，因為數據首先是從緩存中填充的，現在更新會更改緩存的數據並自動刷新您的頁面。

這樣，您就可以毫不費力地繼續使用所有您喜歡的最新工具，例如 useQuery 和 getDataFromTree。

Answer 2

一些幫助研究：

我相信你應該使用getMarkupFromTree如本期建議的https://github.com/apollographql/react-apollo/issues/3251以及如何實現https://github.com/trojanowski/react-a鈎子/問題/52 。

看來，如果你想使用鈎子，你需要 @trojanowski 的react-apollo-hooks package。

有人說這個解決方案不起作用。 一些人認為它有一些低效率，例如，它將整個標記呈現兩次，一次由下一個，一次是為了獲取阿波羅查詢。 作為回應，他們建議做一些事情，比如直接在 get initial props 中調用查詢，這只是比應該做的更多的工作，因為 ssr 功能應該是開箱即用的。