Fix demo mode showing real user data after logout

React Query cache was shared between /app (real API) and /demo/app
(mock data) because query keys were identical. After login→logout→demo,
stale real data served from cache.

Two fixes:
1. Clear React Query cache on logout (auth store)
2. Namespace all query keys with basePath prefix so /app and /demo/app
   caches are completely isolated

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Trey t
2026-03-04 20:35:49 -06:00
parent 44993ae601
commit bd9b0ffb34
13 changed files with 263 additions and 70 deletions
+12 -7
View File
@@ -1,7 +1,7 @@
"use client";
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { useDataProvider } from '@/lib/demo/data-provider-context';
import { useDataProvider, useQueryKeyPrefix } from '@/lib/demo/data-provider-context';
import type { CreateResidenceRequest, UpdateResidenceRequest } from '@/lib/api/residences';
// ---------------------------------------------------------------------------
@@ -10,8 +10,9 @@ import type { CreateResidenceRequest, UpdateResidenceRequest } from '@/lib/api/r
export function useResidences() {
const { residences } = useDataProvider();
const qk = useQueryKeyPrefix();
return useQuery({
queryKey: ['residences'],
queryKey: qk('residences'),
queryFn: () => residences.getMyResidences(),
select: (data) => (Array.isArray(data) ? data : []),
});
@@ -19,8 +20,9 @@ export function useResidences() {
export function useResidence(id: number) {
const { residences } = useDataProvider();
const qk = useQueryKeyPrefix();
return useQuery({
queryKey: ['residences', id],
queryKey: qk('residences', id),
queryFn: () => residences.get(id),
enabled: !!id,
});
@@ -33,11 +35,12 @@ export function useResidence(id: number) {
export function useCreateResidence() {
const queryClient = useQueryClient();
const { residences } = useDataProvider();
const qk = useQueryKeyPrefix();
return useMutation({
mutationFn: (data: CreateResidenceRequest) =>
residences.create(data),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['residences'] });
queryClient.invalidateQueries({ queryKey: qk('residences') });
},
});
}
@@ -45,12 +48,13 @@ export function useCreateResidence() {
export function useUpdateResidence(id: number) {
const queryClient = useQueryClient();
const { residences } = useDataProvider();
const qk = useQueryKeyPrefix();
return useMutation({
mutationFn: (data: UpdateResidenceRequest) =>
residences.update(id, data),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['residences'] });
queryClient.invalidateQueries({ queryKey: ['residences', id] });
queryClient.invalidateQueries({ queryKey: qk('residences') });
queryClient.invalidateQueries({ queryKey: qk('residences', id) });
},
});
}
@@ -58,10 +62,11 @@ export function useUpdateResidence(id: number) {
export function useDeleteResidence() {
const queryClient = useQueryClient();
const { residences } = useDataProvider();
const qk = useQueryKeyPrefix();
return useMutation({
mutationFn: (id: number) => residences.delete(id),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['residences'] });
queryClient.invalidateQueries({ queryKey: qk('residences') });
},
});
}