fix(graphql): use react.cache() to prevent apollo client memory leak

Author: clintonlunn

src/js/auth/initializeUserInDb.ts

@@ -1,7 +1,8 @@
-import { getClient } from '../graphql/ServerClient'
+import { getGlobalClient } from '../graphql/ServerClient'
 import { MUTATION_UPDATE_PROFILE, QUERY_GET_USERNAME_BY_UUID } from '../graphql/gql/users'
 import { updateUser } from './ManagementClient'
 import { Username } from '../types'
+
 export interface UpdateUsernameInput {
   userUuid: string
   username: string
@@ -14,18 +15,17 @@ interface InitializeUserInDBParams extends UpdateUsernameInput {
   auth0UserId: string
 }
 
-const serverClient = getClient()
-
 /**
  * Look up in our db (not Auth0) to see whether a user by uuid exists.  If it doesn't then insert a new user profile.
  */
 export const initializeUserInDB = async (params: InitializeUserInDBParams): Promise<boolean> => {
   const { auth0UserId, accessToken, userUuid, username, email, avatar } = params
-  const existed = await doesUserByUuidExist(userUuid)
+  const client = getGlobalClient()
+  const existed = await doesUserByUuidExist(client, userUuid)
   if (existed != null) {
     return false
   }
-  const res = await serverClient.mutate<{ updateUserProfile?: boolean }, UpdateUsernameInput>({
+  const res = await client.mutate<{ updateUserProfile?: boolean }, UpdateUsernameInput>({
     mutation: MUTATION_UPDATE_PROFILE,
     variables: {
       userUuid,
@@ -52,8 +52,8 @@ export const initializeUserInDB = async (params: InitializeUserInDBParams): Prom
   return success
 }
 
-const doesUserByUuidExist = async (userUuid: string): Promise<Username | null> => {
-  const res = await serverClient.query<{ getUsername?: Username }, { userUuid: string }>({
+const doesUserByUuidExist = async (client: ReturnType<typeof getGlobalClient>, userUuid: string): Promise<Username | null> => {
+  const res = await client.query<{ getUsername?: Username }, { userUuid: string }>({
     query: QUERY_GET_USERNAME_BY_UUID,
     variables: {
       userUuid

src/js/graphql/ServerClient.ts

@@ -1,5 +1,5 @@
-import { ApolloClient, HttpLink, InMemoryCache, from } from '@apollo/client'
-import { registerApolloClient } from '@apollo/experimental-nextjs-app-support'
+import { ApolloClient, HttpLink, InMemoryCache, ApolloLink } from '@apollo/client'
+import { cache } from 'react'
 import { dynamicTagsLink } from './dynamicTagsLink'
 
 const uri: string = process.env.OPENBETA_API_SERVER ?? ''
@@ -12,14 +12,31 @@ console.log('###################################################################
 console.log(' API Server', uri)
 console.log('#######################################################################')
 
-const httpLink = new HttpLink({ uri })
+const httpLink = new HttpLink({
+  uri,
+  fetchOptions: {
+    signal: AbortSignal.timeout(30000) // 30 second timeout
+  }
+})
 
-/**
- * Apollo client to be used in React Server Components.
- */
-export const { getClient } = registerApolloClient(() => {
+const makeClient = (): ApolloClient<any> => {
   return new ApolloClient({
     cache: new InMemoryCache(),
-    link: from([dynamicTagsLink, httpLink])
+    link: ApolloLink.from([dynamicTagsLink, httpLink]),
+    ssrMode: true
   })
-})
+}
+
+/**
+ * Apollo client for React Server Components.
+ * Uses React.cache() to share one client instance per request.
+ */
+export const getClient = cache(makeClient)
+
+/**
+ * Apollo client for non-RSC contexts (API routes, auth callbacks).
+ * Creates a fresh client per call.
+ */
+export function getGlobalClient (): ApolloClient<any> {
+  return makeClient()
+}