[PR #609] [CLOSED] feat(examples): add Prisma + Hyperdrive example #709

New issue

Closed

opened 2026-05-06 13:09:42 +02:00 by BreizhHardware · 0 comments

BreizhHardware commented

2026-05-06 13:09:42 +02:00

Owner

📋 Pull Request Information

Original PR: https://github.com/cloudflare/vinext/pull/609
Author: @JamesbbBriz
Created: 3/20/2026
Status: ❌ Closed

Base: main ← Head: examples/prisma-hyperdrive

📝 Commits (1)

9bdc879 feat(examples): add Prisma + Hyperdrive example for Cloudflare Workers

📊 Changes

11 files changed (+317 additions, -0 deletions)

View changed files

➕ examples/prisma-hyperdrive/README.md (+93 -0)
➕ examples/prisma-hyperdrive/app/api/items/route.ts (+35 -0)
➕ examples/prisma-hyperdrive/app/layout.tsx (+14 -0)
➕ examples/prisma-hyperdrive/app/page.tsx (+29 -0)
➕ examples/prisma-hyperdrive/lib/db.ts (+29 -0)
➕ examples/prisma-hyperdrive/package.json (+33 -0)
➕ examples/prisma-hyperdrive/prisma/schema.prisma (+17 -0)
➕ examples/prisma-hyperdrive/tsconfig.json (+16 -0)
➕ examples/prisma-hyperdrive/vite.config.ts (+15 -0)
➕ examples/prisma-hyperdrive/worker/index.ts (+13 -0)
➕ examples/prisma-hyperdrive/wrangler.jsonc (+23 -0)

📄 Description

Summary

Add a full-stack CRUD example demonstrating Prisma v7 with Hyperdrive on Cloudflare Workers. This is the first database example in the repo — fills a major gap for users migrating data-driven apps to vinext.

What it shows

Per-request PrismaClient: avoids the alternating connection failure pattern on Workers (#537)
Hyperdrive: connection pooling via cloudflare:workers binding
Server component: data fetching with Prisma in a React Server Component
Route handler: CRUD API using standard Web Request/Response (not NextRequest)

Structure

examples/prisma-hyperdrive/
├── app/
│   ├── layout.tsx              # Root layout
│   ├── page.tsx                # Server component: list items from DB
│   └── api/items/route.ts      # GET + POST route handler
├── lib/db.ts                   # Per-request Prisma client (50ms TTL pattern)
├── prisma/schema.prisma        # Simple Item model
├── vite.config.ts              # Standard vinext + cloudflare config
├── wrangler.jsonc              # Hyperdrive binding
└── worker/index.ts             # Uses virtual:vinext-app-handler

Key pattern: per-request client

let cached: PrismaClient | null = null;
let cachedAt = 0;

export function getPrisma(): PrismaClient {
  const now = Date.now();
  if (cached && now - cachedAt < 50) return cached;
  const pool = new Pool({ connectionString: env.HYPERDRIVE.connectionString });
  cached = new PrismaClient({ adapter: new PrismaPg(pool) });
  cachedAt = now;
  return cached;
}

This pattern is production-validated — we run it on Workers Free plan (10ms CPU limit) with zero alternating failures.

Blast radius

Zero — new directory only, no changes to existing code.

Relates to #537

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/cloudflare/vinext/pull/609 **Author:** [@JamesbbBriz](https://github.com/JamesbbBriz) **Created:** 3/20/2026 **Status:** ❌ Closed **Base:** `main` ← **Head:** `examples/prisma-hyperdrive` --- ### 📝 Commits (1) - [`9bdc879`](https://github.com/cloudflare/vinext/commit/9bdc879f5d52d89cc1e1a18291f7030d2b03013d) feat(examples): add Prisma + Hyperdrive example for Cloudflare Workers ### 📊 Changes **11 files changed** (+317 additions, -0 deletions) <details> <summary>View changed files</summary> ➕ `examples/prisma-hyperdrive/README.md` (+93 -0) ➕ `examples/prisma-hyperdrive/app/api/items/route.ts` (+35 -0) ➕ `examples/prisma-hyperdrive/app/layout.tsx` (+14 -0) ➕ `examples/prisma-hyperdrive/app/page.tsx` (+29 -0) ➕ `examples/prisma-hyperdrive/lib/db.ts` (+29 -0) ➕ `examples/prisma-hyperdrive/package.json` (+33 -0) ➕ `examples/prisma-hyperdrive/prisma/schema.prisma` (+17 -0) ➕ `examples/prisma-hyperdrive/tsconfig.json` (+16 -0) ➕ `examples/prisma-hyperdrive/vite.config.ts` (+15 -0) ➕ `examples/prisma-hyperdrive/worker/index.ts` (+13 -0) ➕ `examples/prisma-hyperdrive/wrangler.jsonc` (+23 -0) </details> ### 📄 Description ## Summary Add a full-stack CRUD example demonstrating Prisma v7 with Hyperdrive on Cloudflare Workers. This is the first database example in the repo — fills a major gap for users migrating data-driven apps to vinext. ## What it shows - **Per-request PrismaClient**: avoids the alternating connection failure pattern on Workers (#537) - **Hyperdrive**: connection pooling via `cloudflare:workers` binding - **Server component**: data fetching with Prisma in a React Server Component - **Route handler**: CRUD API using standard Web `Request`/`Response` (not `NextRequest`) ## Structure ``` examples/prisma-hyperdrive/ ├── app/ │ ├── layout.tsx # Root layout │ ├── page.tsx # Server component: list items from DB │ └── api/items/route.ts # GET + POST route handler ├── lib/db.ts # Per-request Prisma client (50ms TTL pattern) ├── prisma/schema.prisma # Simple Item model ├── vite.config.ts # Standard vinext + cloudflare config ├── wrangler.jsonc # Hyperdrive binding └── worker/index.ts # Uses virtual:vinext-app-handler ``` ## Key pattern: per-request client ```ts let cached: PrismaClient | null = null; let cachedAt = 0; export function getPrisma(): PrismaClient { const now = Date.now(); if (cached && now - cachedAt < 50) return cached; const pool = new Pool({ connectionString: env.HYPERDRIVE.connectionString }); cached = new PrismaClient({ adapter: new PrismaPg(pool) }); cachedAt = now; return cached; } ``` This pattern is production-validated — we run it on Workers Free plan (10ms CPU limit) with zero alternating failures. ## Blast radius Zero — new directory only, no changes to existing code. Relates to #537 --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>