tRPC-SvelteKit 教程

tRPC-SvelteKit 教程

trpc-sveltekit End-to-end typesafe APIs with tRPC.io for your SvelteKit applications. 项目地址: https://gitcode.com/gh_mirrors/tr/trpc-sveltekit

本教程旨在引导您了解并快速上手 tRPC-SvelteKit，一个专为 SvelteKit 应用设计的端到端类型安全 API 框架。我们将逐步探索其关键组件，包括项目的目录结构、启动文件以及配置文件。

1. 项目目录结构及介绍

tRPC-SvelteKit 的典型项目结构简洁而高效，以下是一些核心文件和目录的概述：

.
├── lib/
│   ├── trpc/
│       ├── context.ts  <!-- 定义TRPC上下文 -->
│       └── router.ts   <!-- 定义TRPC路由器 -->
├── src/
│   ├── hooks/         <!-- SvelteKit的服务器端处理逻辑 -->
│   │   └── server.ts  <!-- 包含tRPC-SvelteKit的处理函数 -->
│   ├── +page.svelte    <!-- 示例页面调用tRPC方法 -->
│   └── index.html     <!-- 主入口HTML文件 -->
├── package.json        <!-- 项目元数据和脚本 -->
└── README.md           <!-- 项目说明文档 -->

• lib/trpc/router.ts：存放您的tRPC路由器定义，这里是API逻辑所在。
• lib/trpc/context.ts：负责创建和管理tRPC上下文，对于每个请求至关重要。
• src/hooks/server.ts：SvelteKit的钩子，用于集成tRPC服务器处理。
• src/+page.svelte：示例页面，展示如何在客户端使用tRPC客户端调用服务端API。

2. 项目的启动文件介绍

在 src/hooks/server.ts 文件中，您将找到与tRPC相关的服务器端配置和处理逻辑。这一步是应用启动的关键，它通过 createTRPCHandle 函数结合了路由和上下文创建，确保当请求来到时，tRPC可以正确响应：

import { createContext } from '$lib/trpc/context';
import { router } from '$lib/trpc/router';
import { Handle } from '@sveltejs/kit';
import { createTRPCHandle } from 'trpc-sveltekit';

export const handle: Handle = createTRPCHandle([
  router,
  createContext,
]);

此文件通常不直接作为启动文件执行，而是由 SvelteKit 在内部管理和调用，通过其内置的构建和服务器机制启动应用。

3. 项目的配置文件介绍

package.json

虽然不是传统意义上的“配置”文件，但 package.json 在项目中扮演着至关重要的角色，尤其是在指定依赖项、脚本命令和元数据方面。例如，安装tRPC-SvelteKit及其相关依赖，可通过下列命令来完成：

"dependencies": {
  "trpc-sveltekit": "^version",
  "@trpc/server": "^version",
  "@trpc/client": "^version",
  "@sveltejs/adapter-node": "^version"
},

并且，运行或构建命令也会在这里定义，比如：

"scripts": {
  "dev": "svelte-kit dev",
  "build": "svelte-kit build",
  "preview": "svelte-kit preview",
  "check": "svelte-check --tsconfig ./tsconfig.json",
  "lint": "prettier --check '{*,public}/**/*.{html,css,js,svelte}'",
  "format": "prettier --write '{*,public}/**/*.{html,css,js,svelte}'"
}

vite.config.ts 和 svelte.config.js

特定于SvelteKit的配置可能位于这两个文件中。尽管tRPC-SvelteKit的直接配置需求不多，但在接入WebSocket支持等高级功能时，您可能会在 vite.config.ts 中添加插件，如 vitePluginTrpcWebSocket，以适应开发环境中的WebSocket升级逻辑：

// vite.config.ts
import { sveltekit } from '@sveltejs/kit/vite';
import { vitePluginTrpcWebSocket } from 'trpc-sveltekit/websocket';

const config = {
  plugins: [
    sveltekit(),
    vitePluginTrpcWebSocket(), // 添加WebSocket支持
  ],
};

export default config;

而 svelte.config.js 可用于调整SvelteKit行为，包括选择适配器（如 @sveltejs/adapter-node 或其他），但tRPC-SvelteKit的核心配置主要还是在上述提到的文件中完成。

通过理解和运用这些关键文件，您可以高效地开发和管理基于tRPC的SvelteKit应用程序。

trpc-sveltekit End-to-end typesafe APIs with tRPC.io for your SvelteKit applications. 项目地址: https://gitcode.com/gh_mirrors/tr/trpc-sveltekit