#TypeScript #full-stack #trpc

上一节将 Trpc 基本运行起来，但是只使用了一个基础的查询方法。这一节将进一步使用 Trpc 进行数据查询，不过是携带参数的数据查询。

服务端配置

1. 添加一个带参数查询的 Procedure server/index.ts

实现一个 findUserById 的 Procedure，接受一个来自客户端的输入，然后根据用户输入返回用户信息。

import { publicProcedure, router } from "./trpc";
import { createHTTPServer } from "@trpc/server/adapters/standalone";  

const appRouter = router({
	// 添加procedure
	userList: publicProcedure.query(() => {
		....
	}),
	// 新增带参数的查询
	findUserById: publicProcedure.input(val => val).query((opt) => {
		const { input }: any = opt;
		// 模拟查询用户
		const user = {
			id: input.id,
			name: 'Alice',
		};
		return user;
	})
});

const server = createHTTPServer({
    router: appRouter
});

...

需要注意两点：

• 相比之前的 publicProcedure.query() 中间需要增加 input() 方法的调用，且 input 方法接受一个函数作为参数，目的是在此过程可以进行参数处理如参数校验等。如果不增加则个方法调用仍会到 query 方法，只不过这个方法中的形参 opt 会没有输入的参数。
• query 的回调函数增加一个参数，如果想要从这个参数中获取输入值需要获取固定属性 input，如参数名为 opt, 则需要通过 opt.input 获取。

2. 重启服务端
   执行 ts-node server/index.ts

客户端使用

客户端只需要参考之前的 userList 直接调用 query() 方法，只不过这次需要传递参数。

import { createTRPCClient, httpBatchLink } from "@trpc/client";
import type { AppRouter } from "../server";

const trpc = createTRPCClient<AppRouter>({
    links: [
        httpBatchLink({
            url: 'http://localhost:8080',
        })
    ]
})  

trpc.findUserById.query({ id: 1 }).then((data) => {
    console.log('User=', data);
});

运行客户端程序

ts-node client/index.ts

可以看到确实输出了我们在 findUserById 中的数据。