Vercel Edge で PlanetScale と Prisma を使用して Astro ブログにコメントを追加する

情報 2023-06-24 22:54:08 訪問数: null

Astro を使用してブログ プラットフォームを作成した後、私のリストの次のことは、人々がブログ投稿に (匿名で) コメントできるようにすることでした。
このためには、スキーマにデータベースを追加する必要があります。

テクノロジーの選択

PlanetScaleを選択したのは、サーバーレスと MySQL、この 2 つの基準が私の基準だったからです。
PlanetScale データベースと通信するために、Node.js および TypeScript ORM であるPrismaを使用することにしました。

セットプリズム

まず、Prisma クライアントを追加します。npm install prisma @prisma/clientインストール
後、Prisma スキーマをコードベースに追加します。

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><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></span></span>

それから、少し難しくなります。
ブログ プラットフォームを Vercel の Edge ネットワークに展開しているため、プラットフォームからデータベースへの接続に永続的な接続を確立することはできません。
いくつかの調査の後、Prisma が というデータベースを提供していることがわかりましたPrisma Data Platform。
データ プラットフォームでアカウントを作成すると、作成することができData Proxy、アプリケーションで使用する接続文字列が提供されました。この接続文字列は、( で使用するために)環境変数
に入れる必要があるものです。DATABASE_URLprisma.schema

Prisma スキーマから TypeScript 型を生成するために、実行しました。デフォルトでは、ローカル プロジェクトのフォルダーnpx prisma generateに型が生成されます。node_modules

プラネットスケールを設定する

Prisma から PlanetScale へのスキーマの同期は、npx prisma db pushターミナルで実行するのと同じくらい簡単です。

コメントを作成する

フロントエンドから API ルートと通信するために、React でクライアント側 API 呼び出しを処理するためのお気に入りのツールであるTanStack Queryを使用することにしました。
ブログ投稿のコメントを追加およびリストするためのフロントエンド コードは次のようになります (この部分は React で書きました)。

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

      <span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">h2</span> <span style="color:var(--syntax-name-color)">className</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">"text-xl lg:text-2xl mb-4 font-bold"</span><span style="color:var(--syntax-text-color)">></span>Comments<span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">h2</span><span style="color:var(--syntax-text-color)">></span>
      <span style="color:var(--syntax-string-color)">{</span><span style="color:var(--syntax-name-color)">upToDateCommentsQuery</span><span style="color:var(--syntax-text-color)">?.</span><span style="color:var(--syntax-name-color)">data</span> <span style="color:var(--syntax-error-color)">&&</span> <span style="color:var(--syntax-name-color)">upToDateCommentsQuery</span><span style="color:var(--syntax-text-color)">?.</span><span style="color:var(--syntax-name-color)">data</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">length</span> <span style="color:var(--syntax-error-color)">></span> <span style="color:var(--syntax-literal-color)">0</span> <span style="color:var(--syntax-text-color)">?</span> <span style="color:var(--syntax-text-color)">(</span>
        <span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">div</span> <span style="color:var(--syntax-name-color)">className</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">"flex flex-col gap-y-4"</span><span style="color:var(--syntax-text-color)">></span>
          <span style="color:var(--syntax-string-color)">{</span><span style="color:var(--syntax-name-color)">upToDateCommentsQuery</span><span style="color:var(--syntax-text-color)">?.</span><span style="color:var(--syntax-name-color)">data</span><span style="color:var(--syntax-text-color)">?.</span><span style="color:var(--syntax-name-color)">map</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">comment</span> <span style="color:var(--syntax-error-color)">=></span> <span style="color:var(--syntax-text-color)">(</span>
            <span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">div</span> <span style="color:var(--syntax-name-color)">key</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">{</span><span style="color:var(--syntax-name-color)">comment</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">id</span><span style="color:var(--syntax-string-color)">}</span> <span style="color:var(--syntax-name-color)">className</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">"flex flex-col"</span><span style="color:var(--syntax-text-color)">></span>
              <span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">h3</span> <span style="color:var(--syntax-name-color)">className</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">"font-bold"</span><span style="color:var(--syntax-text-color)">></span><span style="color:var(--syntax-string-color)">{</span><span style="color:var(--syntax-name-color)">comment</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">author</span><span style="color:var(--syntax-string-color)">}</span><span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">h3</span><span style="color:var(--syntax-text-color)">></span>
              <span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">div</span><span style="color:var(--syntax-text-color)">></span><span style="color:var(--syntax-string-color)">{</span><span style="color:var(--syntax-name-color)">comment</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">text</span><span style="color:var(--syntax-string-color)">}</span><span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">div</span><span style="color:var(--syntax-text-color)">></span>
            <span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">div</span><span style="color:var(--syntax-text-color)">></span>
          <span style="color:var(--syntax-text-color)">))</span><span style="color:var(--syntax-string-color)">}</span>
        <span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">div</span><span style="color:var(--syntax-text-color)">></span>
      <span style="color:var(--syntax-text-color)">)</span> <span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">(</span>
        <span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">div</span> <span style="color:var(--syntax-name-color)">className</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">"mt-4"</span><span style="color:var(--syntax-text-color)">></span>No comments yet. Be the first to add one!<span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">div</span><span style="color:var(--syntax-text-color)">></span>
      <span style="color:var(--syntax-text-color)">)</span><span style="color:var(--syntax-string-color)">}</span>
    <span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-name-color)">Fragment</span><span style="color:var(--syntax-text-color)">></span>
  <span style="color:var(--syntax-text-color)">);</span>
<span style="color:var(--syntax-text-color)">};</span>

<span style="color:var(--syntax-declaration-color)">export</span> <span style="color:var(--syntax-declaration-color)">default</span> <span style="color:var(--syntax-name-color)">CommentsUpvotes</span><span style="color:var(--syntax-text-color)">;</span>
</code></span></span>

ブログを作成するための API ルーティング コードは次のようになります。

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-declaration-color)">import</span> <span style="color:var(--syntax-declaration-color)">type</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">APIRoute</span> <span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-declaration-color)">from</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">astro</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-declaration-color)">import</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">prisma</span> <span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-declaration-color)">from</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">../../../lib/prisma-client</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">;</span>

<span style="color:var(--syntax-declaration-color)">export</span> <span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">post</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-name-color)">APIRoute</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-declaration-color)">async</span> <span style="color:var(--syntax-text-color)">({</span> <span style="color:var(--syntax-name-color)">request</span> <span style="color:var(--syntax-text-color)">})</span> <span style="color:var(--syntax-error-color)">=></span> <span style="color:var(--syntax-text-color)">{</span>
  <span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">formData</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-declaration-color)">await</span> <span style="color:var(--syntax-name-color)">request</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">formData</span><span style="color:var(--syntax-text-color)">();</span>
  <span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">comment</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">formData</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-declaration-color)">get</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">comment</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">)</span> <span style="color:var(--syntax-error-color)">??</span> <span style="color:var(--syntax-string-color)">''</span><span style="color:var(--syntax-text-color)">;</span>
  <span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">author</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">formData</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-declaration-color)">get</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">author</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">)</span> <span style="color:var(--syntax-error-color)">??</span> <span style="color:var(--syntax-string-color)">''</span><span style="color:var(--syntax-text-color)">;</span>
  <span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">blogUrl</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">formData</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-declaration-color)">get</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">blogUrl</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">)</span> <span style="color:var(--syntax-error-color)">??</span> <span style="color:var(--syntax-string-color)">''</span><span style="color:var(--syntax-text-color)">;</span>
  <span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">blog</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-declaration-color)">await</span> <span style="color:var(--syntax-name-color)">prisma</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">post</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">findFirst</span><span style="color:var(--syntax-text-color)">({</span>
    <span style="color:var(--syntax-name-color)">where</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">url</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-name-color)">blogUrl</span> <span style="color:var(--syntax-declaration-color)">as</span> <span style="color:var(--syntax-declaration-color)">string</span> <span style="color:var(--syntax-text-color)">},</span>
  <span style="color:var(--syntax-text-color)">});</span>
  <span style="color:var(--syntax-declaration-color)">if</span> <span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-error-color)">!</span><span style="color:var(--syntax-name-color)">blog</span><span style="color:var(--syntax-text-color)">)</span> <span style="color:var(--syntax-text-color)">{</span>
    <span style="color:var(--syntax-declaration-color)">await</span> <span style="color:var(--syntax-name-color)">prisma</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">post</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">create</span><span style="color:var(--syntax-text-color)">({</span>
      <span style="color:var(--syntax-name-color)">data</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">{</span>
        <span style="color:var(--syntax-name-color)">url</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-name-color)">blogUrl</span> <span style="color:var(--syntax-declaration-color)">as</span> <span style="color:var(--syntax-declaration-color)">string</span><span style="color:var(--syntax-text-color)">,</span>
        <span style="color:var(--syntax-name-color)">Comment</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">{</span>
          <span style="color:var(--syntax-name-color)">create</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">{</span>
            <span style="color:var(--syntax-name-color)">author</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-name-color)">author</span> <span style="color:var(--syntax-declaration-color)">as</span> <span style="color:var(--syntax-declaration-color)">string</span><span style="color:var(--syntax-text-color)">,</span>
            <span style="color:var(--syntax-name-color)">text</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-name-color)">comment</span> <span style="color:var(--syntax-declaration-color)">as</span> <span style="color:var(--syntax-declaration-color)">string</span><span style="color:var(--syntax-text-color)">,</span>
          <span style="color:var(--syntax-text-color)">},</span>
        <span style="color:var(--syntax-text-color)">},</span>
      <span style="color:var(--syntax-text-color)">},</span>
    <span style="color:var(--syntax-text-color)">});</span>
  <span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-declaration-color)">else</span> <span style="color:var(--syntax-text-color)">{</span>
    <span style="color:var(--syntax-declaration-color)">await</span> <span style="color:var(--syntax-name-color)">prisma</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">comment</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">create</span><span style="color:var(--syntax-text-color)">({</span>
      <span style="color:var(--syntax-name-color)">data</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">{</span>
        <span style="color:var(--syntax-name-color)">author</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-name-color)">author</span> <span style="color:var(--syntax-declaration-color)">as</span> <span style="color:var(--syntax-declaration-color)">string</span><span style="color:var(--syntax-text-color)">,</span>
        <span style="color:var(--syntax-name-color)">text</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-name-color)">comment</span> <span style="color:var(--syntax-declaration-color)">as</span> <span style="color:var(--syntax-declaration-color)">string</span><span style="color:var(--syntax-text-color)">,</span>
        <span style="color:var(--syntax-name-color)">postId</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-name-color)">blog</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">id</span><span style="color:var(--syntax-text-color)">,</span>
      <span style="color:var(--syntax-text-color)">},</span>
    <span style="color:var(--syntax-text-color)">});</span>
  <span style="color:var(--syntax-text-color)">}</span>

  <span style="color:var(--syntax-declaration-color)">return</span> <span style="color:var(--syntax-declaration-color)">new</span> <span style="color:var(--syntax-name-color)">Response</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-declaration-color)">null</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-text-color)">{</span>
    <span style="color:var(--syntax-name-color)">status</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-literal-color)">200</span><span style="color:var(--syntax-text-color)">,</span>
  <span style="color:var(--syntax-text-color)">});</span>
<span style="color:var(--syntax-text-color)">};</span>
</code></span></span>

投稿のコメントを一覧表示するコードは次のようになります。

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-declaration-color)">import</span> <span style="color:var(--syntax-declaration-color)">type</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">APIRoute</span> <span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-declaration-color)">from</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">astro</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-declaration-color)">import</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">getCommentsForBlog</span> <span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-declaration-color)">from</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">../../../lib/get-comments-for-blog</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">;</span>

<span style="color:var(--syntax-declaration-color)">export</span> <span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-declaration-color)">get</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-name-color)">APIRoute</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-declaration-color)">async</span> <span style="color:var(--syntax-text-color)">({</span> <span style="color:var(--syntax-name-color)">request</span> <span style="color:var(--syntax-text-color)">})</span> <span style="color:var(--syntax-error-color)">=></span> <span style="color:var(--syntax-text-color)">{</span>
  <span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">params</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-declaration-color)">new</span> <span style="color:var(--syntax-name-color)">URLSearchParams</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">request</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">url</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">split</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">?</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">)[</span><span style="color:var(--syntax-literal-color)">1</span><span style="color:var(--syntax-text-color)">]);</span>
  <span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">allCommentsInDbForPost</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-declaration-color)">await</span> <span style="color:var(--syntax-name-color)">getCommentsForBlog</span><span style="color:var(--syntax-text-color)">(</span>
    <span style="color:var(--syntax-name-color)">params</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-declaration-color)">get</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">blogUrl</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">)</span>
  <span style="color:var(--syntax-text-color)">);</span>
  <span style="color:var(--syntax-declaration-color)">return</span> <span style="color:var(--syntax-declaration-color)">new</span> <span style="color:var(--syntax-name-color)">Response</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">JSON</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">stringify</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">allCommentsInDbForPost</span><span style="color:var(--syntax-text-color)">),</span> <span style="color:var(--syntax-text-color)">{</span>
    <span style="color:var(--syntax-name-color)">status</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-literal-color)">200</span><span style="color:var(--syntax-text-color)">,</span>
  <span style="color:var(--syntax-text-color)">});</span>
<span style="color:var(--syntax-text-color)">};</span>
</code></span></span>

「エッジ」セクションを設定します

Astro を Vercel Edge に導入するのは、Vercel 統合を使用して Astro を追加し、Edge をセットアップするだけで簡単ですtarget。
私の astro 構成 (edgeインポート パスに注意してください):

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-declaration-color)">import</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">defineConfig</span> <span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-declaration-color)">from</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">astro/config</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-declaration-color)">import</span> <span style="color:var(--syntax-name-color)">vercel</span> <span style="color:var(--syntax-declaration-color)">from</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">@astrojs/vercel/edge</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">;</span>

<span style="color:var(--syntax-declaration-color)">export</span> <span style="color:var(--syntax-declaration-color)">default</span> <span style="color:var(--syntax-name-color)">defineConfig</span><span style="color:var(--syntax-text-color)">({</span>
  <span style="color:var(--syntax-name-color)">output</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">server</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span>
  <span style="color:var(--syntax-name-color)">adapter</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-name-color)">vercel</span><span style="color:var(--syntax-text-color)">(),</span>
<span style="color:var(--syntax-text-color)">});</span>
</code></span></span>

また、 Prisma クライアントがVercel と Astro で動作するように、Vite でエイリアスを設定する必要がありました。

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-comment-color)">// vite.config.js</span>
<span style="color:var(--syntax-declaration-color)">export</span> <span style="color:var(--syntax-declaration-color)">default</span> <span style="color:var(--syntax-text-color)">{</span>
  <span style="color:var(--syntax-name-color)">resolve</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">{</span>
    <span style="color:var(--syntax-name-color)">alias</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">{</span>
      <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">.prisma/client/edge</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">./node_modules/.prisma/client/edge.js</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span>
    <span style="color:var(--syntax-text-color)">},</span>
  <span style="color:var(--syntax-text-color)">},</span>
<span style="color:var(--syntax-text-color)">};</span>
</code></span></span>

Vercel 上でアプリケーションを構築するときは、クライアントも同様に使用可能であることを確認するために、クライアントを再度生成する必要があります。私はこれを使っています。Prisma クライアントのインスタンス化はコード内にあります。ここでは Node.js からの遅延インポートを使用して、ローカルおよび Vercel 上で動作させるようにしています。node_modules
package.json"build": "prisma generate --data-proxy && astro build"
lib/prisma-client.ts

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-declaration-color)">import</span> <span style="color:var(--syntax-declaration-color)">type</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">PrismaClient</span> <span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-declaration-color)">from</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">@prisma/client</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">;</span>

<span style="color:var(--syntax-declaration-color)">let</span> <span style="color:var(--syntax-name-color)">prisma</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-name-color)">PrismaClient</span><span style="color:var(--syntax-text-color)">;</span>

<span style="color:var(--syntax-declaration-color)">if</span> <span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">process</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">env</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">NODE_ENV</span> <span style="color:var(--syntax-error-color)">===</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">development</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">)</span> <span style="color:var(--syntax-text-color)">{</span>
  <span style="color:var(--syntax-declaration-color)">import</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">@prisma/client</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">).</span><span style="color:var(--syntax-name-color)">then</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">mod</span> <span style="color:var(--syntax-error-color)">=></span> <span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">prisma</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-declaration-color)">new</span> <span style="color:var(--syntax-name-color)">mod</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">PrismaClient</span><span style="color:var(--syntax-text-color)">()));</span>
<span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-declaration-color)">else</span> <span style="color:var(--syntax-text-color)">{</span>
  <span style="color:var(--syntax-declaration-color)">import</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">@prisma/client/edge</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">).</span><span style="color:var(--syntax-name-color)">then</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">mod</span> <span style="color:var(--syntax-error-color)">=></span> <span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">prisma</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-declaration-color)">new</span> <span style="color:var(--syntax-name-color)">mod</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">PrismaClient</span><span style="color:var(--syntax-text-color)">()));</span>
<span style="color:var(--syntax-text-color)">}</span>
<span style="color:var(--syntax-declaration-color)">export</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">prisma</span> <span style="color:var(--syntax-text-color)">};</span>
</code></span></span>

コードをローカルでも実行するには、DATABASE_URLPrisma Proxy を経由せずに PlanetScale を直接指すように環境変数を変更する必要がありました。私のブログをチェックし

てコメントを追加してください ;-)。ソースコードは私の Github にあります 。

おすすめ

転載: blog.csdn.net/jascl/article/details/131304307
おすすめ
ランキング
欲張りアルゴリズムLeetcode45ジャンプゲームの証明プロセス
Résumé des outils couramment utilisés pour l'acoustique et l'informatique musicale (soundfile, librosa, pydub, madmom, spleeter)
OpenCVの。コンセプト
直接公式招待コード88886981の下ダイハツ
ミリ秒の形式に現在時刻を取得するJava
umijs/plugin-qiankun (vue+umi) に基づくマイクロフロントエンド構成
クローン化されたカードからLinux仮想マシンは、eth1にはeth0になり
10G SFP + 10G XFP光モジュール及び光モジュール
DevExpressがDateEditを設定して年、月、四半期を表示
Mavenがローカルに外部jarパッケージをインポートする
アーカイブ
もっと
2024-05-19(0)
2024-05-18(30)
2024-05-17(6)
2024-05-16(24)
2024-05-15(5)
2024-05-14(9)
2024-05-13(8)
2024-05-12(27)
2024-05-11(31)
2024-05-10(33)

コードワールド

© 2018 codetd.com