react-apollo 服务器端渲染

Question

Disclaimer: I saw many other questions on SO which sound the same. But no, this question and its context, everything is different. NOT DUPLICATE.

Hey, I have setup everything as per https://github.com/zeit/next.js/tree/canary/examples/with-apollo .

Everything works well except cookies. Earlier in CSR implementation, my withData.js looked like this 👇

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)

In the above example, cookies worked due to the request function.

But in the SSR implementation as per Next.js example, cookies don't work. Please help. I need to integrate next-with-apollo with react-apollo SSR.

Answer 1

My integration is following:

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
    });
  }
);

Look at callback params ({ ctx, headers, initialState }) — they go from server.

Now I render CookiesProvider in App component from next/app package:

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