Apollo + Gatsby SSR

gatsby-ssr.js

import React from 'react'
import { renderToString, renderToStaticMarkup } from 'react-dom/server'
import ApolloClient, { createNetworkInterface,  } from 'apollo-client'
import { ApolloProvider, getDataFromTree } from 'react-apollo'

// Apollo Setup
const networkInterface = createNetworkInterface({
  uri: process.env.GRAPHCOOL_API
})

// Apollo client in server side rendering mode
const client = new ApolloClient({
  ssrMode: true,
  networkInterface,
  dataIdFromObject: o => o.id
})

exports.replaceRenderer =  ({ bodyComponent, replaceBodyHTMLString }) => {

  return new Promise((resolve, reject) => {
    // bodyComponent is the entire React component tree for the page
    const ApolloQueries = (
        <ApolloProvider client={client}>
          {bodyComponent}
        </ApolloProvider>
    );
    // getDataFromTree walks ApolloQueries tree for all Apollo GQL queries
    // It runs the queries and mutates client object
    getDataFromTree(ApolloQueries)
      .then(() => {
        const ConnectedBody = () => (
            <ApolloProvider client={client}>
              {bodyComponent}
            </ApolloProvider>
        )
        // renders Connected Body to string
        resolve(replaceBodyHTMLString(renderToString(<ConnectedBody/>)))
      })
  })
}

// function to hydrate client Apollo state
exports.onRenderBody = ({ setHeadComponents }, pluginOptions) => {
  // gets initial state with "apollo" key
  const state = {"apollo": client.getInitialState()};
  // appends apollo state to the global client window object
  const ApolloState = (
      <script dangerouslySetInnerHTML={{
           __html: `window.__APOLLO_STATE__=${JSON.stringify(state).replace(/</g, '\\u003c')};`,
        }}
      />
  );
  setHeadComponents([
    ApolloState
  ])
}