react-apollo 服务器端渲染

Posted 2023-03-10

【中文标题】react-apollo 服务器端渲染

【英文标题】：react-apollo Server Side Rendering

【发布时间】：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 示例中的 s-s-r 实现中，cookie 不起作用。请帮忙。 我需要将next-with-apollo 与react-apollo s-s-r 集成。

【参考方案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',
        // В режиме s-s-r необходимо передавать данные авторизации, которые хранятся в cookies, иначе, в браузер будет
        // выдана страница от имени анонимного пользователя несмотря на то, что он может быть авторизован
        headers: process.browser ?  : 
          cookie: headers.cookie
        
      ),
      s-s-rMode: !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>