react-apollo 服务器端渲染答案

【问题标题】：react-apollo Server Side Renderingreact-apollo 服务器端渲染
【发布时间】：2019-10-05 08:36:55
【问题描述】：

免责声明：我在 SO 上看到了许多其他听起来相同的问题。但是不，这个问题及其背景，一切都不同。不重复。

嘿，我已经按照 https://github.com/zeit/next.js/tree/canary/examples/with-apollo.

除 cookie 外，一切都运行良好。在 CSR 实施的早期，我的withData.js 看起来像这样????

import withApollo from 'next-with-apollo'
import ApolloClient from 'apollo-boost'
function createClient({ headers }) {

  return new ApolloClient({
    uri: `${process.env.ENDPOINT}/graphql`,
    request: operation => {
      operation.setContext({
        fetchOptions: {
          credentials: 'include',
        },
        headers
      })
    }
  })

}

export default withApollo(createClient)

在上面的示例中，cookie 是由于 request 函数而起作用的。

但在 Next.js 示例中的 SSR 实现中，cookie 不起作用。请帮忙。我需要将next-with-apollo 与react-apollo SSR 集成。

【问题讨论】：

标签： javascript reactjs apollo react-apollo next.js

【解决方案1】：

我的集成如下：

import { ApolloClient } from 'apollo-client';
import { createHttpLink } from 'apollo-link-http';
import { InMemoryCache } from 'apollo-cache-inmemory';
import fetch from 'isomorphic-unfetch';
import withApollo from 'next-with-apollo';

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

export default withApollo(
  ({ ctx, headers, initialState }) => {
    return new ApolloClient({
      link: createHttpLink({
        fetch, // Switches between unfetch & node-fetch for client & server.
        uri: process.browser ? '/graphql' : `${process.env.ABSOLUTE_URL}/graphql`, // Only absolute URLs are supported
        credentials: 'same-origin',
        // В режиме SSR необходимо передавать данные авторизации, которые хранятся в cookies, иначе, в браузер будет
        // выдана страница от имени анонимного пользователя несмотря на то, что он может быть авторизован
        headers: process.browser ? {} : {
          cookie: headers.cookie
        }
      }),
      ssrMode: !process.browser, // eslint-disable-line
      //  rehydrate the cache using the initial data passed from the server:
      cache: new InMemoryCache().restore(initialState || {}),
      connectToDevTools: process.browser
    });
  }
);

查看回调参数({ ctx, headers, initialState })——它们来自服务器。

现在我在来自next/app 包的App 组件中渲染CookiesProvider：

<ApolloProvider client={apollo}>
  <CookiesProvider>
    {/* ... */}
  </CookiesProvider>
</ApolloProvider>

【讨论】：