snapshot of https://github.com/TanStack/query.git (main, 2026-09-16; blobs > 131072B omitted)

examples/svelte/star-wars/src/routes/characters/[characterId]/+page.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+  import { createQuery } from '@tanstack/svelte-query'
+  import Homeworld from './Homeworld.svelte'
+  import Film from './Film.svelte'
+  import { getCharacter } from '$lib/api'
+  import { page } from '$app/state'
+
+  const query = createQuery(() => ({
+    queryKey: ['character', page.params.characterId],
+    queryFn: () => getCharacter(page.params.characterId),
+  }))
+</script>
+
+{#if query.status === 'pending'}
+  <p>Loading...</p>
+{/if}
+
+{#if query.status === 'error'}
+  <p>Error :(</p>
+{/if}
+
+{#if query.status === 'success'}
+  {@const homeworldUrlParts = query.data.homeworld.split('/').filter(Boolean)}
+  {@const homeworldId = homeworldUrlParts[homeworldUrlParts.length - 1]}
+  <h2 class="text-4xl">{query.data.name}</h2>
+
+  <p><strong>Born</strong>: {query.data.birth_year}</p>
+  <p><strong>Eyes</strong>: {query.data.eye_color}</p>
+  <p><strong>Hair</strong>: {query.data.hair_color}</p>
+  <p><strong>Height</strong>: {query.data.height}</p>
+  <p><strong>Mass</strong>: {query.data.mass}</p>
+  <p><strong>Homeworld</strong>: <Homeworld {homeworldId} /></p>
+  <h4 class="text-2xl pt-4">Films</h4>
+  {#each query.data.films as film}
+    {@const filmUrlParts = film.split('/').filter(Boolean)}
+    {@const filmId = filmUrlParts[filmUrlParts.length - 1]}
+    <Film {filmId} />
+  {/each}
+{/if}