webpack-bootstrap-ui-kit/src/js/ajax/apollo/init.js

import Events from '../../_events'

import { cache } from './cache'
import {
  from,
  ApolloClient,
  HttpLink,
  ApolloLink,
  concat,
} from '@apollo/client'

import { onError } from '@apollo/client/link/error'
const NAME = 'appolo'

const API_META = document.querySelector('meta[name="api_url"]')
const API_URL = API_META
  ? API_META.getAttribute('content')
  : `${window.location.protocol}//${window.location.host}/graphql`

const authMiddleware = new ApolloLink((operation, forward) => {
  // add the authorization to the headers
  operation.setContext({
    headers: {
      apikey: `${GRAPHQL_API_KEY}`,
    },
  })

  return forward(operation)
})

console.info(`%cAPI: ${API_URL}`, 'color:green;font-size:10px')

const link = from([
  authMiddleware,
  new ApolloLink((operation, forward) => {
    operation.setContext({
      start: new Date(),
    })
    return forward(operation)
  }),
  onError(({ operation, response, graphQLErrors, networkError, forward }) => {
    if (operation.operationName === 'IgnoreErrorsQuery') {
      console.error(`${NAME}: IgnoreErrorsQuery`)
      response.errors = null
      return
    }

    if (graphQLErrors) {
      graphQLErrors.forEach(({ message, locations, path }) =>
        console.error(
          `${NAME}: [GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`
        )
      )
    }

    if (networkError) {
      /* let msg = '';
                                    switch (networkError.statusCode) {
                                      case 404:
                                        msg = 'Not Found.';
                                        break;
                                      case 500:
                                        msg = 'Server issue, please try again latter.';
                                        break;
                                      default:
                                        msg = 'Something went wrong.';
                                        break;
                                    } */
      console.error(`${NAME}: [Network error] ${networkError.statusCode}`)
    }

    console.error(`${NAME}: [APOLLO_ERROR]`)
    window.dispatchEvent(new Event(Events.APOLLO_ERROR))
  }),
  new ApolloLink((operation, forward) => {
    return forward(operation).map((data) => {
      // data from a previous link
      const time = new Date() - operation.getContext().start
      console.log(
        `${NAME}: operation ${operation.operationName} took ${time} ms to complete`
      )

      window.dispatchEvent(new Event(Events.ONLINE))
      return data
    })
  }),
  new HttpLink({
    uri: API_URL,

    // Use explicit `window.fetch` so tha outgoing requests
    // are captured and deferred until the Service Worker is ready.
    fetch: (...args) => fetch(...args),
    credentials: 'same-origin', // 'include',
    connectToDevTools: process.env.NODE_ENV === 'development',
  }),
])

// Isolate Apollo client so it could be reused
// in both application runtime and tests.

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

export { client }