Apollo Client Example

apolloClient.tsx

import React, { useMemo } from "react"
import { ApolloClient, InMemoryCache, from } from "@apollo/client"
import { setContext } from "@apollo/client/link/context"
import { createUploadLink } from "apollo-upload-client"
import { onError } from "@apollo/client/link/error"

let apolloClient

const uri = ({ operationName }) => {
  if (operationName.includes(`Sanity`)) {
    return process.env.NEXT_PUBLIC_SANITY_GRAPHQL_ENDPOINT
  }
  return process.env.NEXT_PUBLIC_GRAPHQL_ENDPOINT
}

function createIsomorphLink() {
  // if (typeof window === "undefined") {
  //   const { SchemaLink } = require("@apollo/client/link/schema")
  //   const { schema } = require("./schema")
  //   return new SchemaLink({ schema })
  // } else {
  return createUploadLink({
    uri,
    credentials: "same-origin"
    // fetch: customFetch
  })
  // }
}

const errorLinkFn = (errorContext) =>
  onError(({ response, graphQLErrors, networkError }) => {
    if (graphQLErrors) {
      graphQLErrors.forEach(({ message, locations, path }) => {
        const formattedMessage = message.replace(/\[.*?\]/g, "").trim()
        errorContext.handleErrors({
          id: `${Math.random() * 10000}`,
          errorType: `GraphQL`,
          message: `${formattedMessage}`
        })
      })
    }

    if (networkError) {
      errorContext.handleErrors({
        id: `${Math.random() * 10000}`,
        errorType: `Network`,
        message: `${networkError}`
      })
    }
    if (response && response.errors) {
      response.errors = undefined
    }
  })

const authorizeLink = (auth) =>
  setContext(async ({ operationName }, previousContext) => {
    if (operationName.includes(`Sanity`)) {
      return {
        headers: previousContext.headers
      }
    }
    const token = await auth.getAccessToken()
    // console.log("token", token)
    return {
      headers: {
        ...previousContext.headers,
        authorization: token ? `Bearer ${token}` : ""
      }
    }
  })

const httpLink = createIsomorphLink()

function createApolloClient({ errorContext, auth, ...p }) {
  console.log("creating apollo client")
  const errorLink = errorLinkFn(errorContext)
  const authLink = authorizeLink(auth)
  return new ApolloClient({
    ssrMode: typeof window === "undefined",
    link: from([authLink, errorLink, httpLink]),
    cache: new InMemoryCache({
      typePolicies: {
        Query: {
          fields: {
            deal: (_, { args, toReference }) => {
              return toReference({
                __typename: "Deal",
                id: args.id
              })
            }
          }
        }
      }
    })
  })
}

export function initializeApollo(
  initialState = null,
  { errorContext = null, auth = null } = {}
) {
  const _apolloClient =
    apolloClient ?? createApolloClient({ errorContext, auth })

  // If your page has Next.js data fetching methods that use Apollo Client, the initial state
  // gets hydrated here
  if (initialState) {
    // Get existing cache, loaded during client side data fetching
    const existingCache = _apolloClient.extract()
    // Restore the cache using the data passed from getStaticProps/getServerSideProps
    // combined with the existing cached data
    _apolloClient.cache.restore({ ...existingCache, ...initialState })
  }
  // For SSG and SSR always create a new Apollo Client
  if (typeof window === "undefined") return _apolloClient
  // Create the Apollo Client once in the client
  if (!apolloClient) {
    apolloClient = _apolloClient
  }

  return _apolloClient
}

export function useApollo(initialState, { errorContext, auth }) {
  const store = useMemo(
    () => initializeApollo(initialState, { errorContext, auth }),
    [initialState]
  )
  return store
}