has anybody set up a next-pages app with D1 & Prisma? would love to see how you set up a basic route

Aadjlsncm has anybody set up a next-pages app with D1 & Prisma? would love to see how you ...

N

Nob•4/5/24, 8:28 PM

https://developers.cloudflare.com/d1/tutorials/d1-and-prisma-orm/

Cloudflare Docs

Query D1 using Prisma ORM · Cloudflare D1 docs

Prisma ORM is a next-generation JavaScript and TypeScript ORM that unlocks a new level of developer experience when working with databases thanks to …

A

adjlsncmOP•4/5/24, 8:33 PM

A

adjlsncmOP•4/5/24, 8:45 PM

M

Marcel Overdijk•4/5/24, 9:22 PM

@Nob I was trying this evening to get Prisma.io with D1 working.
Locally (wrangler dev) it works for me, but when deploying to CF my build starts failing...:

23:08:22.672    Using v2 root directory strategy
23:08:22.696    Success: Finished cloning repository files
23:08:24.728    wrangler.toml config file detected
23:08:25.838    Failed: an internal error occurred. If this continues, contact support: https://cfl.re/3WgEyrH

23:08:22.672    Using v2 root directory strategy
23:08:22.696    Success: Finished cloning repository files
23:08:24.728    wrangler.toml config file detected
23:08:25.838    Failed: an internal error occurred. If this continues, contact support: https://cfl.re/3WgEyrH

23:08:22.672    Using v2 root directory strategy
23:08:22.696    Success: Finished cloning repository files
23:08:24.728    wrangler.toml config file detected
23:08:25.838    Failed: an internal error occurred. If this continues, contact support: https://cfl.re/3WgEyrH

23:08:22.672    Using v2 root directory strategy
23:08:22.696    Success: Finished cloning repository files
23:08:24.728    wrangler.toml config file detected
23:08:25.838    Failed: an internal error occurred. If this continues, contact support: https://cfl.re/3WgEyrH

Before adding Prisma I did several deployments without any issue.
Not sure what is going wrong, logs are not telling much unfortunately...

M

Marcel Overdijk•4/5/24, 9:27 PM

To give a bit more detail:
I'm integrating Prisma in my

./functions

./functions

./functions

./functions API endpoints.
As documented here: https://developers.cloudflare.com/pages/functions/typescript/ I did this:

Then configure the runtime types by creating a functions/tsconfig.json file:

functions/tsconfig.json
{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "lib": ["esnext"],
    "types": ["@cloudflare/workers-types"]
  }
}

If you already have a tsconfig.json at the root of your project, you may wish to explicitly exclude the /functions directory to avoid conflicts. To exclude the /functions directory:

tsconfig.json
{
  "include": ["src/**/*"],
  "exclude": ["functions/**/*"],
  "compilerOptions": {

  }
}

Then configure the runtime types by creating a functions/tsconfig.json file:

functions/tsconfig.json
{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "lib": ["esnext"],
    "types": ["@cloudflare/workers-types"]
  }
}

If you already have a tsconfig.json at the root of your project, you may wish to explicitly exclude the /functions directory to avoid conflicts. To exclude the /functions directory:

tsconfig.json
{
  "include": ["src/**/*"],
  "exclude": ["functions/**/*"],
  "compilerOptions": {

  }
}

Then configure the runtime types by creating a functions/tsconfig.json file:

functions/tsconfig.json
{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "lib": ["esnext"],
    "types": ["@cloudflare/workers-types"]
  }
}

If you already have a tsconfig.json at the root of your project, you may wish to explicitly exclude the /functions directory to avoid conflicts. To exclude the /functions directory:

tsconfig.json
{
  "include": ["src/**/*"],
  "exclude": ["functions/**/*"],
  "compilerOptions": {

  }
}

Then configure the runtime types by creating a functions/tsconfig.json file:

functions/tsconfig.json
{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "lib": ["esnext"],
    "types": ["@cloudflare/workers-types"]
  }
}

If you already have a tsconfig.json at the root of your project, you may wish to explicitly exclude the /functions directory to avoid conflicts. To exclude the /functions directory:

tsconfig.json
{
  "include": ["src/**/*"],
  "exclude": ["functions/**/*"],
  "compilerOptions": {

  }
}

I noticed that in my functions folder where I import these:

import { PrismaClient } from '@prisma/client';
import { PrismaD1 } from '@prisma/adapter-d1';

import { PrismaClient } from '@prisma/client';
import { PrismaD1 } from '@prisma/adapter-d1';

import { PrismaClient } from '@prisma/client';
import { PrismaD1 } from '@prisma/adapter-d1';

import { PrismaClient } from '@prisma/client';
import { PrismaD1 } from '@prisma/adapter-d1';

VScode complains about

Cannot find module '@prisma/client'. Did you mean to set the 'moduleResolution' option to 'nodenext', or to add aliases to the 'paths' option?ts(2792)

Cannot find module '@prisma/client'. Did you mean to set the 'moduleResolution' option to 'nodenext', or to add aliases to the 'paths' option?ts(2792)

Cannot find module '@prisma/client'. Did you mean to set the 'moduleResolution' option to 'nodenext', or to add aliases to the 'paths' option?ts(2792)

Cannot find module '@prisma/client'. Did you mean to set the 'moduleResolution' option to 'nodenext', or to add aliases to the 'paths' option?ts(2792)

M

Marcel Overdijk•4/5/24, 9:27 PM

Not sure if that is relates, as locally it works

MMarcel Overdijk @Nob I was trying this evening to get Prisma.io with D1 working. Locally (wrangl...

A

adjlsncmOP•4/5/24, 9:27 PM

did you develop locally on next pages

M

Marcel Overdijk•4/5/24, 9:29 PM

I've run the Pages functions locally with

npx wrangler dev

npx wrangler dev

npx wrangler dev

npx wrangler dev
I've also create the database locally, including migrations (which I executed both locally and remote)

A

adjlsncmOP•4/5/24, 9:31 PM

how are you accessing the request.env.DB ?

A

adjlsncmOP•4/5/24, 9:31 PM

i cant seem to access the database binding in local development

M

Marcel Overdijk•4/5/24, 9:33 PM

import { PrismaClient } from '@prisma/client';
import { PrismaD1 } from '@prisma/adapter-d1';

export const onRequestGet: PagesFunction<Env> = async (context) => {
  const adapter = new PrismaD1(context.env.DB)
  const prisma = new PrismaClient({ adapter })

import { PrismaClient } from '@prisma/client';
import { PrismaD1 } from '@prisma/adapter-d1';

export const onRequestGet: PagesFunction<Env> = async (context) => {
  const adapter = new PrismaD1(context.env.DB)
  const prisma = new PrismaClient({ adapter })

import { PrismaClient } from '@prisma/client';
import { PrismaD1 } from '@prisma/adapter-d1';

export const onRequestGet: PagesFunction<Env> = async (context) => {
  const adapter = new PrismaD1(context.env.DB)
  const prisma = new PrismaClient({ adapter })

import { PrismaClient } from '@prisma/client';
import { PrismaD1 } from '@prisma/adapter-d1';

export const onRequestGet: PagesFunction<Env> = async (context) => {
  const adapter = new PrismaD1(context.env.DB)
  const prisma = new PrismaClient({ adapter })

M

Marcel Overdijk•4/5/24, 9:36 PM

@adjlsncm did you create the binding in wrangler.toml ? and did you start the local wrangler dev instance?

A

adjlsncmOP•4/5/24, 9:38 PM

im only running

npx wrangler pages dev .vercel/output/static --compatibility-flags="nodejs_compat" --port 8788

npx wrangler pages dev .vercel/output/static --compatibility-flags="nodejs_compat" --port 8788

npx wrangler pages dev .vercel/output/static --compatibility-flags="nodejs_compat" --port 8788

npx wrangler pages dev .vercel/output/static --compatibility-flags="nodejs_compat" --port 8788

A

adjlsncmOP•4/5/24, 9:39 PM

after building it with @Cloudflare/next-on-pages

M

Marcel Overdijk•4/5/24, 9:46 PM

I'm just running it like

npx wrangler pages dev

npx wrangler pages dev

npx wrangler pages dev

npx wrangler pages dev but I think that makes no difference...
how does your

wrangler.toml

wrangler.toml

look?

K

kian•4/5/24, 9:48 PM

That doesn't define a D1 database for the

dev

dev

dev

dev env, fwiw

K

kian•4/5/24, 9:48 PM

That shouldn't matter for Pages though

Kkian That doesn't define a D1 database for the `dev` env, fwiw

M

Marcel Overdijk•4/5/24, 9:57 PM

@adjlsncm and if you try something like:

npx wrangler d1 execute audition --command "SELECT * FROM _some_table_;" --local

npx wrangler d1 execute audition --command "SELECT * FROM _some_table_;" --local

npx wrangler d1 execute audition --command "SELECT * FROM _some_table_;" --local

npx wrangler d1 execute audition --command "SELECT * FROM _some_table_;" --local does that work?

J

James•4/5/24, 10:08 PM

Browsers generally make 2 requests when they hit a page - one for the page itself, and then one for

/favicon.ico

/favicon.ico

/favicon.ico

/favicon.ico

J

James•4/5/24, 10:09 PM

checking the URL is generally a good solution

const url = new URL(request.url);
if (url.pathname === '/something') {
   // do your work
}

const url = new URL(request.url);
if (url.pathname === '/something') {
   // do your work
}

const url = new URL(request.url);
if (url.pathname === '/something') {
   // do your work
}

const url = new URL(request.url);
if (url.pathname === '/something') {
   // do your work
}

J

James•4/5/24, 10:09 PM

Or if you're doing something more complex, using a router like https://hono.dev/ or https://itty.dev/itty-router/ is recommended

M

Marcel Overdijk•4/5/24, 10:10 PM

or ceate a

_routes.json

_routes.json

_routes.json

_routes.json like:

{
    "version": 1,
    "include": ["/api/*"],
    "exclude": ["/*.*"]
}

{
    "version": 1,
    "include": ["/api/*"],
    "exclude": ["/*.*"]
}

{
    "version": 1,
    "include": ["/api/*"],
    "exclude": ["/*.*"]
}

{
    "version": 1,
    "include": ["/api/*"],
    "exclude": ["/*.*"]
}

J

James•4/5/24, 10:12 PM

_routes

_routes

_routes

_routes is Pages specific, not for Workers generically, but yes

MMarcel Overdijk Not sure if that is relates, as locally it works

M

Marcel Overdijk•4/5/24, 10:12 PM

I tried many things, but my build cannot be deployed anymore unfortunately...
Is there some more detailed logging available? e.g. in the dashboard?

A

adjlsncmOP•4/5/24, 10:39 PM

if anybody has any suggestions to fixing it please do tag me

A

adjlsncmOP•4/5/24, 11:25 PM

okay this is ridiculous but i guess i figured it out

A

adjlsncmOP•4/5/24, 11:26 PM

the DB binding is in process.env not in some env parameter passed to the request

A

adjlsncmOP•4/5/24, 11:28 PM

i feel like the docs should make it clear if you're using next-pages anything related to requests and routes in local should access env via the process always even though the docs say otherwise

A

adjlsncmOP•4/5/24, 11:28 PM

i got stuck on something similar before where it ended up being the docs saying env should be accessed a specific way but it just ended up being process.env always

Aadjlsncm okay this is ridiculous but i guess i figured it out