Refetch queries when the token changes

Joystream · Nov 23, 2023 · ad4409d · ad4409d
1 parent d1b290a
commit ad4409d
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 6 deletions.
diff --git a/packages/ui/src/app/pages/Settings/SettingsNotificationsTab.tsx b/packages/ui/src/app/pages/Settings/SettingsNotificationsTab.tsx
@@ -48,7 +48,7 @@ export const SettingsNotificationsTab: FC = () => {
     activeMemberExistBackendLoading,
     activeMemberExistBackendRefetch,
     backendClient,
-    activeMemberSettings,
+    authToken,
     setMemberSettings,
   } = useNotificationSettings()
   const { showModal } = useModal()
@@ -79,13 +79,12 @@ export const SettingsNotificationsTab: FC = () => {
         receiveEmailNotifications: data.me?.receiveEmails ?? true,
       })
     },
-    skip: !activeMemberSettings?.accessToken,
+    skip: !authToken,
   })
 
   const isRegistered = activeMemberExistBackendData?.memberExist ?? false
 
-  const isUnauthorized =
-    (!!activeMember && !activeMemberSettings?.accessToken) || meError?.message.includes('Unauthorized')
+  const isUnauthorized = (!!activeMember && !authToken) || meError?.message.includes('Unauthorized')
 
   const [sendUpdateMemberMutation, { error: mutationError }] = useUpdateBackendMemberMutation({
     client: backendClient,

diff --git a/packages/ui/src/app/providers/backend/context.ts b/packages/ui/src/app/providers/backend/context.ts
@@ -12,6 +12,7 @@ export type BackendContextValue = {
   backendClient?: ApolloClient<any>
   notificationsSettingsMap?: MemberNotificationsRecord
   setMemberSettings: (memberId: string, settings: Partial<MemberNotificationSettingsData>) => void
+  authToken?: string
 }
 
 export const BackendContext = createContext<BackendContextValue>({ setMemberSettings: () => null })
diff --git a/packages/ui/src/app/providers/backend/provider.tsx b/packages/ui/src/app/providers/backend/provider.tsx
@@ -1,4 +1,4 @@
-import { ApolloClient, ApolloLink, HttpLink, InMemoryCache, makeVar } from '@apollo/client'
+import { ApolloClient, ApolloLink, HttpLink, InMemoryCache, makeVar, useReactiveVar } from '@apollo/client'
 import React, { ReactNode, useCallback, useEffect, useState } from 'react'
 
 import { useLocalStorage } from '@/common/hooks/useLocalStorage'
@@ -48,6 +48,13 @@ export const BackendProvider = (props: { children: ReactNode }) => {
     backendAuthTokenVar(activeMemberSettings.accessToken)
   }, [backendClient, activeMemberSettings?.accessToken])
 
+  const authToken = useReactiveVar(backendAuthTokenVar)
+
+  // Refetch backend queries after Apollo client auth token changes (warning: the changes are async).
+  useEffect(() => {
+    backendClient?.refetchQueries({ include: 'active' })
+  }, [authToken])
+
   const setMemberSettings = useCallback(
     (memberId: string, settings: Partial<MemberNotificationSettingsData>) => {
       setNotificationsSettingsMap((prev) => ({
@@ -71,6 +78,7 @@ export const BackendProvider = (props: { children: ReactNode }) => {
         backendClient,
         notificationsSettingsMap,
         setMemberSettings,
+        authToken: authToken ?? undefined,
       }}
       {...props}
     />

diff --git a/packages/ui/src/memberships/hooks/useNotificationSettings.ts b/packages/ui/src/memberships/hooks/useNotificationSettings.ts
@@ -10,7 +10,7 @@ export const useNotificationSettings = () => {
   const { active: activeMember } = useMyMemberships()
   const backendContext = useContext(BackendContext)
   if (!backendContext) throw new Error('Missing backend context')
-  const { backendClient, notificationsSettingsMap, setMemberSettings } = backendContext
+  const { backendClient, notificationsSettingsMap, setMemberSettings, authToken } = backendContext
   const memberExistsQueryEnabled = !!backendClient && !!activeMember?.id
   const { data, error, loading, refetch } = useGetBackendMemberExistsQuery({
     client: backendClient,
@@ -28,5 +28,6 @@ export const useNotificationSettings = () => {
     activeMemberExistBackendRefetch: refetch,
     setMemberSettings,
     backendClient,
+    authToken,
   }
 }