import { IncomingMessage, ServerResponse } from 'http' import { useMemo } from 'react' import { ApolloClient, InMemoryCache, NormalizedCacheObject, } from '@apollo/client' let apolloClient: ApolloClient | undefined export type ResolverContext = { req?: IncomingMessage res?: ServerResponse } function createIsomorphLink(_: ResolverContext = {}) { if (typeof window === 'undefined') { } else { const { HttpLink } = require('@apollo/client') return new HttpLink({ uri: 'http://127.0.0.1:3001/', credentials: 'same-origin', }) } } function createApolloClient(context?: ResolverContext) { return new ApolloClient({ ssrMode: typeof window === 'undefined', link: createIsomorphLink(context), cache: new InMemoryCache(), }) } export function initializeApollo( initialState: any = null, // Pages with Next.js data fetching methods, like `getStaticProps`, can send // a custom context which will be used by `SchemaLink` to server render pages context?: ResolverContext ) { const _apolloClient = apolloClient ?? createApolloClient(context) // If your page has Next.js data fetching methods that use Apollo Client, the initial state // get hydrated here if (initialState) { _apolloClient.cache.restore(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: any) { const store = useMemo(() => initializeApollo(initialState), [initialState]) return store }