Improved ws query invalidation

Author: niemyjski

src/Exceptionless.Web/ClientApp/src/lib/features/events/api.svelte.ts

@@ -1,9 +1,26 @@
+import type { WebSocketMessageValue } from '$features/websockets/models';
+
 import { accessToken } from '$features/auth/index.svelte';
 import { type ProblemDetails, useFetchClient } from '@exceptionless/fetchclient';
-import { createQuery, useQueryClient } from '@tanstack/svelte-query';
+import { createQuery, QueryClient, useQueryClient } from '@tanstack/svelte-query';
 
 import type { PersistentEvent } from './models';
 
+export async function invalidatePersistentEventQueries(queryClient: QueryClient, message: WebSocketMessageValue<'PersistentEventChanged'>) {
+    const { id, stack_id } = message;
+    if (id) {
+        await queryClient.invalidateQueries({ queryKey: queryKeys.id(id) });
+    }
+
+    if (stack_id) {
+        await queryClient.invalidateQueries({ queryKey: queryKeys.stacks(stack_id) });
+    }
+
+    if (!id && !stack_id) {
+        await queryClient.invalidateQueries({ queryKey: queryKeys.all });
+    }
+}
+
 export const queryKeys = {
     all: ['PersistentEvent'] as const,
     allWithFilters: (filters: string) => [...queryKeys.all, { filters }] as const,

src/Exceptionless.Web/ClientApp/src/lib/features/organizations/api.svelte.ts

@@ -1,9 +1,21 @@
+import type { WebSocketMessageValue } from '$features/websockets/models';
+import type { QueryClient } from '@tanstack/svelte-query';
+
 import { accessToken } from '$features/auth/index.svelte';
 import { type ProblemDetails, useFetchClient } from '@exceptionless/fetchclient';
 import { createQuery, useQueryClient } from '@tanstack/svelte-query';
 
 import type { ViewOrganization } from './models';
 
+export async function invalidateOrganizationQueries(queryClient: QueryClient, message: WebSocketMessageValue<'OrganizationChanged'>) {
+    const { id } = message;
+    if (id) {
+        await queryClient.invalidateQueries({ queryKey: queryKeys.id(id) });
+    } else {
+        await queryClient.invalidateQueries({ queryKey: queryKeys.all });
+    }
+}
+
 export const queryKeys = {
     all: ['Organization'] as const,
     allWithMode: (mode: 'stats' | undefined) => [...queryKeys.all, { mode }] as const,

src/Exceptionless.Web/ClientApp/src/lib/features/projects/api.svelte.ts

@@ -1,9 +1,26 @@
+import type { WebSocketMessageValue } from '$features/websockets/models';
+
 import { accessToken } from '$features/auth/index.svelte';
 import { type ProblemDetails, useFetchClient } from '@exceptionless/fetchclient';
-import { createMutation, createQuery, useQueryClient } from '@tanstack/svelte-query';
+import { createMutation, createQuery, QueryClient, useQueryClient } from '@tanstack/svelte-query';
 
 import type { ViewProject } from './models';
 
+export async function invalidateProjectQueries(queryClient: QueryClient, message: WebSocketMessageValue<'ProjectChanged'>) {
+    const { id, organization_id } = message;
+    if (id) {
+        await queryClient.invalidateQueries({ queryKey: queryKeys.id(id) });
+    }
+
+    if (organization_id) {
+        await queryClient.invalidateQueries({ queryKey: queryKeys.organization(organization_id) });
+    }
+
+    if (!id && !organization_id) {
+        await queryClient.invalidateQueries({ queryKey: queryKeys.all });
+    }
+}
+
 export const queryKeys = {
     all: ['Project'] as const,
     allWithFilters: (filters: string) => [...queryKeys.all, { filters }] as const,

src/Exceptionless.Web/ClientApp/src/lib/features/stacks/api.svelte.ts

@@ -1,9 +1,21 @@
+import type { WebSocketMessageValue } from '$features/websockets/models';
+
 import { accessToken } from '$features/auth/index.svelte';
 import { type ProblemDetails, useFetchClient } from '@exceptionless/fetchclient';
-import { createQuery, useQueryClient } from '@tanstack/svelte-query';
+import { createQuery, QueryClient, useQueryClient } from '@tanstack/svelte-query';
 
 import type { Stack } from './models';
 
+//
+export async function invalidateStackQueries(queryClient: QueryClient, message: WebSocketMessageValue<'StackChanged'>) {
+    const { id } = message;
+    if (id) {
+        await queryClient.invalidateQueries({ queryKey: queryKeys.id(id) });
+    } else {
+        await queryClient.invalidateQueries({ queryKey: queryKeys.all });
+    }
+}
+
 export const queryKeys = {
     all: ['Stack'] as const,
     allWithFilters: (filters: string) => [...queryKeys.all, { filters }] as const,

src/Exceptionless.Web/ClientApp/src/lib/features/users/api.svelte.ts

@@ -1,9 +1,25 @@
+import type { WebSocketMessageValue } from '$features/websockets/models';
+
 import { accessToken } from '$features/auth/index.svelte';
 import { ProblemDetails, useFetchClient } from '@exceptionless/fetchclient';
-import { createMutation, createQuery, useQueryClient } from '@tanstack/svelte-query';
+import { createMutation, createQuery, QueryClient, useQueryClient } from '@tanstack/svelte-query';
 
 import { UpdateEmailAddressResult, type UpdateUser, User } from './models';
 
+export async function invalidateUserQueries(queryClient: QueryClient, message: WebSocketMessageValue<'UserChanged'>) {
+    const { id } = message;
+    if (id) {
+        await queryClient.invalidateQueries({ queryKey: queryKeys.id(id) });
+
+        const currentUser = queryClient.getQueryData<User>(queryKeys.me());
+        if (currentUser?.id === id) {
+            queryClient.invalidateQueries({ queryKey: queryKeys.me() });
+        }
+    } else {
+        await queryClient.invalidateQueries({ queryKey: queryKeys.all });
+    }
+}
+
 export const queryKeys = {
     all: ['User'] as const,
     id: (id: string | undefined) => [...queryKeys.all, id] as const,

src/Exceptionless.Web/ClientApp/src/routes/(app)/+layout.svelte

@@ -4,7 +4,11 @@
     import { page } from '$app/stores';
     import { useSidebar } from '$comp/ui/sidebar';
     import { accessToken, gotoLogin } from '$features/auth/index.svelte';
-    import { getMeQuery } from '$features/users/api.svelte';
+    import { invalidatePersistentEventQueries } from '$features/events/api.svelte';
+    import { invalidateOrganizationQueries } from '$features/organizations/api.svelte';
+    import { invalidateProjectQueries } from '$features/projects/api.svelte';
+    import { invalidateStackQueries } from '$features/stacks/api.svelte';
+    import { getMeQuery, invalidateUserQueries } from '$features/users/api.svelte';
     import { isEntityChangedType, type WebSocketMessageType } from '$features/websockets/models';
     import { WebSocketClient } from '$features/websockets/WebSocketClient.svelte';
     import { validate } from '$shared/validation';
@@ -63,7 +67,26 @@
         );
 
         if (isEntityChangedType(data)) {
-            await queryClient.invalidateQueries({ queryKey: [data.message.type] });
+            switch (data.type) {
+                case 'OrganizationChanged':
+                    await invalidateOrganizationQueries(queryClient, data.message);
+                    break;
+                case 'PersistentEventChanged':
+                    await invalidatePersistentEventQueries(queryClient, data.message);
+                    break;
+                case 'ProjectChanged':
+                    await invalidateProjectQueries(queryClient, data.message);
+                    break;
+                case 'StackChanged':
+                    await invalidateStackQueries(queryClient, data.message);
+                    break;
+                case 'UserChanged':
+                    await invalidateUserQueries(queryClient, data.message);
+                    break;
+                default:
+                    await queryClient.invalidateQueries({ queryKey: [data.message.type] });
+                    break;
+            }
         }
 
         // This event is fired when a user is added or removed from an organization.