diff --git a/packages/ui/src/app/pages/Settings/SettingsNotificationsTab.tsx b/packages/ui/src/app/pages/Settings/SettingsNotificationsTab.tsx index 1786413f8b..38159dc2f0 100644 --- 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 index d75bce285b..cd383a4c09 100644 --- 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 notificationsSettingsMap?: MemberNotificationsRecord setMemberSettings: (memberId: string, settings: Partial) => void + authToken?: string } export const BackendContext = createContext({ setMemberSettings: () => null }) diff --git a/packages/ui/src/app/providers/backend/provider.tsx b/packages/ui/src/app/providers/backend/provider.tsx index c719c58985..63b2de21a9 100644 --- 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) => { 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 index 4b5b3aef07..4c2195372e 100644 --- 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, } }