tRPC-SvelteKit 示例项目教程
目录结构及介绍
trpc-sveltekit-example/
├── src/
│ ├── lib/
│ │ ├── trpc/
│ │ │ ├── client.ts
│ │ │ ├── context.ts
│ │ │ └── router.ts
│ ├── routes/
│ │ └── +page.svelte
│ ├── app.d.ts
│ ├── hooks.ts
│ └── routes.ts
├── static/
├── env
├── .eslintignore
├── .eslintrc.cjs
├── .gitignore
├── .prettierignore
├── .prettierrc
├── LICENSE
├── README.md
├── package.json
├── svelte.config.js
├── tsconfig.json
├── vite.config.ts
└── yarn.lock
主要目录和文件介绍
src/
: 包含项目的源代码。lib/
: 包含项目的主要逻辑和工具函数。trpc/
: 包含 tRPC 相关的文件。client.ts
: tRPC 客户端配置。context.ts
: tRPC 上下文配置。router.ts
: tRPC 路由配置。
routes/
: 包含项目的路由和页面组件。+page.svelte
: 示例页面组件。
app.d.ts
: 应用的类型定义文件。hooks.ts
: SvelteKit 钩子文件。routes.ts
: 路由配置文件。
static/
: 静态资源文件夹。env
: 环境变量文件。.eslintignore
: ESLint 忽略配置。.eslintrc.cjs
: ESLint 配置文件。.gitignore
: Git 忽略配置。.prettierignore
: Prettier 忽略配置。.prettierrc
: Prettier 配置文件。LICENSE
: 项目许可证。README.md
: 项目说明文档。package.json
: 项目依赖和脚本配置。svelte.config.js
: SvelteKit 配置文件。tsconfig.json
: TypeScript 配置文件。vite.config.ts
: Vite 配置文件。yarn.lock
: Yarn 锁定文件。
项目的启动文件介绍
src/routes/+page.svelte
这是项目的示例页面组件,展示了如何调用 tRPC 过程。
<script lang="ts">
import { page } from '$app/stores';
import { trpc } from '$lib/trpc/client';
let greeting: string;
async function fetchGreeting() {
greeting = await trpc.greeting.query();
}
fetchGreeting();
</script>
<main>
<h1>{greeting}</h1>
</main>
src/hooks.ts
这是 SvelteKit 的钩子文件,用于处理服务器端和客户端的钩子逻辑。
import type { Handle } from '@sveltejs/kit';
import { createContext } from '$lib/trpc/context';
import { router } from '$lib/trpc/router';
import { createTRPCHandle } from 'trpc-sveltekit';
export const handle: Handle = async ({ event, resolve }) => {
const response = await createTRPCHandle({
url: '/trpc',
router,
createContext,
event,
resolve,
});
return response;
};
项目的配置文件介绍
svelte.config.js
这是 SvelteKit 的配置文件,包含了项目的构建和部署配置。
import adapter from '@sveltejs/adapter-auto';
import preprocess from 'svelte-preprocess';
/** @type {import('@sveltejs/kit').Config} */
const config = {
preprocess: preprocess(),
kit: {
adapter: adapter(),
},
};
export default config;