devlog

Svelte 初心者が SveleteKit に Svelte Query を入れてみた

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.sveltecreateQuery を書いて、実際に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