Adding comments to my Astro blog with PlanetScale & Prisma on Vercel Edge

// schema.prismagenerator 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)}

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;

import type { APIRoute } from 'astro';import { prisma } from '../../../lib/prisma-client';export const post: APIRoute = async ({ request }) => {  const formData = await request.formData();  const comment = formData.get('comment') ?? '';  const author = formData.get('author') ?? '';  const blogUrl = formData.get('blogUrl') ?? '';  const blog = await prisma.post.findFirst({    where: { url: blogUrl as string },  });  if (!blog) {    await prisma.post.create({      data: {        url: blogUrl as string,        Comment: {          create: {            author: author as string,            text: comment as string,          },        },      },    });  } else {    await prisma.comment.create({      data: {        author: author as string,        text: comment as string,        postId: blog.id,      },    });  }  return new Response(null, {    status: 200,  });};

import type { APIRoute } from 'astro';import { getCommentsForBlog } from '../../../lib/get-comments-for-blog';export const get: APIRoute = async ({ request }) => {  const params = new URLSearchParams(request.url.split('?')[1]);  const allCommentsInDbForPost = await getCommentsForBlog(    params.get('blogUrl')  );  return new Response(JSON.stringify(allCommentsInDbForPost), {    status: 200,  });};

import { defineConfig } from 'astro/config';import vercel from '@astrojs/vercel/edge';export default defineConfig({  output: 'server',  adapter: vercel(),});

// vite.config.jsexport default {  resolve: {    alias: {      '.prisma/client/edge': './node_modules/.prisma/client/edge.js',    },  },};

import type { PrismaClient } from '@prisma/client';let prisma: PrismaClient;if (process.env.NODE_ENV === 'development') {  import('@prisma/client').then(mod => (prisma = new mod.PrismaClient()));} else {  import('@prisma/client/edge').then(mod => (prisma = new mod.PrismaClient()));}export { prisma };