feat: migrate to tanstack-query v5

michaelhthomas · Mar 12, 2024 · 163ee07 · 163ee07
1 parent 2d125bc
commit 163ee07
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 17 deletions.
diff --git a/package.json b/package.json
@@ -20,7 +20,7 @@
 	"dependencies": {
 		"@iconify/svelte": "^3.1.4",
 		"@popperjs/core": "^2.11.8",
-		"@tanstack/svelte-query": "^4.36.1",
+		"@tanstack/svelte-query": "^5.26.3",
 		"ag-grid-community": "^30.2.0",
 		"ag-grid-svelte": "^0.3.0",
 		"chart.js": "^4.4.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/lib/components/StatusButton.svelte b/src/lib/components/StatusButton.svelte
@@ -55,7 +55,7 @@
 			<div
 				class="col-start-1 col-end-1 row-start-1 row-end-1 flex items-center justify-center"
 			>
-				{#if internalStatus === 'loading'}
+				{#if internalStatus === 'pending'}
 					<Spinner size="4" color="white" />
 				{:else if internalStatus === 'success'}
 					<Icon icon="bx:check" class="w-5 h-5" />

diff --git a/src/lib/components/webhooks/WebhookResetSecretButton.svelte b/src/lib/components/webhooks/WebhookResetSecretButton.svelte
@@ -26,12 +26,12 @@
 			return webhookUpdate;
 		},
 		onSuccess() {
-			queryClient.invalidateQueries(['webhooks', id]);
+			queryClient.invalidateQueries({ queryKey: ['webhooks', id] });
 		}
 	});
 </script>
 
-{#if $resetSecretMutation.isLoading}
+{#if $resetSecretMutation.isPending}
 	<Spinner size="6" />
 {:else if $resetSecretMutation.isSuccess}
 	<Icon icon="bx:check-circle" class="w-6 h-6 text-green-500" />

diff --git a/src/lib/stores/user.ts b/src/lib/stores/user.ts
@@ -6,7 +6,10 @@ import { useService } from '$lib/services';
 
 const aboutService = useService(AboutApi);
 
-export const userStore = createQuery({
-	context: queryClient,
-	queryFn: () => aboutService.getCurrentUser()
-});
+export const userStore = createQuery(
+	{
+		queryKey: ['user'],
+		queryFn: () => aboutService.getCurrentUser()
+	},
+	queryClient
+);
diff --git a/src/routes/export/+page.svelte b/src/routes/export/+page.svelte
@@ -42,7 +42,7 @@
 			color={$exportTransactions.isSuccess ? 'green' : 'primary'}
 			on:click={() => $exportTransactions.mutate()}
 		>
-			{#if $exportTransactions.isLoading}
+			{#if $exportTransactions.isPending}
 				<Spinner size="6" />
 			{:else if $exportTransactions.isSuccess}
 				<Icon icon="bx-check" class="w-6 h-6" />