index.js

import React from 'react'
import ReactDOM from 'react-dom'
import App from './containers/App'
import * as serviceWorker from './serviceWorker'

import { ApolloClient } from 'apollo-client'
import { ApolloProvider } from 'react-apollo'
import { InMemoryCache } from 'apollo-cache-inmemory'

import { split } from 'apollo-link'
import { HttpLink } from 'apollo-link-http'
import { WebSocketLink } from 'apollo-link-ws'
import { getMainDefinition } from 'apollo-utilities'

import { ApolloLink } from 'apollo-link'
import { setContext } from 'apollo-link-context'
import { onError } from 'apollo-link-error'
import { createUploadLink } from 'apollo-upload-client'

import { ApolloProvider as ApolloHooksProvider } from './hooks/useApollo'

import ApolloLinkTimeout from './utils/apolloLinkTimeout'

import BASE_API, { WS_BASE_API } from './constants/baseApi'
import AUTH_TOKEN from './constants/authToken'

const timeoutLink = new ApolloLinkTimeout(10000)

const httpLink = new HttpLink({uri: `${BASE_API}/graphql`})
const uploadLink = createUploadLink({uri: `${BASE_API}/graphql`})
const wsLink = new WebSocketLink({uri: `${WS_BASE_API}/graphql`, options: {reconnect: true}})

const logout = client => {
  localStorage.removeItem(AUTH_TOKEN)
  client.resetStore()
  window.location.href = '/login'
}

const errorLink = onError(({ graphQLErrors, networkError }) => {
  if (graphQLErrors) {
    graphQLErrors.map(({ message, locations, path }) => console.log(`[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`))
    graphQLErrors.forEach(({ message, locations, path }) => {
      if (message === 'Context creation failed: Your session expired. Sign in again.') logout(client)
      if (message === 'Not authenticated as user.') logout(client)
    })
  }
  if (networkError && networkError.statusCode === 401) {
    console.log(`[Network error]: ${networkError}`)
    logout(client)
  }
})

const authLink = setContext((_, { headers }) => {
  const token = localStorage.getItem(AUTH_TOKEN)
  return { headers: {...headers, authorization: token ? `Bearer ${token}` : ''} }
})

const splitLink = split(
  ({ query }) => {
    const { kind, operation } = getMainDefinition(query)
    return kind === 'OperationDefinition' && operation === 'subscription'
  },
  wsLink, httpLink
)

const cache = new InMemoryCache()

const defaultOptions = {}

const link = ApolloLink.from([timeoutLink, authLink, errorLink, uploadLink, splitLink])

const client = new ApolloClient({link, cache, defaultOptions})

ReactDOM.render(
  <ApolloProvider client={client}>
    <ApolloHooksProvider client={client}>
      <App logout={logout} client={client} />
    </ApolloHooksProvider>
  </ApolloProvider>,
  document.getElementById('root')
)

serviceWorker.unregister()