Gatsby + Apollo Browser API

gatsby-browser.js

import React from 'react'
import { Router } from 'react-router-dom'
import ApolloClient, { createNetworkInterface } from 'apollo-client'
import { ApolloProvider } from 'react-apollo'
import { SubscriptionClient, addGraphQLSubscriptions } from 'subscriptions-transport-ws'

const networkInterface = createNetworkInterface({
  // endpoint comes from .env.development/production
  uri: process.env.GRAPHCOOL_API
})

const wsClient = new SubscriptionClient(process.env.GRAPHCOOL_SUBSCRIPTION, {
  reconnect: true
})

const networkInterfaceWithSubscriptions = addGraphQLSubscriptions(networkInterface, wsClient);

exports.replaceRouterComponent = ({ history }) => {

  const client = new ApolloClient({
    networkInterface: networkInterfaceWithSubscriptions,
    dataIdFromObject: o => o.id,
    initialState: window.__APOLLO_STATE__,
  })

  const ConnectedRouterWrapper = ({ children  }) => (
      <ApolloProvider client={client}>
        <Router history={history}>{children}</Router>
      </ApolloProvider>
  )

  return ConnectedRouterWrapper

}