使用 Vercel Edge 上的 PlanetScale 和 Prisma 向我的 Astro 博客添加评论

约定不等于承诺〃 2024-03-16 21:00 97阅读 0赞

在我[使用 Astro 创建我的博客平台][Astro]后，我列表中的下一件事是让人们可以（匿名）在博客文章上发表评论。  
为此，我需要在我的架构中添加一个数据库。

### 技术选择 ###

我选择[PlanetScale 是][Astro]因为它是无服务器和 MySQL，这是我的两个标准。  
为了与我的 PlanetScale 数据库通信，我选择使用[Prisma][Astro]，一个 Node.js 和 TypeScript ORM。

### 设置棱镜 ###

我首先添加 Prisma 客户端：`npm install prisma @prisma/client`.  
安装后，我将 Prisma 模式添加到我的代码库中：

<code>// schema.prisma
 
 generator client {
 provider = "prisma-client-js"
 previewFeatures = ["referentialIntegrity"]
 }
 
 datasource db {
 provider = "mysql"
 url = env("DATABASE_URL")
 relationMode = "prisma"
 }
 
 model Post {
 id Int @id @default(autoincrement())
 createdAt DateTime @default(now())
 url String
 like_count Int @default(0)
 Comment Comment[]
 }
 
 model Comment {
 id Int @id @default(autoincrement())
 createdAt DateTime @default(now())
 text String
 author String
 postId Int
 post Post @relation(fields: [postId], references: [id], onDelete: Cascade)
 }
 </code>

然后它变得有点棘手。  
因为我是在Vercel的Edge网络上部署我的博客平台，平台到数据库的连接不能[有持久连接][Astro]。  
经过一些研究，我发现 Prisma 提供了一个名为`Prisma Data Platform`.  
一旦我在数据平台上创建了一个帐户，我就能够创建一个`Data Proxy`，它为我提供了一个连接字符串以在我的应用程序中使用。  
这个连接字符串是我需要放入`DATABASE_URL`环境变量中的（在 中使用`prisma.schema`）。

为了根据我的 Prisma 架构生成 TypeScript 类型，我刚刚运行了，默认情况下，这将在本地项目的文件夹`npx prisma generate`中生成类型。`node_modules`

### 设置 PlanetScale ###

将模式从 Prisma 同步到 PlanetScale 就像`npx prisma db push`在终端中运行一样简单。

### 创建评论 ###

为了从我的前端与我的 API 路由进行通信，我选择使用[TanStack Query][Astro]，这是我最喜欢的工具，用于在 React 中处理客户端 API 调用。  
为博客文章添加和列出评论的前端代码如下所示（这部分我用 React 编写）：

<code>import type { Comment } from '@prisma/client';
 import { useQuery } from '@tanstack/react-query';
 import { useRef, useState, Fragment } from 'react';
 const CommentsUpvotes = ({
 initialComments,
 blogUrl,
 }: {
 initialComments?: Comment[];
 blogUrl: string;
 }) => {
 const formRef = useRef<HTMLFormElement>(null);
 const [formState, setFormState] = useState<'idle' | 'loading'>('idle');
 const upToDateCommentsQuery = useQuery({
 queryKey: [`comments-${blogUrl}`],
 queryFn: async () => {
 const allCommentsInDb = await fetch(
 `/api/comments/list?blogUrl=${blogUrl}`
 );
 const allCommentsInDbJson = await allCommentsInDb.json();
 return allCommentsInDbJson as Comment[];
 },
 initialData: initialComments,
 });
 const onSubmit = async (e: React.FormEvent) => {
 setFormState('loading');
 e.preventDefault();
 if (e.currentTarget) {
 const formData = new FormData(e.currentTarget as HTMLFormElement);
 formData.set('blogUrl', blogUrl);
 await fetch('/api/comments/create', {
 method: 'POST',
 body: formData,
 });
 formRef.current?.reset();
 upToDateCommentsQuery.refetch();
 }
 setFormState('idle');
 };
 return (
 <Fragment>
 <h2 className="text-xl lg:text-2xl mb-4 font-bold">Add a comment</h2>
 <form
 onSubmit={onSubmit}
 ref={formRef}
 className="flex flex-col lg:w-[50%] items-start"
 >
 <label className="flex flex-col mb-2" htmlFor="author">
 Author
 </label>
 <input
 className="py-2 px-4 bg-white border-secondary border-2 rounded-lg w-full"
 placeholder="Author"
 name="author"
 required
 />
 <label className="flex flex-col mb-2 mt-4" htmlFor="comment">
 Comment
 </label>
 <textarea
 className="py-2 px-4 bg-white border-secondary border-2 rounded-lg w-full"
 placeholder="Comment"
 required
 rows={4}
 name="comment"
 ></textarea>
 <button
 disabled={formState === 'loading'}
 className="px-8 mt-4 py-4 bg-secondary text-white rounded-lg lg:hover:scale-[1.04] transition-transform disabled:opacity-50 "
 type="submit"
 >
 {formState === 'loading' ? 'Submitting' : 'Submit comment'}
 </button>
 </form>
 
 <h2 className="text-xl lg:text-2xl mb-4 font-bold">Comments</h2>
 {upToDateCommentsQuery?.data && upToDateCommentsQuery?.data.length > 0 ? (
 <div className="flex flex-col gap-y-4">
 {upToDateCommentsQuery?.data?.map(comment => (
 <div key={comment.id} className="flex flex-col">
 <h3 className="font-bold">{comment.author}</h3>
 <div>{comment.text}</div>
 </div>
 ))}
 </div>
 ) : (
 <div className="mt-4">No comments yet. Be the first to add one!</div>
 )}
 </Fragment>
 );
 };
 
 export default CommentsUpvotes;
 </code>

用于创建博客的 API 路由代码如下所示：

列出帖子评论的代码如下所示：

### 设置“边缘”部分 ###

将 Astro 部署到 Vercel Edge 就像添加[带有 Vercel 集成的 Astro][Astro]并设置边缘一样简单`target`。  
我的 astro 配置（注意`edge`导入路径中的）：

我还必须[在 Vite 中为 Prisma 客户端配置一个别名][Astro]，以使其在 Vercel 和 Astro 上运行。

<code>// vite.config.js
 export default {
 resolve: {
 alias: {
 '.prisma/client/edge': './node_modules/.prisma/client/edge.js',
 },
 },
 };
 </code>

在 Vercel 上构建应用程序时，我们还想再次[生成客户端][Astro]以确保客户端`node_modules`也可用。  
在`package.json`我用`"build": "prisma generate --data-proxy && astro build"`这个。  
在代码中实例化 Prisma 客户端是在`lib/prisma-client.ts`.  
我在这里使用了来自 Node.js 的惰性导入，以使其在本地和 Vercel 上正常工作。

为了让我的代码也在本地运行，我需要更改`DATABASE_URL`环境变量以使其直接指向 PlanetScale，而不是通过 Prisma Proxy。[去我的博客][Astro]  
  
看看，然后添加评论 ;-)。[源代码可以在我的 Github][Github] 上找到。

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