远程函数

约 646 字大约 2 分钟

2026-09-23

远程函数就是在服务器端定义的函数, 可以在客户端调用, 也就是客户端可以通过远程函数来调用服务器端的函数.

在当前版本中, 还需要打开实验性功能才能使用

// vite.config.ts
import adapter from '@sveltejs/adapter-auto'
import { sveltekit } from '@sveltejs/kit/vite'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    sveltekit({
      compilerOptions: {
        // Force runes mode for the project, except for libraries. Can be removed in svelte 6.
        runes: ({ filename }) =>
          filename.split(/[/\\]/).includes('node_modules') ? undefined : true,

        // 1.添加 async 实验性功能
        experimental: {
          async: true
        }
      },

      // adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list.
      // If your environment is not supported, or you settled on a specific environment, switch out the adapter.
      // See https://svelte.dev/docs/kit/adapters for more information about adapters.
      adapter: adapter(),

      typescript: {
        config: (config) => {
          config.include.push('../drizzle.config.ts')
        }
      },

      // 2.添加远程函数实验性功能
      experimental: {
        remoteFunctions: true
      }
    })
  ]
})

在打开实验功能后, 我们就可以在服务器端定义远程函数, 并在客户端调用了.

远程函数需要定义在 xxx.remote.ts 文件中, 不能直接定义在 xxx.ts 文件中, 因为远程函数是需要在服务器端执行的, 所以必须在服务器端定义.

query

query 适用于普通的获取数据操作

/src/routes/posts/page.remote.ts

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

export const getPosts = query(async () => {
  const posts = await db.query.post.findMany()

  return posts
})

/src/routes/posts/+page.svelte

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

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

/src/routes/login/page.remote.ts

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

export const newPost = form(
  v.object({
    title: v.string(),
    content: v.string()
  }),
  async ({ title, content }) => {
    // 这里就是处理表单提交的逻辑, 可以是数据库操作, 也可以是其他操作
    console.log('title:', title)
    console.log('content:', content)

    return { success: true }
  }
)

/src/routes/login/+page.svelte

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

<form {...newPost}>
	<input {...newPost.fields.title.as('text')} />
	<input {...newPost.fields.content.as('text')} />

	<button type="submit">Submit</button>
</form>