apolloClientFactory.js

import ApolloClient from 'apollo-client';
import { HttpLink } from 'apollo-link-http';
import { concat } from 'apollo-link';
import { GRAPHQL_API_URL } from 'config/consts';
import { InMemoryCache } from 'apollo-boost';
import authMiddleware from './apollo/authMiddleware';
import errorMiddleware from './apollo/errorMiddleware';

const defaultOptions = {
  watchQuery: {
    fetchPolicy: 'no-cache',
    errorPolicy: 'ignore',
  },
  query: {
    fetchPolicy: 'no-cache',
    errorPolicy: 'all',
  },
};

const httpLink = new HttpLink({ uri: GRAPHQL_API_URL });

const setUpApolloClient = (fetch = false) => {
  return new ApolloClient({
    link: errorMiddleware.concat(concat(authMiddleware, httpLink)),
    cache: new InMemoryCache(),
    defaultOptions: defaultOptions,
    ...(fetch ? { fetch } : {}),
  });
};

export default setUpApolloClient;

authMiddleware.js

import { ApolloLink } from 'apollo-link';
import { getToken } from 'utils/localStorage';

const authMiddleware = new ApolloLink((operation, forward) => {
  if (getToken()) {
    operation.setContext({
      headers: {
        Authorization: `Bearer ${getToken()}`,
      },
    });
  }
  return forward(operation);
});

export default authMiddleware;

errorMiddleware.js

import { onError } from 'apollo-link-error';
import { clearUserDetails } from 'utils/localStorage';
import { ROUTES } from 'config/consts';
import { showErrorToast } from 'utils/toast';

const errorMiddleware = onError(({ networkError, graphQLErrors }) => {
  if (
    networkError &&
    networkError.statusCode === 401 &&
    networkError.result.returnStatus === 'TOKEN_EXPIRED'
  ) {
    clearUserDetails();
    window.location.href = `${ROUTES.LOGIN}?expired_session=true`;
    return;
  }

  if (graphQLErrors) {
    showErrorToast({
      title: 'Ops! An Error occured',
      body: graphQLErrors.reduce(
        (allMsg, error) => (allMsg += error.message),
        ''
      ),
      emoji: '😢',
    });
    return;
  }

  showErrorToast({
    title: 'No Internet Connection',
    body: 'Please check your internet connectivity and try again!',
    emoji: '🔌',
  });
});

export default errorMiddleware;