WIP: Use svelte-query-runes

TanStack/query#6981
exceptionless · Jun 25, 2024 · a94df68 · a94df68
1 parent d4fcb24
commit a94df68
Show file tree

Hide file tree

Showing 11 changed files with 147 additions and 153 deletions.
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/api/eventsApi.svelte.ts b/src/Exceptionless.Web/ClientApp/src/lib/api/eventsApi.svelte.ts
@@ -1,7 +1,6 @@
-import { createQuery, useQueryClient } from '@tanstack/svelte-query';
+import { createQuery, useQueryClient } from '@tanstack/svelte-query-runes';
 import type { PersistentEvent } from '$lib/models/api';
 import { useFetchClient, type ProblemDetails } from '@exceptionless/fetchclient';
-import { derived, readable, type Readable } from 'svelte/store';
 import { accessToken } from '$api/auth.svelte';
 
 export const queryKeys = {
@@ -12,56 +11,53 @@ export const queryKeys = {
     id: (id: string | null) => [...queryKeys.all, id] as const
 };
 
-// UPGRADE
-export function getEventByIdQuery(id: string | Readable<string | null>) {
-    const readableId = typeof id === 'string' || id === null ? readable(id) : id;
-    return createQuery<PersistentEvent, ProblemDetails>(
-        derived([accessToken.value, readableId], ([$accessToken, $id]) => ({
-            enabled: !!$accessToken && !!$id,
-            queryKey: queryKeys.id($id),
-            queryFn: async ({ signal }: { signal: AbortSignal }) => {
-                const client = useFetchClient();
-                const response = await client.getJSON<PersistentEvent>(`events/${$id}`, {
-                    signal
-                });
+export function getEventByIdQuery(id: string) {
+    const queryOptions = $derived({
+        enabled: !!accessToken.value && !!id,
+        queryKey: queryKeys.id(id),
+        queryFn: async ({ signal }: { signal: AbortSignal }) => {
+            const client = useFetchClient();
+            const response = await client.getJSON<PersistentEvent>(`events/${id}`, {
+                signal
+            });
+
+            if (response.ok) {
+                return response.data!;
+            }
 
-                if (response.ok) {
-                    return response.data!;
-                }
+            throw response.problem;
+        }
+    });
 
-                throw response.problem;
-            }
-        }))
-    );
+    return createQuery<PersistentEvent, ProblemDetails>(queryOptions);
 }
 
-export function getEventsByStackIdQuery(stackId: string | null | Readable<string | null>, limit: number = 10) {
+export function getEventsByStackIdQuery(stackId: string | null, limit: number = 10) {
     const queryClient = useQueryClient();
-    const readableStackId = typeof stackId === 'string' || stackId === null ? readable(stackId) : stackId;
-    return createQuery<PersistentEvent[], ProblemDetails>(
-        derived([accessToken.value, readableStackId], ([$accessToken, $id]) => ({
-            enabled: !!$accessToken && !!$id,
-            queryClient,
-            queryKey: queryKeys.stacks($id),
-            queryFn: async ({ signal }: { signal: AbortSignal }) => {
-                const client = useFetchClient();
-                const response = await client.getJSON<PersistentEvent[]>(`stacks/${$id}/events`, {
-                    signal,
-                    params: {
-                        limit
-                    }
+    const queryOptions = $derived({
+        enabled: !!accessToken.value && !!stackId,
+        queryClient,
+        queryKey: queryKeys.stacks(stackId),
+        queryFn: async ({ signal }: { signal: AbortSignal }) => {
+            const client = useFetchClient();
+            const response = await client.getJSON<PersistentEvent[]>(`stacks/${stackId}/events`, {
+                signal,
+                params: {
+                    limit
+                }
+            });
+
+            if (response.ok) {
+                response.data?.forEach((event) => {
+                    queryClient.setQueryData(queryKeys.id(event.id!), event);
                 });
 
-                if (response.ok) {
-                    response.data?.forEach((event) => {
-                        queryClient.setQueryData(queryKeys.id(event.id!), event);
-                    });
+                return response.data!;
+            }
 
-                    return response.data!;
-                }
+            throw response.problem;
+        }
+    });
 
-                throw response.problem;
-            }
-        }))
-    );
+    return createQuery<PersistentEvent[], ProblemDetails>(queryOptions);
 }
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/api/gravatar.svelte.ts b/src/Exceptionless.Web/ClientApp/src/lib/api/gravatar.svelte.ts
@@ -1,16 +1,18 @@
-import { derived } from 'svelte/store';
 import { getMeQuery } from './usersApi.svelte';
 
-// UPGRADE
 export function getGravatarFromCurrentUserSrc(query?: ReturnType<typeof getMeQuery>) {
-    return derived(query ?? getMeQuery(), async ($userResponse) => {
-        return $userResponse.data?.email_address ? await getGravatarSrc($userResponse.data?.email_address) : null;
+    const meQuery = query ?? getMeQuery();
+    const userSrc = $derived.by(async () => {
+        return meQuery.data?.email_address ? await getGravatarSrc(meQuery.data?.email_address) : null;
     });
+
+    return userSrc;
 }
 
 export function getUserInitialsFromCurrentUserSrc(query?: ReturnType<typeof getMeQuery>) {
-    return derived(query ?? getMeQuery(), async ($userResponse) => {
-        const fullName = $userResponse.data?.full_name;
+    const meQuery = query ?? getMeQuery();
+    const initials = $derived.by(() => {
+        const fullName = meQuery.data?.full_name;
         if (!fullName) {
             return 'NA';
         }
@@ -24,6 +26,8 @@ export function getUserInitialsFromCurrentUserSrc(query?: ReturnType<typeof getM
 
         return initials.length > 2 ? initials.substring(0, 2) : initials;
     });
+
+    return initials;
 }
 
 export async function getGravatarSrc(emailAddress: string) {

diff --git a/src/Exceptionless.Web/ClientApp/src/lib/api/organizationsApi.svelte.ts b/src/Exceptionless.Web/ClientApp/src/lib/api/organizationsApi.svelte.ts
@@ -1,7 +1,6 @@
-import { createQuery, useQueryClient } from '@tanstack/svelte-query';
+import { createQuery, useQueryClient } from '@tanstack/svelte-query-runes';
 import type { ViewOrganization } from '$lib/models/api';
 import { useFetchClient, type ProblemDetails } from '@exceptionless/fetchclient';
-import { derived } from 'svelte/store';
 import { accessToken } from '$api/auth.svelte';
 
 export const queryKeys = {
@@ -12,30 +11,30 @@ export const queryKeys = {
 
 export function getOrganizationQuery(mode: 'stats' | null = null) {
     const queryClient = useQueryClient();
-    return createQuery<ViewOrganization[], ProblemDetails>(
-        derived(accessToken.value, ($accessToken) => ({
-            enabled: !!$accessToken,
-            queryClient,
-            queryKey: mode ? queryKeys.allWithMode(mode) : queryKeys.all,
-            queryFn: async ({ signal }: { signal: AbortSignal }) => {
-                const client = useFetchClient();
-                const response = await client.getJSON<ViewOrganization[]>('organizations', {
-                    signal,
-                    params: {
-                        mode
-                    }
+    const queryOptions = $derived({
+        enabled: !!accessToken.value,
+        queryClient,
+        queryKey: mode ? queryKeys.allWithMode(mode) : queryKeys.all,
+        queryFn: async ({ signal }: { signal: AbortSignal }) => {
+            const client = useFetchClient();
+            const response = await client.getJSON<ViewOrganization[]>('organizations', {
+                signal,
+                params: {
+                    mode
+                }
+            });
+
+            if (response.ok) {
+                response.data?.forEach((organization) => {
+                    queryClient.setQueryData(queryKeys.id(organization.id!), organization);
                 });
 
-                if (response.ok) {
-                    response.data?.forEach((organization) => {
-                        queryClient.setQueryData(queryKeys.id(organization.id!), organization);
-                    });
+                return response.data!;
+            }
 
-                    return response.data!;
-                }
+            throw response.problem;
+        }
+    });
 
-                throw response.problem;
-            }
-        }))
-    );
+    return createQuery<ViewOrganization[], ProblemDetails>(queryOptions);
 }
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/api/projectsApi.svelte.ts b/src/Exceptionless.Web/ClientApp/src/lib/api/projectsApi.svelte.ts
@@ -1,5 +1,4 @@
-import { createMutation, createQuery, useQueryClient } from '@tanstack/svelte-query';
-import { derived, readable, type Readable } from 'svelte/store';
+import { createMutation, createQuery, useQueryClient } from '@tanstack/svelte-query-runes';
 import type { ViewProject } from '$lib/models/api';
 import { useFetchClient, type FetchClientResponse, type ProblemDetails } from '@exceptionless/fetchclient';
 import { accessToken } from '$api/auth.svelte';
@@ -12,61 +11,59 @@ export const queryKeys = {
     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([accessToken.value, readableId], ([$accessToken, $id]) => ({
-            enabled: !!$accessToken && !!$id,
-            queryKey: queryKeys.id($id),
-            queryFn: async ({ signal }: { signal: AbortSignal }) => {
-                const client = useFetchClient();
-                const response = await client.getJSON<ViewProject>(`projects/${$id}`, {
-                    signal
-                });
-
-                if (response.ok) {
-                    return response.data!;
-                }
+export function getProjectByIdQuery(id: string) {
+    const queryOptions = $derived({
+        enabled: !!accessToken.value && !!id,
+        queryKey: queryKeys.id(id),
+        queryFn: async ({ signal }: { signal: AbortSignal }) => {
+            const client = useFetchClient();
+            const response = await client.getJSON<ViewProject>(`projects/${id}`, {
+                signal
+            });
 
-                throw response.problem;
+            if (response.ok) {
+                return response.data!;
             }
-        }))
-    );
+
+            throw response.problem;
+        }
+    });
+
+    return createQuery<ViewProject, ProblemDetails>(queryOptions);
 }
 
-export function getProjectsByOrganizationIdQuery(organizationId: string | Readable<string | null>, limit: number = 1000) {
+export function getProjectsByOrganizationIdQuery(organizationId: string, limit: number = 1000) {
     const queryClient = useQueryClient();
-    const readableOrganizationId = typeof organizationId === 'string' || organizationId === null ? readable(organizationId) : organizationId;
-    return createQuery<ViewProject[], ProblemDetails>(
-        derived([accessToken.value, readableOrganizationId], ([$accessToken, $id]) => ({
-            enabled: !!$accessToken && !!$id,
-            queryClient,
-            queryKey: queryKeys.organization($id),
-            queryFn: async ({ signal }: { signal: AbortSignal }) => {
-                const client = useFetchClient();
-                const response = await client.getJSON<ViewProject[]>(`organizations/${$id}/projects`, {
-                    signal,
-                    params: {
-                        limit
-                    }
+    const queryOptions = $derived({
+        enabled: !!accessToken.value && !!organizationId,
+        queryClient,
+        queryKey: queryKeys.organization(organizationId),
+        queryFn: async ({ signal }: { signal: AbortSignal }) => {
+            const client = useFetchClient();
+            const response = await client.getJSON<ViewProject[]>(`organizations/${organizationId}/projects`, {
+                signal,
+                params: {
+                    limit
+                }
+            });
+
+            if (response.ok) {
+                response.data?.forEach((project) => {
+                    queryClient.setQueryData(queryKeys.id(project.id!), project);
                 });
 
-                if (response.ok) {
-                    response.data?.forEach((project) => {
-                        queryClient.setQueryData(queryKeys.id(project.id!), project);
-                    });
+                return response.data!;
+            }
 
-                    return response.data!;
-                }
+            throw response.problem;
+        }
+    });
 
-                throw response.problem;
-            }
-        }))
-    );
+    return createQuery<ViewProject[], ProblemDetails>(queryOptions);
 }
 
 export function mutatePromoteTab(id: string) {
-    const client = useQueryClient();
+    const queryClient = useQueryClient();
     return createMutation<FetchClientResponse<unknown>, ProblemDetails, { name: string }>({
         mutationKey: queryKeys.id(id),
         mutationFn: async (params: { name: string }) => {
@@ -82,7 +79,7 @@ export function mutatePromoteTab(id: string) {
             throw response.problem;
         },
         onSettled: () => {
-            client.invalidateQueries({ queryKey: queryKeys.id(id) });
+            queryClient.invalidateQueries({ queryKey: queryKeys.id(id) });
         }
     });
 }

diff --git a/src/Exceptionless.Web/ClientApp/src/lib/api/stacksApi.svelte.ts b/src/Exceptionless.Web/ClientApp/src/lib/api/stacksApi.svelte.ts
@@ -1,5 +1,4 @@
-import { createQuery, useQueryClient } from '@tanstack/svelte-query';
-import { derived, readable, type Readable } from 'svelte/store';
+import { createQuery, useQueryClient } from '@tanstack/svelte-query-runes';
 import type { Stack } from '$lib/models/api';
 import { useFetchClient, type ProblemDetails } from '@exceptionless/fetchclient';
 import { accessToken } from '$api/auth.svelte';
@@ -33,24 +32,23 @@ export async function prefetchStack(id: string) {
     });
 }
 
-export function getStackByIdQuery(id: string | Readable<string | null>) {
-    const readableId = typeof id === 'string' || id === null ? readable(id) : id;
-    return createQuery<Stack, ProblemDetails>(
-        derived([accessToken.value, readableId], ([$accessToken, $id]) => ({
-            enabled: !!$accessToken && !!$id,
-            queryKey: queryKeys.id($id),
-            queryFn: async ({ signal }: { signal: AbortSignal }) => {
-                const client = useFetchClient();
-                const response = await client.getJSON<Stack>(`stacks/${$id}`, {
-                    signal
-                });
-
-                if (response.ok) {
-                    return response.data!;
-                }
-
-                throw response.problem;
+export function getStackByIdQuery(id: string) {
+    const queryOptions = $derived({
+        enabled: !!accessToken.value && !!id,
+        queryKey: queryKeys.id(id),
+        queryFn: async ({ signal }: { signal: AbortSignal }) => {
+            const client = useFetchClient();
+            const response = await client.getJSON<Stack>(`stacks/${id}`, {
+                signal
+            });
+
+            if (response.ok) {
+                return response.data!;
             }
-        }))
-    );
+
+            throw response.problem;
+        }
+    });
+
+    return createQuery<Stack, ProblemDetails>(queryOptions);
 }
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/api/usersApi.svelte.ts b/src/Exceptionless.Web/ClientApp/src/lib/api/usersApi.svelte.ts
@@ -1,4 +1,4 @@
-import { createQuery, useQueryClient } from '@tanstack/svelte-query';
+import { createQuery, useQueryClient } from '@tanstack/svelte-query-runes';
 
 import { useFetchClient, type ProblemDetails } from '@exceptionless/fetchclient';
 import type { User } from '$lib/models/api';
@@ -12,7 +12,7 @@ export const queryKeys = {
 
 export function getMeQuery() {
     const queryClient = useQueryClient();
-    let queryOptions = $derived({
+    const queryOptions = $derived({
         enabled: !!accessToken.value,
         queryClient,
         queryKey: queryKeys.me(),