Added new queryKeys pattern for cache tagging

niemyjski · niemyjski · commit 75928f50506d · 2024-02-20T08:04:27.000-06:00
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/api/eventsApi.ts b/src/Exceptionless.Web/ClientApp/src/lib/api/eventsApi.ts
@@ -1,16 +1,22 @@
-import { createQuery } from '@tanstack/svelte-query';
+import { createQuery, useQueryClient } from '@tanstack/svelte-query';
 import type { PersistentEvent } from '$lib/models/api';
 import { FetchClient, type ProblemDetails } from '$api/FetchClient';
 import { derived, readable, type Readable } from 'svelte/store';
 
-export const queryKey: string = 'PersistentEvent';
+export const queryKeys = {
+    all: ['PersistentEvent'] as const,
+    allWithFilters: (filters: string) => [...queryKeys.all, { filters }] as const,
+    stacks: (id: string | null) => [...queryKeys.all, 'stacks', id] as const,
+    stackWithFilters: (id: string | null, filters: string) => [...queryKeys.stacks(id), { filters }] as const,
+    id: (id: string | null) => [...queryKeys.all, id] as const
+};
 
 export function getEventByIdQuery(id: string | Readable<string | null>) {
     const readableId = typeof id === 'string' || id === null ? readable(id) : id;
     return createQuery<PersistentEvent, ProblemDetails>(
         derived(readableId, ($id) => ({
             enabled: !!$id,
-            queryKey: [queryKey, $id],
+            queryKey: queryKeys.id($id),
             queryFn: async ({ signal }: { signal: AbortSignal }) => {
                 const { getJSON } = new FetchClient();
                 const response = await getJSON<PersistentEvent>(`events/${$id}`, {
@@ -28,21 +34,27 @@ export function getEventByIdQuery(id: string | Readable<string | null>) {
 }
 
 export function getEventsByStackIdQuery(stackId: string | Readable<string | null>, limit: number = 10) {
+    const queryClient = useQueryClient();
     const readableStackId = typeof stackId === 'string' || stackId === null ? readable(stackId) : stackId;
-    return createQuery<PersistentEvent, ProblemDetails>(
+    return createQuery<PersistentEvent[], ProblemDetails>(
         derived(readableStackId, ($id) => ({
             enabled: !!$id,
-            queryKey: [queryKey, 'stack', $id],
+            queryClient,
+            queryKey: queryKeys.stacks($id),
             queryFn: async ({ signal }: { signal: AbortSignal }) => {
                 const { getJSON } = new FetchClient();
-                const response = await getJSON<PersistentEvent>(`stacks/${$id}/events`, {
+                const response = await getJSON<PersistentEvent[]>(`stacks/${$id}/events`, {
                     signal,
                     params: {
                         limit
                     }
                 });
 
                 if (response.ok) {
+                    response.data?.forEach((event) => {
+                        queryClient.setQueryData(queryKeys.id(event.id!), event);
+                    });
+
                     return response.data!;
                 }
 
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/api/projectsApi.ts b/src/Exceptionless.Web/ClientApp/src/lib/api/projectsApi.ts
@@ -3,14 +3,18 @@ import { derived, readable, type Readable } from 'svelte/store';
 import type { ViewProject } from '$lib/models/api';
 import { FetchClient, type FetchClientResponse, type ProblemDetails } from '$api/FetchClient';
 
-export const queryKey: string = 'Project';
+export const queryKeys = {
+    all: ['Project'] as const,
+    allWithFilters: (filters: string) => [...queryKeys.all, { filters }] as const,
+    id: (id: string | null) => [...queryKeys.all, id] as const
+};
 
 export function getProjectByIdQuery(id: string | Readable<string | null>) {
     const readableId = typeof id === 'string' || id === null ? readable(id) : id;
     return createQuery<ViewProject, ProblemDetails>(
         derived(readableId, ($id) => ({
             enabled: !!$id,
-            queryKey: [queryKey, $id],
+            queryKey: queryKeys.id($id),
             queryFn: async ({ signal }: { signal: AbortSignal }) => {
                 const { getJSON } = new FetchClient();
                 const response = await getJSON<ViewProject>(`projects/${$id}`, {
@@ -30,7 +34,7 @@ export function getProjectByIdQuery(id: string | Readable<string | null>) {
 export function mutatePromoteTab(id: string) {
     const client = useQueryClient();
     return createMutation<FetchClientResponse<unknown>, ProblemDetails, { name: string }>({
-        mutationKey: [queryKey, id],
+        mutationKey: queryKeys.id(id),
         mutationFn: async ({ name }) => {
             const { post } = new FetchClient();
             const response = await post(`projects/${id}/promotedtabs`, undefined, {
@@ -44,15 +48,15 @@ export function mutatePromoteTab(id: string) {
             throw response.problem;
         },
         onSettled: () => {
-            client.invalidateQueries({ queryKey: [queryKey, id] });
+            client.invalidateQueries({ queryKey: queryKeys.id(id) });
         }
     });
 }
 
 export function mutateDemoteTab(id: string) {
     const client = useQueryClient();
     return createMutation<FetchClientResponse<unknown>, ProblemDetails, { name: string }>({
-        mutationKey: [queryKey, id],
+        mutationKey: queryKeys.id(id),
         mutationFn: async ({ name }) => {
             const { remove } = new FetchClient();
             const response = await remove(`projects/${id}/promotedtabs`, {
@@ -66,7 +70,7 @@ export function mutateDemoteTab(id: string) {
             throw response.problem;
         },
         onSettled: () => {
-            client.invalidateQueries({ queryKey: [queryKey, id] });
+            client.invalidateQueries({ queryKey: queryKeys.id(id) });
         }
     });
 }
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/api/stacksApi.ts b/src/Exceptionless.Web/ClientApp/src/lib/api/stacksApi.ts
@@ -1,16 +1,39 @@
-import { createQuery } from '@tanstack/svelte-query';
+import { createQuery, useQueryClient } from '@tanstack/svelte-query';
 import type { Stack } from '$lib/models/api';
 import { FetchClient, type ProblemDetails } from '$api/FetchClient';
 import { derived, readable, type Readable } from 'svelte/store';
 
-export const queryKey: string = 'Stack';
+export const queryKeys = {
+    all: ['Stack'] as const,
+    allWithFilters: (filters: string) => [...queryKeys.all, { filters }] as const,
+    id: (id: string | null) => [...queryKeys.all, id] as const
+};
+
+export async function prefetchStack(id: string) {
+    const queryClient = useQueryClient();
+    await queryClient.prefetchQuery<Stack, ProblemDetails>({
+        queryKey: queryKeys.id(id),
+        queryFn: async ({ signal }: { signal: AbortSignal }) => {
+            const { getJSON } = new FetchClient();
+            const response = await getJSON<Stack>(`stacks/${id}`, {
+                signal
+            });
+
+            if (response.ok) {
+                return response.data!;
+            }
+
+            throw response.problem;
+        }
+    });
+}
 
 export function getStackByIdQuery(id: string | Readable<string | null>) {
     const readableId = typeof id === 'string' || id === null ? readable(id) : id;
     return createQuery<Stack, ProblemDetails>(
         derived(readableId, ($id) => ({
             enabled: !!$id,
-            queryKey: [queryKey, $id],
+            queryKey: queryKeys.id($id),
             queryFn: async ({ signal }: { signal: AbortSignal }) => {
                 const { getJSON } = new FetchClient();
                 const response = await getJSON<Stack>(`stacks/${$id}`, {
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/api/usersApi.ts b/src/Exceptionless.Web/ClientApp/src/lib/api/usersApi.ts
@@ -1,24 +1,31 @@
 import { derived } from 'svelte/store';
-import { createQuery } from '@tanstack/svelte-query';
+import { createQuery, useQueryClient } from '@tanstack/svelte-query';
 
 import { FetchClient, type ProblemDetails } from '$api/FetchClient';
 import type { User } from '$lib/models/api';
 import { accessToken } from '$api/auth';
 
-export const queryKey: string = 'User';
+export const queryKeys = {
+    all: ['User'] as const,
+    id: (id: string | null) => [...queryKeys.all, id] as const,
+    me: () => [...queryKeys.all, 'me'] as const
+};
 
 export function getMeQuery() {
+    const queryClient = useQueryClient();
     return createQuery<User, ProblemDetails>(
         derived(accessToken, ($accessToken) => ({
             enabled: !!$accessToken,
-            queryKey: [queryKey],
+            queryClient,
+            queryKey: queryKeys.me(),
             queryFn: async ({ signal }: { signal: AbortSignal }) => {
                 const { getJSON } = new FetchClient();
                 const response = await getJSON<User>('users/me', {
                     signal
                 });
 
                 if (response.ok) {
+                    queryClient.setQueryData(queryKeys.id(response.data!.id!), response.data);
                     return response.data!;
                 }
 
