60 lines
1.7 KiB
TypeScript
60 lines
1.7 KiB
TypeScript
|
import { IncomingMessage, ServerResponse } from 'http'
|
||
|
|
import { useMemo } from 'react'
|
||
|
|
import {
|
||
|
|
ApolloClient,
|
||
|
|
InMemoryCache,
|
||
|
|
NormalizedCacheObject,
|
||
|
|
} from '@apollo/client'
|
||
|
|
|
||
|
|
let apolloClient: ApolloClient<NormalizedCacheObject> | 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
|
||
|
|
}
|