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:
+30
-18
@@ -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') });
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user