tRPC-SvelteKit 示例项目教程

tRPC-SvelteKit 示例项目教程

trpc-sveltekit-exampleA sample SvelteKit application built to illustrate the usage of ✨ trpc-sveltekit.项目地址:https://gitcode.com/gh_mirrors/tr/trpc-sveltekit-example

目录结构及介绍

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;

`

trpc-sveltekit-exampleA sample SvelteKit application built to illustrate the usage of ✨ trpc-sveltekit.项目地址:https://gitcode.com/gh_mirrors/tr/trpc-sveltekit-example