SvelteKit Remote Functions: Part 1

SvelteKit は、データの新しい扱い方をテストしています。それは Remote Functions と呼ばれます。この機能により、クライアントとサーバーが簡単に通信できるようになります。

Remote Functions とは何ですか？

Remote Functions を使用すると、SvelteKit アプリのどこからでもサーバー側のロジックを呼び出すことができます。クライアントから呼び出しますが、コードはサーバー上で実行されます。これにより、データベースやプライベートな環境変数に安全にアクセスできます。

有効にする方法

svelte.config.js ファイルで実験的モード（experimental mode）を有効にする必要があります。

const config = {
    kit: {
        experimental: {
            remoteFunctions: true
        }
    },
    compilerOptions: {
        experimental: {
            async: true
        }
    }
};

export default config;

クエリの利用

.remote.js または .remote.ts 拡張子のファイルを使用することで、リモート関数を作成できます。これには 4 つのタイプがあります。

  • query（データの取得に使用）
  • form
  • command
  • prerender

query 関数は HTTP GET リクエストのように動作します。Svelte コンポーネントにインポートして、await を使用してデータを取得できます。

リモートクエリの例:

import { query } from '$app/server';
import * as db from '$lib/server/database';

export const getPosts = query(async () => {
    const posts = await db.sql`SELECT title, slug FROM post`;
    return posts;
});

コンポーネント内では、次のように使用します:

{#each await getPosts() as { title, slug }}
    <li>{title}</li>
{/each}

状態の管理

query 関数は、UI を管理するための 3 つの便利なプロパティを提供します。

  • loading: データ取得中に true になります。
  • error: リクエストが失敗した場合に true になります。
  • current: 取得に成功したデータを保持します。

スマートな機能

  1. バリデーション: Zod や Valibot などのライブラリを使用して、クエリに渡される引数を検証できます。これにより、サーバーの安全性を保つことができます。

  2. データ処理: SvelteKit はデータの送信に devalue を使用します。これにより、標準的な JSON では簡単に扱えない Date や Map などの複雑な型をサポートしています。

  3. 重複排除 (Deduplication): 同じ引数で同じクエリを複数回呼び出した場合、SvelteKit はそれを一度だけ実行します。これにより、データベースへの余計な負荷を防ぎます。

  4. リフレッシュ: クエリに対して .refresh() を呼び出すことで、サーバーから最新のデータを即座に取得できます。

注: これらの機能は実験的なものです。将来のアップデートで構文が変更される可能性があります。

出典: https://dev.to/nnutnonn/sveltekit-kaarthamngaankab-remote-function-part-1-4hg4