SvelteKit の remote functions でコンポーネント内で非同期にデータを取得する

export async function getServerSideProps() {
  const data = await fetchDataFromAPI();
  return {
    props: {
      data,
    },
  };
} 
 
export default function Page({ data }) {
  return <div>{data}</div>;
}

export default async function Component() {
  const data = await fetchDataFromAPI();
  return <div>{data}</div>;
}

import type { PageServerLoad } from "./$types";
 
export const load: PageServerLoad = async ({ params }) => {
  const { id } = params;
  const data = await fetchDataFromAPI(id);
  return { data };
};

<script lang="ts">
  import type { PageData } from "./$types";
 
  interface Props {
    data: PageData;
  }
 
  let { data }: Props = $props();
</script>
 
<div>
  <h1>Data: {data}</h1>
</div>

export default {
	kit: {
		experimental: {
			remoteFunctions: true,
		}
	},
  compilerOptions: {
    experimental: {
      async: true,
    },
  },
};

import { z } from "zod";
import { query } from "$app/server";
import { error } from "@sveltejs/kit";
 
type Todo = {
  userId: number;
  id: number;
  title: string;
  completed: boolean;
};
 
export const getTodoById = query(z.string(), async (id) => {
  const response = await fetch(
    `https://jsonplaceholder.typicode.com/todos/${id}`
  );
 
  if (!response.ok) {
    error(404, "Todo not found");
  }
  return response.json() as Promise<Todo>;
});

<script>
  import { getTodoById } from "../data.remote";
  import { page } from '$app/state';
</script>
<h1>Welcome to SvelteKit</h1>
 
<svelte:boundary>
	<h2>{(await getTodoById(page.params.id ?? "")).title}</h2>
 
	{#snippet pending()}
		<p>loading...</p>
	{/snippet}
 
  {#snippet failed(error)}
    {#if error instanceof Error}
      <p>Error: {error.message}</p>
    {:else}
      <p>Unknown error occurred.</p>
    {/if}
  {/snippet}
</svelte:boundary>

<script>
  import { getTodoById } from "../data.remote";
  import { page } from '$app/state';
 
  let todo = $derived(await getTodoById(page.params.id ?? ""));
</script>
<h1>Welcome to SvelteKit</h1>
 
<h2>{todo.title}</h2>

<script lang="ts">
	let { children } = $props();
</script>
 
<svelte:boundary>
	{@render children?.()}
 
	{#snippet pending()}
		<p>loading...</p>
	{/snippet}
</svelte:boundary>
 

{
    "type": "result",
    "result": "[{\"userId\":1,\"id\":2,\"title\":3,\"completed\":4},1,3,\"fugiat veniam minus\",false]"
}

<button onclick={() => getTodoById(page.params.id ?? "").refresh()}>
  Refresh
</button>

import { form } from "$app/server";
import { error } from "@sveltejs/kit";
 
export const createTodo = form(
  async (formData) => {
    const title = formData.get("title");
    if (typeof title !== "string") {
      error(400, "Title is required");
    }
 
    // ここでデータベースに保存する処理を記述
    console.log("Creating todo with title:", title);
 
    return { success: true };
  }
);

<script>
  import { createTodo } from "../data.remote";
</script>
 
<h1>Create a new Todo</h1>
<form {...createTodo}>
  <label>
    Title:
    <input type="text" name="title" required />
  </label>
  <button type="submit">Create</button>
</form>
 
<!-- フォームがサブミットされた後にのみメッセージを表示 -->
{#if createTodo.result?.success}
  <p>Todo created successfully!</p>
{/if}

{"type":"result","result":"[{\"success\":1},true]","refreshes":"[{}]"}

<form method="POST" action="?/remote=kib9q9%2FcreateTodo">
 
</form>

import { form } from "$app/server";
import { error } from "@sveltejs/kit";
 
const fetchTodos = query(async () => {
});
 
const getTodoById = query(z.string(), async (id) => {
});
 
export const createTodo = form(
  async (formData) => {
    const title = formData.get("title");
    if (typeof title !== "string") {
      error(400, "Title is required");
    }
 
    // ここでデータベースに保存する処理を記述
    console.log("Creating todo with title:", title);
 
    // 特定の query 関数のみ更新する
    fetchTodos.refresh();
 
    return { success: true };
  }
);

<script>
  import { createTodo, fetchTodos } from "../data.remote";
</script> 
 
<h1>Create a new Todo</h1>
<form {...createTodo.enhance(async ({form, data, submit}) => {
  try {
    await submit().updates(fetchTodos());
    form.reset();
 
    console.log("Todo created successfully:", data);
  } catch (e) {
    console.error("Failed to create todo:", e);
  }
})}>
  <label>
    Title:
    <input type="text" name="title" required />
  </label>
  <button type="submit">Create</button>
</form>

await submit().updates(
  fetchTodos.withOverride((todos) => [
    ...todos,
    { id: Math.random(), title, completed: false },
  ])
);

import { command } from "$app/server";
import z from "zod";
 
export const toggleTodo = command(
  z.object({
    id: z.string(),
    completed: z.boolean(),
  }),
  async ({ id, completed }) => {
    // ここでデータベースのトグル処理を記述
    console.log("Toggling todo with id:", id, "to", completed);
    return { success: true };
  }
);

<script lang="ts">
  import { fetchTodos, toggleTodo } from "./data.remote";
 
  let todos = $derived(await fetchTodos());
</script>
 
<h1>Todo List</h1>
 
<ul>
  {#each todos as todo}
    <li>
      <a href={`/todos/${todo.id}`}>{todo.title}</a>
      <button onclick={async () => {
        try {
          await toggleTodo({ id: todo.id.toString(), completed: !todo.completed });
        } catch (e) {
          console.error("Failed to toggle todo:", e);
        }
      }}>
        {todo.completed ? '✔️' : '❌'}
      </button>
    </li>
  {/each}
</ul>

import { prerender } from "$app/server";
 
export const getPosts = prerender(async () => {
  const response = await fetch("https://jsonplaceholder.typicode.com/posts");
  return response.json();
});

export const getPostById = prerender(
  z.string(),
  async (id) => {
    const response = await fetch(
      `https://jsonplaceholder.typicode.com/posts/${id}`
    );
    return response.json() as Promise<Post>;
  },
  {
    inputs: () => ["1", "2", "3"],
  }
);

export const getPostById = prerender(
  z.string(),
  async (id) => {
    const response = await fetch(
      `https://jsonplaceholder.typicode.com/posts/${id}`
    );
    return response.json() as Promise<Post>;
  },
  {
    dynamic: true,
    inputs: () => ["1", "2", "3"],
  }
);