granblue.team/hensei-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: add TanStack Query devtools for development

Browse source 
added @tanstack/svelte-query-devtools (dev only)
- shows in dev mode only, tree-shaken from production
- provides visual debugging of queries, cache, and mutations
- accessible via floating icon in bottom-right corner
This commit is contained in:
Justin Edmund 2025-11-29 03:44:59 -08:00
parent 6ad3b65f7f
commit c06c8135ed
3 changed files with 36 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
package.json
View file

@ -35,6 +35,7 @@
"@sveltejs/adapter-node": "^5.2.12",
"@sveltejs/kit": "^2.22.0",
"@sveltejs/vite-plugin-svelte": "^6.0.0",
"@tanstack/svelte-query-devtools": "^6.0.2",
"@types/node": "^22",
"@vitest/browser": "^3.2.3",
"eslint": "^9.18.0",

34
pnpm-lock.yaml
View file

@ -87,6 +87,9 @@ importers:
'@sveltejs/vite-plugin-svelte':
specifier: ^6.0.0
version: 6.1.4(svelte@5.38.7)(vite@7.1.5(@types/node@22.18.1)(sass@1.92.1))
'@tanstack/svelte-query-devtools':
specifier: ^6.0.2
version: 6.0.2(@tanstack/svelte-query@6.0.9(svelte@5.38.7))(svelte@5.38.7)
'@types/node':
specifier: ^22
version: 22.18.1
@ -840,6 +843,15 @@ packages:
'@tanstack/query-core@5.90.11':
resolution: {integrity: sha512-f9z/nXhCgWDF4lHqgIE30jxLe4sYv15QodfdPDKYAk7nAEjNcndy4dHz3ezhdUaR23BpWa4I2EH4/DZ0//Uf8A==}
'@tanstack/query-devtools@5.91.1':
resolution: {integrity: sha512-l8bxjk6BMsCaVQH6NzQEE/bEgFy1hAs5qbgXl0xhzezlaQbPk6Mgz9BqEg2vTLPOHD8N4k+w/gdgCbEzecGyNg==}
'@tanstack/svelte-query-devtools@6.0.2':
resolution: {integrity: sha512-UQdtAPsdJQ2HijMVy+W+/CHyrUZmCkubfAi/sqWsx+1fdY+g7ONa5xroBLiaebC+5jJxvk9kij61QMUHzzJgQA==}
peerDependencies:
'@tanstack/svelte-query': ^6.0.8
svelte: ^5.25.0
'@tanstack/svelte-query@6.0.9':
resolution: {integrity: sha512-ezawzencc07h61M+p8R9Opp2CmpgGwrM05IsIGJiPkr1SrBPW8gDZ9sTdaQbEpzLNXMXaZUkq0MS+61Rw2EfSg==}
peerDependencies:
@ -2827,8 +2839,8 @@ snapshots:
'@friendofsvelte/tipex@0.0.9(highlight.js@11.8.0)(svelte@5.38.7)':
dependencies:
'@tiptap/core': 2.26.2(@tiptap/pm@2.26.2)
'@tiptap/extension-code-block': 2.26.2(@tiptap/core@2.26.2(@tiptap/pm@2.26.2))(@tiptap/pm@2.26.2)
'@tiptap/extension-code-block-lowlight': 2.26.2(@tiptap/core@2.26.2(@tiptap/pm@2.26.2))(@tiptap/extension-code-block@2.26.2(@tiptap/core@3.5.1(@tiptap/pm@3.5.1))(@tiptap/pm@3.5.1))(@tiptap/pm@2.26.2)(highlight.js@11.8.0)(lowlight@2.9.0)
'@tiptap/extension-code-block': 2.26.2(@tiptap/core@3.5.1(@tiptap/pm@3.5.1))(@tiptap/pm@3.5.1)
'@tiptap/extension-code-block-lowlight': 2.26.2(@tiptap/core@2.26.2(@tiptap/pm@2.26.2))(@tiptap/extension-code-block@2.26.2(@tiptap/core@2.26.2(@tiptap/pm@2.26.2))(@tiptap/pm@2.26.2))(@tiptap/pm@2.26.2)(highlight.js@11.8.0)(lowlight@2.9.0)
'@tiptap/extension-floating-menu': 2.26.2(@tiptap/core@2.26.2(@tiptap/pm@2.26.2))(@tiptap/pm@2.26.2)
'@tiptap/extension-image': 2.26.2(@tiptap/core@2.26.2(@tiptap/pm@2.26.2))
'@tiptap/extension-link': 2.26.2(@tiptap/core@2.26.2(@tiptap/pm@2.26.2))(@tiptap/pm@2.26.2)
@ -3280,6 +3292,15 @@ snapshots:
'@tanstack/query-core@5.90.11': {}
'@tanstack/query-devtools@5.91.1': {}
'@tanstack/svelte-query-devtools@6.0.2(@tanstack/svelte-query@6.0.9(svelte@5.38.7))(svelte@5.38.7)':
dependencies:
'@tanstack/query-devtools': 5.91.1
'@tanstack/svelte-query': 6.0.9(svelte@5.38.7)
esm-env: 1.2.2
svelte: 5.38.7
'@tanstack/svelte-query@6.0.9(svelte@5.38.7)':
dependencies:
'@tanstack/query-core': 5.90.11
@ -3341,10 +3362,10 @@ snapshots:
dependencies:
'@tiptap/extension-list': 3.5.1(@tiptap/core@3.5.1(@tiptap/pm@3.5.1))(@tiptap/pm@3.5.1)
'@tiptap/extension-code-block-lowlight@2.26.2(@tiptap/core@2.26.2(@tiptap/pm@2.26.2))(@tiptap/extension-code-block@2.26.2(@tiptap/core@3.5.1(@tiptap/pm@3.5.1))(@tiptap/pm@3.5.1))(@tiptap/pm@2.26.2)(highlight.js@11.8.0)(lowlight@2.9.0)':
'@tiptap/extension-code-block-lowlight@2.26.2(@tiptap/core@2.26.2(@tiptap/pm@2.26.2))(@tiptap/extension-code-block@2.26.2(@tiptap/core@2.26.2(@tiptap/pm@2.26.2))(@tiptap/pm@2.26.2))(@tiptap/pm@2.26.2)(highlight.js@11.8.0)(lowlight@2.9.0)':
dependencies:
'@tiptap/core': 2.26.2(@tiptap/pm@2.26.2)
'@tiptap/extension-code-block': 2.26.2(@tiptap/core@2.26.2(@tiptap/pm@2.26.2))(@tiptap/pm@2.26.2)
'@tiptap/extension-code-block': 2.26.2(@tiptap/core@3.5.1(@tiptap/pm@3.5.1))(@tiptap/pm@3.5.1)
'@tiptap/pm': 2.26.2
highlight.js: 11.8.0
lowlight: 2.9.0
@ -3354,6 +3375,11 @@ snapshots:
'@tiptap/core': 2.26.2(@tiptap/pm@2.26.2)
'@tiptap/pm': 2.26.2
'@tiptap/extension-code-block@2.26.2(@tiptap/core@3.5.1(@tiptap/pm@3.5.1))(@tiptap/pm@3.5.1)':
dependencies:
'@tiptap/core': 3.5.1(@tiptap/pm@3.5.1)
'@tiptap/pm': 3.5.1
'@tiptap/extension-code-block@3.5.1(@tiptap/core@3.5.1(@tiptap/pm@3.5.1))(@tiptap/pm@3.5.1)':
dependencies:
'@tiptap/core': 3.5.1(@tiptap/pm@3.5.1)

6
src/routes/+layout.svelte
View file

@ -9,8 +9,9 @@
import { Tooltip } from 'bits-ui'
import { beforeNavigate, afterNavigate } from '$app/navigation'
import { authStore } from '$lib/stores/auth.store'
import { browser } from '$app/environment'
import { browser, dev } from '$app/environment'
import { QueryClientProvider } from '@tanstack/svelte-query'
import { SvelteQueryDevtools } from '@tanstack/svelte-query-devtools'
import type { LayoutData } from './$types'
// Get `data` and `children` from the router via $props()
@ -109,6 +110,9 @@
</svelte:head>
<QueryClientProvider client={data.queryClient}>
{#if dev}
<SvelteQueryDevtools />
{/if}
<Tooltip.Provider>
<div class="app-container" class:sidebar-open={sidebar.isOpen}>
<div class="main-pane">