mcpField
S
sveltekit-remote-functions

sveltekit-remote-functions

github.com/spences10开发94427 次安装2 周前更新
代码仓库

关于 sveltekit-remote-functions

这项技能介绍如何使用 SvelteKit 的实验性 Remote Functions，实现由服务器执行的读取、表单、修改和预渲染数据操作，并涵盖验证、批处理与查询更新。

主要功能

  1. 01选择 query、form、command 或 prerender
  2. 02使用 Standard Schema 验证输入
  3. 03批处理 query 调用
  4. 04控制客户端发起的查询更新

适用场景

  1. 01在 SvelteKit 中实现服务器端读取
  2. 02添加渐进增强表单
  3. 03通过批处理查询避免 N+1 读取

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/spences10/svelte-skills-kit --skill sveltekit-remote-functions

安装后在 Claude Code 中输入/sveltekit-remote-functions确认已加载。

附带文件README.mdreferences/remote-functions.md

详细介绍

SvelteKit 远程函数

当前状态

SvelteKit 2.58 中的远程函数仍处于实验阶段。在 svelte.config.js 中启用：

export default {
	kit: { experimental: { remoteFunctions: true } },
	compilerOptions: { experimental: { async: true } } // only for await in components
};

快速入门

文件命名： 从 *.remote.ts 或 *.remote.js 导出远程函数。 远程文件可以放在 src 下的任何位置，但不能放在 src/lib/server 中。

选择哪个函数？

  • 动态读取 → query()
  • 渐进式表单 → form()
  • 事件处理器变更 → command()
  • 构建时／静态读取 → prerender()

示例

// posts.remote.ts
import { command, query, requested } from '$app/server';
import * as v from 'valibot';

export const getPosts = query(v.object({ tag: v.optional(v.string()) }), async (filter) => {
	return db.posts.find(filter);
});

export const createPost = command(v.object({ title: v.string() }), async (data) => {
	await db.posts.create(data);

	for (const { query } of requested(getPosts, 5)) {
		void query.refresh();
	}
});

客户端：

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

	const posts = $derived(await getPosts({ tag: 'svelte' }));
</script>

<button onclick={() => createPost({ title: 'New' }).updates(getPosts)}>
	Create
</button>

当前规则

  • 远程函数始终在服务端运行，即使从浏览器调用也是如此。
  • 参数和返回值使用 devalue；避免使用函数、类实例、符号、循环引用和 RegExp。
  • 使用 Standard Schema（valibot、zod、arktype 等）验证对外暴露的输入，或有意使用 .unchecked／'unchecked'。
  • query.batch() 会批处理来自同一宏任务的调用，以解决 n+1 读取问题。
  • form().enhance() 的 submit() 在提交有效／成功时返回 true，在验证失败时返回 false。
  • .updates() 由客户端请求；服务端处理器必须通过 requested(queryFn, limit) 明确启用。
  • requested() 现在会返回 { arg, query }；在绑定的实例上调用 query.refresh()／query.set(...)。
  • requested() 必须提供 limit，以限制由客户端控制的刷新请求。
  • 在 command/form 处理器中，使用 void query.refresh()／void query.set(value)；SvelteKit 会等待并序列化这些更新。
  • 如果需要渐进式增强，优先使用 form() 而非 command()。
  • 对于每次部署最多变化一次的数据，使用 prerender()。
  • 最后验证时间： SvelteKit 2.58.0，2026-04-24

参考文件

评论

支持 Markdown