From fd08b219b33d620d72ec633c1943d9cab8e1213b Mon Sep 17 00:00:00 2001 From: Aman Varshney Date: Sun, 12 Oct 2025 19:41:56 +0530 Subject: [PATCH 1/2] docs: update astro guide with recommended approach --- content/800-guides/220-astro.mdx | 174 +++++++++++-------------------- 1 file changed, 60 insertions(+), 114 deletions(-) diff --git a/content/800-guides/220-astro.mdx b/content/800-guides/220-astro.mdx index 01e84cba9d..d38d9a25e1 100644 --- a/content/800-guides/220-astro.mdx +++ b/content/800-guides/220-astro.mdx @@ -58,7 +58,7 @@ npm install @prisma/client Once installed, initialize Prisma in your project: ```terminal -npx prisma init --db --output ../src/generated/prisma +npx prisma init --db --output ../prisma/generated ``` :::info You'll need to answer a few questions while setting up your Prisma Postgres database. Select the region closest to your location and a memorable name for your database like "My Astro Project" @@ -74,9 +74,9 @@ In the `prisma/schema.prisma` file, add the following models and change the gene ```prisma file=prisma/schema.prisma generator client { - //edit-next-line - provider = "prisma-client" - output = "../src/generated/prisma" + provider = "prisma-client" + engineType = "client" + output = "../prisma/generated" } datasource db { @@ -119,7 +119,7 @@ Let's add some seed data to populate the database with sample users and posts. Create a new file called `seed.ts` in the `prisma/` directory: ```typescript file=prisma/seed.ts -import { PrismaClient, Prisma } from "../src/generated/prisma/client.js"; +import { PrismaClient, Prisma } from "../prisma/generated/client.js"; const prisma = new PrismaClient(); @@ -157,19 +157,34 @@ const userData: Prisma.UserCreateInput[] = [ ]; export async function main() { + console.log("Starting to seed..."); + for (const u of userData) { - await prisma.user.create({ data: u }); + await prisma.user.upsert({ + where: { email: u.email }, + update: {}, + create: u, + }); } + + console.log("Seeding finished."); } -main(); +main() + .catch((e) => { + console.error(e); + process.exit(1); + }) + .finally(async () => { + await prisma.$disconnect(); + }); ``` Now, tell Prisma how to run this script by updating your `package.json`: ```json file=package.json { - "name": "extinct-eclipse-minimal", + "name": "astro-prisma", "type": "module", "version": "0.0.1", "scripts": { @@ -184,13 +199,13 @@ Now, tell Prisma how to run this script by updating your `package.json`: }, //add-end "dependencies": { - "@prisma/client": "^6.7.0", - "@prisma/extension-accelerate": "^1.3.0", - "astro": "^5.7.10" + "@prisma/client": "^6.17.1", + "@prisma/extension-accelerate": "^2.0.2", + "astro": "^5.14.4" }, "devDependencies": { - "prisma": "^6.7.0", - "tsx": "^4.19.4" + "prisma": "^6.17.1", + "tsx": "^4.20.6" } } ``` @@ -209,7 +224,21 @@ npx prisma studio ## 3. Integrate Prisma into Astro -### 3.1. Create a Prisma Client +### 3.1. Create TypeScript environment definitions + +First, create an `env.d.ts` file in your `src` directory to provide TypeScript definitions for environment variables: + +```typescript file=src/env.d.ts +interface ImportMetaEnv { + readonly DATABASE_URL: string; +} + +interface ImportMeta { + readonly env: ImportMetaEnv; +} +``` + +### 3.2. Create a Prisma Client Inside of `/src`, create a `lib` directory and a `prisma.ts` file inside it. This file will be used to create and export your Prisma Client instance. @@ -218,13 +247,12 @@ mkdir src/lib touch src/lib/prisma.ts ``` - Set up the Prisma client like this: -```tsx file=src/lib/prisma.ts -import { PrismaClient } from "../generated/prisma/client.js"; +```typescript file=src/lib/prisma.ts +import { PrismaClient } from "../../prisma/generated/client"; import { withAccelerate } from "@prisma/extension-accelerate"; const prisma = new PrismaClient({ @@ -236,12 +264,12 @@ export default prisma; -```tsx file=src/lib/prisma.ts -import { PrismaClient } from "../generated/prisma/client.js"; +```typescript file=src/lib/prisma.ts +import { PrismaClient } from "../../prisma/generated/client"; const prisma = new PrismaClient({ datasourceUrl: import.meta.env.DATABASE_URL, -}) +}); export default prisma; ``` @@ -254,7 +282,7 @@ We recommend using a connection pooler (like [Prisma Accelerate](https://www.pri If you choose not to use one, **avoid** instantiating `PrismaClient` globally in long-lived environments. Instead, create and dispose of the client per request to prevent exhausting your database connections. ::: -### 3.2. Create an API route +### 3.3. Create an API route An API route is the best way to fetch data from your database in an Astro app. @@ -267,7 +295,7 @@ touch src/pages/api/users.ts Now, create a GET route that fetches the `Users` data from your database, making sure to include each user's `Posts` by adding them to the `include` field: -```ts file=src/pages/api/users.ts +```typescript file=src/pages/api/users.ts import type { APIRoute } from "astro"; import prisma from "../../lib/prisma"; @@ -282,73 +310,23 @@ export const GET: APIRoute = async () => { }; ``` -Next, you'll call this route from the `index.astro` file and display it. +### 3.4. Fetch the data from the API route (Recommended Method) -### 3.3. Fetch the data from the API route +Instead of using `fetch()` with HTTP requests, Astro recommends importing endpoint functions directly. This approach is more efficient and avoids URL parsing issues. -Start by create a new type that combines the `User` and `Post` models called `UserWithPosts`: +Start by creating a new type that combines the `User` and `Post` models called `UserWithPosts`: ```tsx file=src/pages/index.astro --- //add-start -import type { User, Post } from "../generated/prisma/client.js"; -type UserWithPosts = User & { posts: Post[] }; -//add-end ---- +import type { User, Post } from "../../prisma/generated/client"; +import { GET } from "./api/users.ts"; - - - - - - - Astro - - -

Astro

- - -``` - -Fetch the data from the API route and set it's type to the `UserWithPosts` type you just created: - -```tsx file=src/pages/index.astro ---- -import type { User, Post } from "../generated/prisma/client.js"; type UserWithPosts = User & { posts: Post[] }; -//add-start -const response = await fetch("http://localhost:4321/api/users"); -const users: UserWithPosts[] = await response.json(); -//add-end ---- - - - - - - - - Astro - - -

Astro

- - -``` - -### 3.4. Display the data - -With the variables from the frontmatter now available throughout your file, you can display the list of users. - -Just below the `

` tag, map through the `users` array, add the `UserWithPosts` type to the users, and display the names of the users: - -```tsx file=src/pages/index.astro ---- -import type { User, Post } from "../generated/prisma/client.js"; -type UserWithPosts = User & { posts: Post[] }; -const response = await fetch("http://localhost:4321/api/users"); +const response = await GET(Astro); const users: UserWithPosts[] = await response.json(); +//add-end --- @@ -357,56 +335,24 @@ const users: UserWithPosts[] = await response.json(); - Astro + Astro + Prisma - //edit-next-line

Astro + Prisma

//add-start - {users.map((user: UserWithPosts) => ( -
  • -

    {user.name}

    -
    • - ))} - //add-end - - -``` - -Finally, display the `Posts` below the respective `User` and set the `Post` type: - -```tsx file=src/pages/index.astro ---- -import type { User, Post } from "../generated/prisma/client.js"; -type UserWithPosts = User & { posts: Post[] }; -const response = await fetch("http://localhost:4321/api/users"); -const users: UserWithPosts[] = await response.json(); ---- - - - - - - - - Astro - - -

    Astro + Prisma

      {users.map((user: UserWithPosts) => (
    • -

      {user.name}

      - //add-start +

      {user.name}

        {user.posts.map((post: Post) => (
      • {post.title}
        • ))}
      - //add-end
      • ))}
    + //add-end ``` From 635844cc272a419ea6c3a00484c604161764b3e7 Mon Sep 17 00:00:00 2001 From: Aman Varshney Date: Wed, 15 Oct 2025 21:11:36 +0530 Subject: [PATCH 2/2] add justinellingwood and psql in cSpell.json --- cSpell.json | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/cSpell.json b/cSpell.json index 0868623f4a..5a422bc426 100644 --- a/cSpell.json +++ b/cSpell.json @@ -113,7 +113,8 @@ "nonrepeatable", "Superkey", "superkey", - "Dataguide" + "Dataguide", + "psql" ], "ignoreWords": [ "Aiven", @@ -156,7 +157,8 @@ "Nixpacks", "Buildpacks", "Sevalla's", - "Dataguide" + "Dataguide", + "justinellingwood" ], "patterns": [ { @@ -210,4 +212,4 @@ "HTML Tags" ], "ignorePaths": [] -} +} \ No newline at end of file