Remote Functions - 型安全なクライアント-サーバー通信

// svelte.config.js
import type { Config } from '@sveltejs/kit';

const config: Config = {
	kit: {
		experimental: {
			remoteFunctions: true,
		},
	},
	// Svelte 5.36+のawait expressionsを使用する場合
	compilerOptions: {
		experimental: {
			async: true,
		},
	},
};

export default config;

src/
├── routes/
│   └── blog/
│       ├── +page.svelte
│       └── data.remote.ts    # Remote Functions定義ファイル
└── lib/
    └── server/
        └── database.ts       # サーバーのみのモジュール

// src/routes/blog/data.remote.ts
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, created_at
    FROM posts
    ORDER BY created_at DESC
  `;
	return posts;
});

<!-- src/routes/blog/+page.svelte -->
<script lang="ts">
  import { getPosts } from './data.remote';
</script>

<h1>ブログ記事一覧</h1>

<ul>
  {#each await getPosts() as post}
    <li>
      <a href="/blog/{post.slug}">{post.title}</a>
    </li>
  {/each}
</ul>

// src/routes/blog/data.remote.ts
import * as v from 'valibot';
import { error } from '@sveltejs/kit';
import { query } from '$app/server';
import * as db from '$lib/server/database';

// 引数ありのクエリ（バリデーション付き）
export const getPost = query(v.string(), async (slug) => {
	const [post] = await db.sql`
    SELECT * FROM posts
    WHERE slug = ${slug}
  `;

	if (!post) {
		error(404, '記事が見つかりません');
	}

	return post;
});

<!-- src/routes/blog/[slug]/+page.svelte -->
<script lang="ts">
  import { getPost } from '../data.remote';

  let { params } = $props();

  // paramsの変更に応じて自動的に再取得
  const post = $derived(await getPost(params.slug));
</script>

<article>
  <h1>{post.title}</h1>
  <div>{@html post.content}</div>
</article>

// src/routes/weather.remote.ts
import * as v from 'valibot';
import { query } from '$app/server';
import * as db from '$lib/server/database';

// バッチクエリ: 複数の都市の天気を一度に取得
export const getWeather = query.batch(v.string(), async (cities) => {
	// citiesは呼び出し元の引数の配列
	const weather = await db.sql`
    SELECT * FROM weather
    WHERE city = ANY(${cities})
  `;

	const lookup = new Map(weather.map((w) => [w.city, w]));

	// 各呼び出しに対して結果を返す関数
	return (city: string) => lookup.get(city);
});

<!-- 複数のコンポーネントから同時に呼び出しても1回のDBアクセス -->
<script lang="ts">
  import { getWeather } from './weather.remote';

  let { cities } = $props();
</script>

{#each cities as city}
  <!-- これらの呼び出しは自動的にバッチ化される -->
  <CityWeather weather={await getWeather(city.id)} />
{/each}

<script lang="ts">
  import { getPosts } from './data.remote';
</script>

<button onclick={() => getPosts().refresh()}>
  新着記事を確認
</button>

// src/routes/blog/data.remote.ts
import * as v from 'valibot';
import { error, redirect } from '@sveltejs/kit';
import { form } from '$app/server';
import * as db from '$lib/server/database';
import * as auth from '$lib/server/auth';

export const createPost = form(
	v.object({
		title: v.pipe(v.string(), v.nonEmpty('タイトルは必須です')),
		content: v.pipe(v.string(), v.nonEmpty('本文は必須です')),
	}),
	async ({ title, content }) => {
		// 認証チェック
		const user = await auth.getUser();
		if (!user) {
			error(401, '認証が必要です');
		}

		const slug = title.toLowerCase().replace(/ /g, '-');

		await db.sql`
      INSERT INTO posts (slug, title, content, author_id)
      VALUES (${slug}, ${title}, ${content}, ${user.id})
    `;

		// 作成した記事ページにリダイレクト
		redirect(303, `/blog/${slug}`);
	}
);

<!-- src/routes/blog/new/+page.svelte -->
<script lang="ts">
  import { createPost } from '../data.remote';
</script>

<h1>新規記事作成</h1>

<form {...createPost}>
  <label>
    <h2>タイトル</h2>
    {#each createPost.fields.title.issues() as issue}
      <p class="error">{issue.message}</p>
    {/each}
    <input {...createPost.fields.title.as('text')} />
  </label>

  <label>
    <h2>本文</h2>
    {#each createPost.fields.content.issues() as issue}
      <p class="error">{issue.message}</p>
    {/each}
    <textarea {...createPost.fields.content.as('text')}></textarea>
  </label>

  <button>投稿する</button>
</form>

// ネストしたオブジェクトと配列の例
const profileSchema = v.object({
	name: v.string(),
	photo: v.file(),
	info: v.object({
		height: v.number(),
		likesDogs: v.optional(v.boolean(), false),
	}),
	attributes: v.array(v.string()),
});

export const createProfile = form(profileSchema, async (data) => {
	// dataは型安全
	console.log(data.info.height); // number
});

<form {...createProfile} enctype="multipart/form-data">
  <input {...createProfile.fields.name.as('text')} />
  <input {...createProfile.fields.photo.as('file')} />
  <input {...createProfile.fields.info.height.as('number')} />
  <input {...createProfile.fields.info.likesDogs.as('checkbox')} />

  <h3>特徴</h3>
  <input {...createProfile.fields.attributes[0].as('text')} />
  <input {...createProfile.fields.attributes[1].as('text')} />

  <button>送信</button>
</form>

import * as v from 'valibot';
import { invalid } from '@sveltejs/kit';
import { form } from '$app/server';
import * as db from '$lib/server/database';

export const register = form(
	v.object({
		email: v.pipe(v.string(), v.email('有効なメールアドレスを入力してください')),
		username: v.pipe(v.string(), v.minLength(3, '3文字以上必要です')),
	}),
	async (data, issue) => {
		// データベースで重複チェック
		const existing = await db.findUserByEmail(data.email);
		if (existing) {
			// フィールド固有のエラーを追加
			invalid(issue.email('このメールアドレスは既に使用されています'));
		}
	}
);

<script lang="ts">
  import { createPost } from '../data.remote';
  import { showToast } from '$lib/toast';
</script>

<form {...createPost.enhance(async ({ form, data, submit }) => {
  try {
    await submit();
    form.reset();
    showToast('投稿しました！');
  } catch (error) {
    showToast('エラーが発生しました');
  }
})}>
  <!-- フォーム内容 -->
</form>

// サーバー側で更新
export const createPost = form(schema, async (data) => {
	// 記事を作成
	await db.createPost(data);

	// getPosts()を自動的に再取得
	await getPosts().refresh();

	redirect(303, '/blog');
});

<!-- クライアント側で更新を指定 -->
<form {...createPost.enhance(async ({ submit }) => {
  await submit().updates(getPosts());
})}>

// src/routes/likes.remote.ts
import * as v from 'valibot';
import { query, command } from '$app/server';
import * as db from '$lib/server/database';

export const getLikes = query(v.string(), async (postId) => {
	const [row] = await db.sql`
    SELECT likes FROM posts WHERE id = ${postId}
  `;
	return row.likes;
});

export const addLike = command(v.string(), async (postId) => {
	await db.sql`
    UPDATE posts SET likes = likes + 1 WHERE id = ${postId}
  `;

	// 関連するクエリを更新
	getLikes(postId).refresh();
});

<script lang="ts">
  import { getLikes, addLike } from './likes.remote';
  import { showToast } from '$lib/toast';

  let { postId } = $props();
</script>

<button
  onclick={async () => {
    try {
      await addLike(postId);
    } catch (error) {
      showToast('エラーが発生しました');
    }
  }}
>
  いいね！
</button>

<p>いいね数: {await getLikes(postId)}</p>

<script lang="ts">
  import { getLikes, addLike } from './likes.remote';

  let { postId } = $props();
</script>

<button
  onclick={async () => {
    // 楽観的に+1してから実際の更新を待つ
    await addLike(postId).updates(
      getLikes(postId).withOverride((n) => n + 1)
    );
  }}
>
  いいね！
</button>

// src/routes/blog/data.remote.ts
import { prerender } from '$app/server';
import * as db from '$lib/server/database';

// ビルド時にデータを取得し、CDNから配信
export const getPosts = prerender(async () => {
	const posts = await db.sql`
    SELECT title, slug FROM posts ORDER BY created_at DESC
  `;
	return posts;
});

import * as v from 'valibot';
import { prerender } from '$app/server';

export const getPost = prerender(
	v.string(),
	async (slug) => {
		const post = await db.getPost(slug);
		return post;
	},
	{
		// プリレンダリングする入力値を指定
		inputs: () => ['first-post', 'second-post', 'third-post'],
		// trueにすると、プリレンダリングされていない値でも動的に取得可能
		dynamic: true,
	}
);

import { getRequestEvent, query } from '$app/server';
import { findUser } from '$lib/server/database';

export const getProfile = query(async () => {
	const { cookies } = getRequestEvent();
	const user = await findUser(cookies.get('session_id'));

	return {
		name: user.name,
		avatar: user.avatar,
	};
});