在 Astro 及其 (React) 岛屿中使用 TRPC

系统管理员 2024-03-16 21:01 51阅读 0赞

我开始在工作中的一些 Next.js 项目中使用[TRPC][]，并且非常喜欢端到端的类型安全性，这为开发人员提供了使用 API 的能力。  
所以我决定也在我自己的网站上实施 TRPC，它使用的是[Astro][]。  
开始在 Astro 中使用 TRPC 需要采取几个步骤。

### 安装所需的包 ###

<code>npm install @tanstack/react-query @trpc/client @trpc/server @trpc/react-query
 </code>

### 设置 TRPC 上下文 ###

<code>// /src/server/context.ts
 
 import { getUser } from '@astro-auth/core';
 import type { inferAsyncReturnType } from '@trpc/server';
 import type { FetchCreateContextFnOptions } from '@trpc/server/adapters/fetch';
 
 export function createContext({
 req,
 resHeaders,
 }: FetchCreateContextFnOptions) {
 const user = getUser({ server: req });
 return { req, resHeaders, user };
 }
 
 export type Context = inferAsyncReturnType<typeof createContext>;
 </code>

因为我想在调用 TRPC 路由时检查当前登录的用户，所以我添加了`getUser()`来自`@astro-auth`. 通过将其添加到上下文中，我稍后可以在我的中间件中使用该用户（见下文）。

### 设置 TRPC 服务器 ###

<code>// src/server/router.ts
 
 import { initTRPC, TRPCError } from '@trpc/server';
 import { z } from 'zod';
 import { prisma } from '../lib/prisma';
 import type { Comment } from '@prisma/client';
 import type { Context } from './context';
 
 export const t = initTRPC.context<Context>().create();
 
 export const middleware = t.middleware;
 export const publicProcedure = t.procedure;
 
 const isAdmin = middleware(async ({ ctx, next }) => {
 if (!ctx.user) {
 throw new TRPCError({ code: 'UNAUTHORIZED' });
 }
 return next({
 ctx: {
 user: ctx.user,
 },
 });
 });
 
 export const adminProcedure = publicProcedure.use(isAdmin);
 
 export const appRouter = t.router({
 getCommentsForBlog: publicProcedure
 .input(z.string())
 .query(async ({ input }) => {
 const blogUrl = input.replace('src/content', '').replace('.mdx', '');
 const commentsForBlogUrl = await prisma?.post.findFirst({
 where: { url: (blogUrl as string) ?? undefined },
 include: { Comment: { orderBy: { createdAt: 'desc' } } },
 });
 const allCommentsInDbForPost = commentsForBlogUrl?.Comment;
 return allCommentsInDbForPost ?? null;
 }),
 createCommentForBlog: publicProcedure
 .input(
 z.object({
 comment: z.string(),
 author: z.string(),
 blogUrl: z.string(),
 })
 )
 .mutation(async ({ input }) => {
 const { comment, blogUrl, author } = input;
 let commentInDb: Comment | undefined;
 const blog = await prisma?.post.findFirst({
 where: { url: blogUrl },
 });
 try {
 commentInDb = await prisma?.comment.create({
 data: {
 author: author ?? '',
 text: comment ?? '',
 post: {
 connectOrCreate: {
 create: {
 url: blogUrl ?? '',
 },
 where: {
 id: blog?.id ?? 0,
 },
 },
 },
 },
 });
 } catch (err) {
 console.error('Error saving comment', err);
 return { status: 'error', error: 'Error saving comment' };
 }
 if (!commentInDb) {
 return { status: 'error', error: 'Error saving comment' };
 }
 return { status: 'success' };
 }),
 deleteCommentForBlog: adminProcedure
 .input(z.object({ id: z.number() }))
 .mutation(async ({ input }) => {
 let deleteComment;
 try {
 deleteComment = await prisma?.comment.delete({
 where: {
 id: input.id,
 },
 });
 } catch (e) {
 return { status: 'error', error: 'Error deleting comment' };
 }
 if (!deleteComment) {
 return { status: 'error', error: 'Error deleting comment' };
 }
 
 return { status: 'success' };
 }),
 sendContactForm: publicProcedure
 .input(
 z.object({ email: z.string().nullable(), message: z.string().nullable() })
 )
 .mutation(async ({ input }) => {
 if (input.email && input.message) {
 await fetch(import.meta.env.FORMSPREE_URL!, {
 method: 'post',
 headers: {
 Accept: 'application/json',
 },
 body: JSON.stringify(input),
 }).catch(e => {
 console.error(e);
 return { status: 'error' };
 });
 return { status: 'success' };
 }
 return { status: 'missingdata' };
 }),
 });
 
 export type AppRouter = typeof appRouter;
 </code>

我创建了一个单独的过程`adminProcedure`，在其上应用了中间件。这将确保只有在有登录用户的情况下才能调用此过程中的任何路由。  
创建程序后，我声明了不同的路由。查看`deleteCommentForBlog`route 后面的路由`adminProcedure`。

### 在 Astro 中设置 API 路由 ###

<code>// /src/pages/api/trpc/[trpc].ts
 
 import { fetchRequestHandler } from '@trpc/server/adapters/fetch';
 import type { APIRoute } from 'astro';
 import { createContext } from '../../../server/context';
 import { appRouter } from '../../../server/router';
 
 export const all: APIRoute = ({ request }) => {
 return fetchRequestHandler({
 endpoint: '/api/trpc',
 req: request,
 router: appRouter,
 createContext,
 });
 };
 </code>

我将使用[获取适配器][Astro]来处理从客户端到 TRPC 路由器的请求。  
这是可能的，因为 Astro 使用内置的 Web 平台 API `Response`& `Request`。  
我们链接路由器和上下文，我们准备好设置 TRPC 客户端。

### 设置 TRPC 客户端 ###

因为我想在 Astro 页面和[岛屿][TRPC]上的客户端脚本中使用 TRPC 。  
我的岛屿是使用 React 创建的，我也将设置 TRPC React 客户端。

<code>// /src/client/index.ts
 
 import { createTRPCReact } from '@trpc/react-query';
 import { createTRPCProxyClient, httpBatchLink } from '@trpc/client';
 import type { AppRouter } from '../server/router';
 
 const trpcReact = createTRPCReact<AppRouter>();
 
 const trpcAstro = createTRPCProxyClient<AppRouter>({
 links: [
 httpBatchLink({
 url: 'http://localhost:3000/api/trpc',
 }),
 ],
 });
 
 export { trpcReact, trpcAstro };
 </code>

### 在 .astro 文件中使用 TRPC 客户端 ###

我将使用 Astro TRPC 客户端从`<script>`客户端上的标签与 TRPC 路由进行通信。

<code>// /src/pages/context/index.astro export const prerender = true; import Layout
 from '../../layouts/Layout.astro';
 
 <form id="contactForm">
 <label class="flex flex-col gap-2 mb-4" for="email">
 Your e-mail
 <input
 class="py-2 px-4 bg-white border-secondary border-2 rounded-lg"
 id="email"
 type="email"
 name="email"
 placeholder="info@example.com"
 required
 />
 </label>
 <label class="flex flex-col gap-2" for="message">
 Your message
 <textarea
 class="py-2 px-4 bg-white border-secondary border-2 rounded-lg"
 rows={3}
 id="message"
 name="message"
 placeholder="Hey, I would like to get in touch with you"
 required></textarea>
 </label>
 
 <button
 class="px-8 mt-4 py-4 bg-secondary text-white rounded-lg lg:hover:scale-[1.04] transition-transform disabled:opacity-50"
 type="submit"
 id="submitBtn"
 >
 Submit
 </button>
 <div id="missingData" class="text-red-500 font-bold hidden">
 Something went from while processing the contact form. Try again later.
 </div>
 <div id="error" class="text-red-500 font-bold hidden">
 Something went from while processing the contact form. Try again later.
 </div>
 </form>
 <script>
 import { trpcAstro } from '../../client';
 const form = document.getElementById('contactForm') as HTMLFormElement | null;
 form?.addEventListener('submit', async e => {
 e.preventDefault();
 const formData = new FormData(form);
 const result = await trpcAstro.sendContactForm.mutate({
 message: formData.get('message') as string | null,
 email: formData.get('email') as string | null,
 });
 if (result.status === 'success') {
 window.location.href = '/contact/thanks';
 }
 });
 </script>
 </code>

因为我使用的是 TRPC 客户端，所以我在代码上获得了自动完成功能，而且我确切地知道什么是预期的路线输入以及什么将被返回！

### 在 React islands 中使用 TRPC 客户端 ###

我决定与 合作`@tanstack/react-query`，以便在我的 React 代码中更轻松地获取/改变。  
因此，我需要实例化 TRPC 客户端**和**for `QueryClient`。 这是我在一个包装器组件中完成的，它包装了将调用 TRPC 路由的实际组件。`react-query`

实际组件最终看起来像这样：

<code>// /src/components/CommentOverview.tsx
 
 import type { Comment } from '@prisma/client';
 import { trpcReact } from '../client';
 
 const CommentOverview = () => {
 const upToDateCommentsQuery = trpcReact.getAllComments.useQuery();
 const { mutate: deleteComment } = trpcReact.deleteCommentForBlog.useMutation({
 onError: () => {
 console.error('Error deleting comment');
 },
 onSuccess: res => {
 if (res.status === 'error') {
 console.log('Succesfully deleted comment');
 }
 },
 onSettled: () => {
 upToDateCommentsQuery.refetch();
 },
 });
 
 const commentsReduced = upToDateCommentsQuery?.data?.reduce<{
 [key: string]: typeof upToDateCommentsQuery.data;
 }>(
 (acc, cur) => ({
 ...acc,
 [cur.post.url]: [...(acc[cur.post.url] || []), cur],
 }),
 {}
 );
 return (
 <div className="grid lg:grid-cols-2 gap-6">
 {commentsReduced
 ? Object.entries(commentsReduced).map(([key, val]) => {
 return (
 <div key={key}>
 <h2 className="font-bold mb-4 text-xl">{key}</h2>
 <ul className="flex flex-col gap-y-2">
 {val.map(comment => (
 <div className="flex gap-x-2" key={comment.id}>
 <button
 type="button"
 onClick={() => {
 deleteComment({ id: comment.id });
 }}
 >
 <svg
 xmlns="http://www.w3.org/2000/svg"
 fill="none"
 viewBox="0 0 24 24"
 strokeWidth={1.5}
 stroke="currentColor"
 className="min-w-[1.5rem] h-6 text-red-600"
 >
 <path
 strokeLinecap="round"
 strokeLinejoin="round"
 d="M9.75 9.75l4.5 4.5m0-4.5l-4.5 4.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
 />
 </svg>
 </button>
 <li>
 <span className="font-bold">{comment.author}</span> :{' '}
 {comment.text}
 </li>
 </div>
 ))}
 </ul>
 </div>
 );
 })
 : null}
 </div>
 );
 };
 
 export default CommentOverview;
 </code>

所以获取所有评论就像添加一样简单`const upToDateCommentQuery = trpcReact.getAllComments.useQuery()`。 
删除评论是通过添加`const { mutate: deleteComment } = trpcReact.deleteCommentForBlog.useMutation`然后在我的`<button>`点击处理程序调用中完成的`deleteComment({ id: comment.id });`。

希望这对您有所帮助！[代码可以在我的 GitHub][TRPC]  
上找到。

[TRPC]: https://zhifj.com
[Astro]: http://telegeram1.com