2024-03-22
概要
- 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
作成日
2024-03-22
更新日
2024-05-18