diff --git a/web/src/components/UpdateAccountDialog.tsx b/web/src/components/UpdateAccountDialog.tsx index b74665e31..6013b1b53 100644 --- a/web/src/components/UpdateAccountDialog.tsx +++ b/web/src/components/UpdateAccountDialog.tsx @@ -7,6 +7,7 @@ import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from " import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; import { Textarea } from "@/components/ui/textarea"; +import { useAuth } from "@/contexts/AuthContext"; import { useInstance } from "@/contexts/InstanceContext"; import { convertFileToBase64 } from "@/helpers/utils"; import useCurrentUser from "@/hooks/useCurrentUser"; @@ -32,6 +33,7 @@ interface State { function UpdateAccountDialog({ open, onOpenChange, onSuccess }: Props) { const t = useTranslate(); const currentUser = useCurrentUser(); + const { setCurrentUser } = useAuth(); const { generalSetting: instanceGeneralSetting } = useInstance(); const { mutateAsync: updateUser } = useUpdateUser(); const [state, setState] = useState({ @@ -128,7 +130,7 @@ function UpdateAccountDialog({ open, onOpenChange, onSuccess }: Props) { if (!isEqual(currentUser?.description, state.description)) { updateMask.push("description"); } - await updateUser({ + const updatedUser = await updateUser({ user: { name: currentUser?.name, username: state.username, @@ -139,6 +141,7 @@ function UpdateAccountDialog({ open, onOpenChange, onSuccess }: Props) { }, updateMask, }); + setCurrentUser(updatedUser); toast.success(t("message.update-succeed")); onSuccess?.(); onOpenChange(false); diff --git a/web/src/contexts/AuthContext.tsx b/web/src/contexts/AuthContext.tsx index 943b4a207..f902e8dff 100644 --- a/web/src/contexts/AuthContext.tsx +++ b/web/src/contexts/AuthContext.tsx @@ -19,6 +19,7 @@ interface AuthContextValue extends AuthState { initialize: () => Promise; logout: () => Promise; refetchSettings: () => Promise; + setCurrentUser: (user: User | undefined) => void; } const AuthContext = createContext(null); @@ -154,6 +155,24 @@ export function AuthProvider({ children }: { children: ReactNode }) { }); }, [fetchUserSettings]); + // Sync the updated user to AuthContext and React Query cache after profile changes + const setCurrentUser = useCallback( + (user: User | undefined) => { + const previousUser = queryClient.getQueryData(userKeys.currentUser()); + setState((prev) => ({ ...prev, currentUser: user })); + if (user) { + queryClient.setQueryData(userKeys.currentUser(), user); + queryClient.setQueryData(userKeys.detail(user.name), user); + } else { + queryClient.removeQueries({ queryKey: userKeys.currentUser(), exact: true }); + if (previousUser?.name) { + queryClient.removeQueries({ queryKey: userKeys.detail(previousUser.name), exact: true }); + } + } + }, + [queryClient], + ); + // Memoize context value to prevent unnecessary re-renders of consumers const value = useMemo( () => ({ @@ -161,8 +180,9 @@ export function AuthProvider({ children }: { children: ReactNode }) { initialize, logout, refetchSettings, + setCurrentUser, }), - [state, initialize, logout, refetchSettings], + [state, initialize, logout, refetchSettings, setCurrentUser], ); return {children};