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
+30 -18
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 { CreateTaskRequest, UpdateTaskRequest, CreateCompletionRequest } from '@/lib/api/tasks';
// ---------------------------------------------------------------------------
@@ -10,16 +10,18 @@ import type { CreateTaskRequest, UpdateTaskRequest, CreateCompletionRequest } fr
export function useTasks() {
const { tasks } = useDataProvider();
const qk = useQueryKeyPrefix();
return useQuery({
queryKey: ['tasks'],
queryKey: qk('tasks'),
queryFn: () => tasks.list(),
});
}
export function useTasksByResidence(residenceId: number) {
const { tasks } = useDataProvider();
const qk = useQueryKeyPrefix();
return useQuery({
queryKey: ['tasks', 'by-residence', residenceId],
queryKey: qk('tasks', 'by-residence', residenceId),
queryFn: () => tasks.getByResidence(residenceId),
enabled: !!residenceId,
});
@@ -27,8 +29,9 @@ export function useTasksByResidence(residenceId: number) {
export function useTask(id: number) {
const { tasks } = useDataProvider();
const qk = useQueryKeyPrefix();
return useQuery({
queryKey: ['tasks', id],
queryKey: qk('tasks', id),
queryFn: () => tasks.get(id),
enabled: !!id,
});
@@ -36,8 +39,9 @@ export function useTask(id: number) {
export function useKanbanBoard(residenceId: number) {
const { tasks } = useDataProvider();
const qk = useQueryKeyPrefix();
return useQuery({
queryKey: ['tasks', 'kanban', residenceId],
queryKey: qk('tasks', 'kanban', residenceId),
queryFn: () => tasks.getByResidence(residenceId),
enabled: !!residenceId,
});
@@ -45,8 +49,9 @@ export function useKanbanBoard(residenceId: number) {
export function useTaskCompletions(taskId: number) {
const { tasks } = useDataProvider();
const qk = useQueryKeyPrefix();
return useQuery({
queryKey: ['tasks', taskId, 'completions'],
queryKey: qk('tasks', taskId, 'completions'),
queryFn: () => tasks.getCompletions(taskId),
enabled: !!taskId,
});
@@ -59,11 +64,12 @@ export function useTaskCompletions(taskId: number) {
export function useCreateTask() {
const queryClient = useQueryClient();
const { tasks } = useDataProvider();
const qk = useQueryKeyPrefix();
return useMutation({
mutationFn: (data: CreateTaskRequest) => tasks.create(data),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['tasks'] });
queryClient.invalidateQueries({ queryKey: ['residences'] });
queryClient.invalidateQueries({ queryKey: qk('tasks') });
queryClient.invalidateQueries({ queryKey: qk('residences') });
},
});
}
@@ -71,12 +77,13 @@ export function useCreateTask() {
export function useUpdateTask(id: number) {
const queryClient = useQueryClient();
const { tasks } = useDataProvider();
const qk = useQueryKeyPrefix();
return useMutation({
mutationFn: (data: UpdateTaskRequest) => tasks.update(id, data),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['tasks'] });
queryClient.invalidateQueries({ queryKey: ['tasks', id] });
queryClient.invalidateQueries({ queryKey: ['residences'] });
queryClient.invalidateQueries({ queryKey: qk('tasks') });
queryClient.invalidateQueries({ queryKey: qk('tasks', id) });
queryClient.invalidateQueries({ queryKey: qk('residences') });
},
});
}
@@ -84,11 +91,12 @@ export function useUpdateTask(id: number) {
export function useDeleteTask() {
const queryClient = useQueryClient();
const { tasks } = useDataProvider();
const qk = useQueryKeyPrefix();
return useMutation({
mutationFn: (id: number) => tasks.delete(id),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['tasks'] });
queryClient.invalidateQueries({ queryKey: ['residences'] });
queryClient.invalidateQueries({ queryKey: qk('tasks') });
queryClient.invalidateQueries({ queryKey: qk('residences') });
},
});
}
@@ -96,10 +104,11 @@ export function useDeleteTask() {
export function useMarkInProgress() {
const queryClient = useQueryClient();
const { tasks } = useDataProvider();
const qk = useQueryKeyPrefix();
return useMutation({
mutationFn: (id: number) => tasks.markInProgress(id),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['tasks'] });
queryClient.invalidateQueries({ queryKey: qk('tasks') });
},
});
}
@@ -107,10 +116,11 @@ export function useMarkInProgress() {
export function useCancelTask() {
const queryClient = useQueryClient();
const { tasks } = useDataProvider();
const qk = useQueryKeyPrefix();
return useMutation({
mutationFn: (id: number) => tasks.cancel(id),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['tasks'] });
queryClient.invalidateQueries({ queryKey: qk('tasks') });
},
});
}
@@ -118,10 +128,11 @@ export function useCancelTask() {
export function useArchiveTask() {
const queryClient = useQueryClient();
const { tasks } = useDataProvider();
const qk = useQueryKeyPrefix();
return useMutation({
mutationFn: (id: number) => tasks.archive(id),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['tasks'] });
queryClient.invalidateQueries({ queryKey: qk('tasks') });
},
});
}
@@ -129,6 +140,7 @@ export function useArchiveTask() {
export function useCreateCompletion() {
const queryClient = useQueryClient();
const { tasks } = useDataProvider();
const qk = useQueryKeyPrefix();
return useMutation({
mutationFn: ({
data,
@@ -151,8 +163,8 @@ export function useCreateCompletion() {
return tasks.createCompletion(data);
},
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['tasks'] });
queryClient.invalidateQueries({ queryKey: ['residences'] });
queryClient.invalidateQueries({ queryKey: qk('tasks') });
queryClient.invalidateQueries({ queryKey: qk('residences') });
},
});
}