Files
twenty/front/src/modules/apollo/hooks/useApolloFactory.ts
T

66 lines
1.9 KiB
TypeScript

import { useMemo, useRef } from 'react';
import { InMemoryCache, NormalizedCacheObject } from '@apollo/client';
import { useRecoilState } from 'recoil';
import { tokenPairState } from '@/auth/states/tokenPairState';
import { isDebugModeState } from '@/client-config/states/isDebugModeState';
import { CommentThreadTarget } from '~/generated/graphql';
import { useUpdateEffect } from '~/hooks/useUpdateEffect';
import { ApolloFactory } from '../services/apollo.factory';
export function useApolloFactory() {
const apolloRef = useRef<ApolloFactory<NormalizedCacheObject> | null>(null);
const [isDebugMode] = useRecoilState(isDebugModeState);
const [tokenPair, setTokenPair] = useRecoilState(tokenPairState);
const apolloClient = useMemo(() => {
apolloRef.current = new ApolloFactory({
uri: `${process.env.REACT_APP_API_URL}`,
cache: new InMemoryCache({
typePolicies: {
CommentThread: {
fields: {
commentThreadTargets: {
merge(
_existing: CommentThreadTarget[] = [],
incoming: CommentThreadTarget[],
) {
return [...incoming];
},
},
},
},
},
}),
defaultOptions: {
query: {
fetchPolicy: 'cache-first',
},
},
// We don't want to re-create the client on token change or it will cause infinite loop
initialTokenPair: tokenPair,
onTokenPairChange(tokenPair) {
setTokenPair(tokenPair);
},
onUnauthenticatedError() {
setTokenPair(null);
},
extraLinks: [],
isDebugMode,
});
return apolloRef.current.getClient();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [setTokenPair, isDebugMode]);
useUpdateEffect(() => {
if (apolloRef.current) {
apolloRef.current.updateTokenPair(tokenPair);
}
}, [tokenPair]);
return apolloClient;
}