代码库

马好在本地区以最小代码编写的trpc

环境

Windows10 – Windows10操作系统
VScode – VScode编程环境
Next.13 pages router – 下一页13页路由器
TypeScript >= 4.7.0 – TypeScript版本大于等于4.7.0

在tsconfig.json中设置”strict”为true。
※建议使用这个配置。

下一步。Next.13 App router已经稳定版本，但周围还在努力适应。
tRPC也不例外，根据GitHub的问题跟踪，目前正在进行适配。

在预定的地方使用

使用 tRPC 的地方
数据库 — (ORM Prisma 等) — 服务器 — (tRPC) — 本地

在DB服务器之间，我们使用ORM Prisma和其他工具。而在服务器本地之间，我们使用tRPC。

tRPC (GitHub 代码库)

trpc/trpc: ?‍♀️ 快速迁移且无故障。轻松实现端到端的类型安全API。
https://github.com/trpc/trpc

GitHub 上的 Star 历史

星星的数量

2023年7月21日，27,200人
2023年5月27日，25,900人
2023年1月25日，20,000人
2023年1月23日，19,800人
2023年1月15日，19,200人
2022年9月22日，13,100人

安装

我会移动到建立项目的地方。

安装 Next.js

使用最新版本的npx create-next-app命令在当前目录中创建一个新的Next.js应用程序。

应用路由不予选择。
其余所有内容都将按默认安装。

安装与tRPC相关的库。

运行以下命令安装所需的 npm 软件包：npm install @trpc/server @trpc/client @trpc/next @trpc/react-query zod @tanstack/react-query

通信プロトコル tRPC の最小コード

src\pages_app.tsx 源代码文件

import '@/styles/globals.css'
import type { AppProps } from 'next/app'
import { trpc } from "../utils/trpc"

function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

// AppをtRPCでラップしています。
export default trpc.withTRPC(App)

src\pages\index.tsx 的原始文件

// クライアント側：サイトのトップページ
import { trpc } from "../utils/trpc"

export default function Home() {
  // CTRL+Click で `greeting` をクリックすると関数の定義へ飛びます。
  const result = trpc.greeting.useQuery({ name: "VNS.BLUE" })

  // データが取得できない場合は Loadingが表示されます。
  if (!result.data) return <h1>Loading...</h1>

  return (
    <div>
      {/* 型が定義されており、オートコンプリートも可能です。
      下記のdataにマウスカーソルを乗せるとresultの型が見えます。
      下記のtextをマウスでCTRL+Clickすると、定義されている場所へ飛びます
      下記のtextをマウス右クリックしてメニューのシンボルの名前変更(F2キー)で、
      クラアントとサーバーの両方の名前を同時に変更します。
      (要:VScode) */}
      <h1>{result.data.text}</h1>
    </div>
  )
}

src\utils\trpc.ts的原始文件

// クライアント側
// Next.jsのAPI エンドポイントに接続を通すための設定です
import { httpBatchLink } from "@trpc/client"
import { createTRPCNext } from "@trpc/next"
import type { AppRouter } from "../pages/api/trpc/[trpc]"

function getBaseUrl() {
  // ブラウザか、そうでないかの判断します。
  if (typeof window !== "undefined") {
    //  ブラウザでは、相対URLを返します。
    return ""
  }
  // サーバーでレンダリングする場合は、絶対的なURLを返します。
  // 例：vercelを利用している場合
  if (process.env.VERCEL_URL) {
    return `https://${process.env.VERCEL_URL}`
  }

  // 上記のURLが設定されていない場合localhostを返します。
  return `http://localhost:${process.env.PORT ?? 3000}`
}

// Next.jsで使うtRPCクライアントを作ります
export const trpc = createTRPCNext<AppRouter>({
  config() {
    return {
      links: [
        // バッチリンクは処理をまとめてしまうことです。
        // データローダパターンの一種で、
        // 通信負荷を軽くします。
        httpBatchLink({
          // [tRPC].tsの設定場所
          url: getBaseUrl() + "/api/trpc",
        }),
      ],
    }
  },
})

源码\页面\api\trpc[trpc].ts

// サーバー側
// これはアプリのAPIハンドラですべてのAPIルートを含んでいます。
// 大きなアプリではこのファイルを複数のファイルに分割するとよいでしょう。
// initTRPC関数は、TRPCサーバーのインスタンスを作成するために使用されます。
import { initTRPC } from "@trpc/server"
// trpcNextはNext.jsアプリケーションでTRPCサーバーを使用するためのアダプターです。
import * as trpcNext from "@trpc/server/adapters/next"
// 入力スキーマを定義するために使用されるスキーマ定義言語
import { z } from "zod"

const t = initTRPC.create()

// TRPCルーターを作成します。
// appRouterは、t.router()関数を使用して作成されます。
const appRouter = t.router({
  // greetingという名前のプロシージャが定義されます。
  greeting: t.procedure
    // これはプロシージャの入力スキーマです。
    // これを変更すると、クライアントの型エラーがすぐに表示されます。
    // inputオブジェクトを受け取り、textプロパティを持つオブジェクトを返します。
    // inputオブジェクトは、zodを使用して定義された入力スキーマに従います。
    .input(
      z
        .object({
          // nameプロパティは、文字列またはnullを持つことができます。
          // nullish()メソッドは、nullまたはundefinedを許容します。
          name: z.string().nullish(),
        })
        .nullish(),
    )
    .query(({ input }) => {
      // これをクライアントに返します
      return {
        text: `hello ${input?.name ?? "world"}`,
      }
    }),
})

// エクスポートAPIハンドラ
// API の型定義のみエクスポートします。
// 実際の実装は一切クライアントに公開されません。
export type AppRouter = typeof appRouter

// エクスポートAPIハンドラ
export default trpcNext.createNextApiHandler({
  // routerオプションには、appRouterオブジェクトが渡されます。
  router: appRouter,
  // createContextオプションは、APIリクエストごとに呼び出される関数を指定します。
  // この例では、空のオブジェクトを返します。
  createContext: () => ({}),
})

在本地服务器上进行功能检查。

在完成复制源代码后，要运行本地服务器。

请进行 npm run dev 命令操作。

http://localhost:3000/ 只需要一個選項，請用中文來解釋。

你好VNS.BLUE 如果显示成功就好了。

杂学

这只是一份备忘录，没有必要特别阅读。
关于远程过程调用（RPC）的历史等。

tRPC方程

tRPC – 快速高效且无破坏。轻松创建安全的端到端API。| tRPC
https://trpc.io/

例子 (lì zi)

公式示例应用程序 | tRPC
https://trpc.io/docs/v10/example-apps

下一篇文章

请提供更多上下文。

一起来学习 tRPC 吧！
https://www.learnwithjason.dev/let-s-learn-trpc

第21集：亚历克斯·乔汉森 – tRPC，Zart
https://devtools.fm/episode/21?view=TRANSCRIPT

第21集的主题是亚历克斯·乔汉森 – tRPC，Zart。链接为https://devtools.fm/episode/21?view=TRANSCRIPT。