概要

• SvelteKit に @tanstack/svelte-query を入れてみた
• Svelte 初心者の備忘録です。悪しからず..

バージョン

• @sveltejs/kit 2.5.4
• @tanstack/svelte-query 5.28.4

Install

pnpm add @tanstack/svelte-query

QueryClientProvider を作成

QueryClientProvider をグローバルに置きます。

+layout.svelte に置き <slot /> を囲めば配下のページで適用されます。

<script lang="ts">
	// ./src/routes/+layout.svelte
	import { QueryClient, QueryClientProvider } from '@tanstack/svelte-query'

	const queryClient = new QueryClient()
</script>

<QueryClientProvider client={queryClient}>
	<slot />
</QueryClientProvider>

queryFn を定義

queryFn はなるべく共通化したいので lib に置きました。

// ./src/lib/api.ts
type Note = {
  name: string
  content: string
}
export const fetchNotes = async (): Promise<Note[]> => {
  // TODO fetch('/api/notes') へ
  // mock
  const list = [
    {
      name: 'タイトル',
      content: '内容',
    },
  ]
  return list
}

ページで呼び出す

あとは +page.svelte に createQuery を書いて、実際にAPIを呼び出します。

<script lang="ts">
	// ./src/routes/+page.svelte
	import { fetchNotes } from '$lib/api'
	import { createQuery } from '@tanstack/svelte-query'

	const notes = createQuery({
		queryKey: ['notes'],
		queryFn: fetchNotes
	})
</script>

{#if $notes.isLoading}
	<p>読み込み中... </p>
{:else if $notes.isError}
	<p>エラーが起きました</p>
{:else if $notes.isSuccess}
	{#each $notes.data as note}
		<p>タイトル: {note.name}</p>
	{/each}
{/if}

個人的には queryKey の管理が煩雑なので createQuery も lib に移した方がいいかなと感じてます。

終わりに

svelte の Await blocks の存在を知って「もうこれでいいじゃん！」と思ったのですが、 いろんなコンポーネントで Web API を呼び出すことを考えると、キャッシュレイヤーが欲しくなりました。

Links

• Svelte Query Quick Start
• TanStack Query Overview