UI Data Layer — Svelte + TanStack Query

Patterns and conventions for the web UI data fetching layer. Covers TanStack Query v6 setup, query factories, WebSocket-driven cache invalidation, mutations, and migration from manual fetch patterns.

Companion to: /svelte-5 skill (reactivity, SSR, state management). This skill covers the data layer specifically.

Technology Choice

@tanstack/svelte-query v6 — Svelte 5 runes-native (~13 kB gzip).

Key capabilities used in this project:

• Automatic caching with stale-while-revalidate
• Request deduplication (concurrent identical requests share one fetch)
• Background revalidation on navigation
• Query invalidation via queryClient.invalidateQueries()
• Direct cache updates via queryClient.setQueryData()
• Infinite queries for paginated data (createInfiniteQuery)