From 6800e50466434081d0b8f30c5cbdcb88c8adc388 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Sat, 29 Nov 2025 04:08:34 -0800
Subject: [PATCH] migrate database detail pages to use TanStack Query

---
 .../database/characters/[id]/+page.svelte     | 15 +++++++++++++--
 src/routes/database/summons/[id]/+page.svelte | 19 +++++++++++++++++--
 src/routes/database/weapons/[id]/+page.svelte | 19 +++++++++++++++++--
 3 files changed, 47 insertions(+), 6 deletions(-)

diff --git a/src/routes/database/characters/[id]/+page.svelte b/src/routes/database/characters/[id]/+page.svelte
index 305b2c35..86196081 100644
--- a/src/routes/database/characters/[id]/+page.svelte
+++ b/src/routes/database/characters/[id]/+page.svelte
@@ -4,6 +4,11 @@
 	// SvelteKit imports
 	import { goto } from '$app/navigation'
 
+	// TanStack Query
+	import { createQuery } from '@tanstack/svelte-query'
+	import { entityQueries } from '$lib/api/queries/entity.queries'
+	import { withInitialData } from '$lib/query/ssr'
+
 	// Utility functions
 	import { getRarityLabel, getRarityOptions } from '$lib/utils/rarity'
 	import { getElementLabel, getElementOptions } from '$lib/utils/element'
@@ -25,8 +30,14 @@
 
 	let { data }: { data: PageData } = $props()
 
-	// Get character from server data
-	const character = $derived(data.character)
+	// Use TanStack Query with SSR initial data
+	const characterQuery = createQuery(() => ({
+		...entityQueries.character(data.character?.id ?? ''),
+		...withInitialData(data.character)
+	}))
+
+	// Get character from query
+	const character = $derived(characterQuery.data)
 	const userRole = $derived(data.role || 0)
 	const canEdit = $derived(userRole >= 7)
 
diff --git a/src/routes/database/summons/[id]/+page.svelte b/src/routes/database/summons/[id]/+page.svelte
index 4bc67e9e..684dab1b 100644
--- a/src/routes/database/summons/[id]/+page.svelte
+++ b/src/routes/database/summons/[id]/+page.svelte
@@ -2,9 +2,18 @@
 
 <script lang="ts">
 	import { goto } from '$app/navigation'
+
+	// TanStack Query
+	import { createQuery } from '@tanstack/svelte-query'
+	import { entityQueries } from '$lib/api/queries/entity.queries'
+	import { withInitialData } from '$lib/query/ssr'
+
+	// Utilities
 	import { getRarityLabel } from '$lib/utils/rarity'
 	import { getElementLabel, getElementIcon } from '$lib/utils/element'
 	import { getSummonImage } from '$lib/utils/images'
+
+	// Components
 	import UncapIndicator from '$lib/components/uncap/UncapIndicator.svelte'
 	import DetailsContainer from '$lib/components/ui/DetailsContainer.svelte'
 	import DetailItem from '$lib/components/ui/DetailItem.svelte'
@@ -13,8 +22,14 @@
 
 	let { data }: { data: PageData } = $props()
 
-	// Get summon from server data
-	const summon = $derived(data.summon)
+	// Use TanStack Query with SSR initial data
+	const summonQuery = createQuery(() => ({
+		...entityQueries.summon(data.summon?.id ?? ''),
+		...withInitialData(data.summon)
+	}))
+
+	// Get summon from query
+	const summon = $derived(summonQuery.data)
 
 	// Helper function to get summon grid image
 	function getSummonGridImage(summon: any): string {
diff --git a/src/routes/database/weapons/[id]/+page.svelte b/src/routes/database/weapons/[id]/+page.svelte
index adf8b191..2ec64b04 100644
--- a/src/routes/database/weapons/[id]/+page.svelte
+++ b/src/routes/database/weapons/[id]/+page.svelte
@@ -2,10 +2,19 @@
 
 <script lang="ts">
 	import { goto } from '$app/navigation'
+
+	// TanStack Query
+	import { createQuery } from '@tanstack/svelte-query'
+	import { entityQueries } from '$lib/api/queries/entity.queries'
+	import { withInitialData } from '$lib/query/ssr'
+
+	// Utilities
 	import { getRarityLabel } from '$lib/utils/rarity'
 	import { getElementLabel, getElementIcon } from '$lib/utils/element'
 	import { getProficiencyLabel, getProficiencyIcon } from '$lib/utils/proficiency'
 	import { getWeaponGridImage } from '$lib/utils/images'
+
+	// Components
 	import UncapIndicator from '$lib/components/uncap/UncapIndicator.svelte'
 	import DetailsContainer from '$lib/components/ui/DetailsContainer.svelte'
 	import DetailItem from '$lib/components/ui/DetailItem.svelte'
@@ -14,8 +23,14 @@
 
 	let { data }: { data: PageData } = $props()
 
-	// Get weapon from server data
-	const weapon = $derived(data.weapon)
+	// Use TanStack Query with SSR initial data
+	const weaponQuery = createQuery(() => ({
+		...entityQueries.weapon(data.weapon?.id ?? ''),
+		...withInitialData(data.weapon)
+	}))
+
+	// Get weapon from query
+	const weapon = $derived(weaponQuery.data)
 
 	// Helper function to get weapon grid image
 	function getWeaponImage(weapon: any): string {