Prisma: Using Edge Client

The edge allows you to run your functions closer to the user and hosting platforms like vercel and cloudflare offer support for using the edge.

I wanted to use prisma on the edge with my sveltekit project that I was working on. I will go over one or two ways I went about the setup and issues I resolved.

This article from prisma will get you started with using prisma on the edge.

Creating the global prisma client

As usual one can create a prisma client by setting the global prisma object to a new prisma client when in the dev environment to ensure multiple connections are not wasted. The edge client is a bit different from the default prisma client as it offers optimizations for the edge and also requires that you use the prisma data proxy. So instead of using import { PrismaClient } from '@prisma/client', you will need to use import { PrismaClient } from '@prisma/client/edge' which imports the edge client.

I found that this works alright when using the prisma client, but if you are using the edge client in the local environment, it resulted in this error, InvalidDatasourceError: Datasource "db" references an environment variable "DATABASE_URL" that is not set.

The solution I tried which worked for me locally was to use the '@prisma/client' in the dev environment and '@prisma/client/edge' in the production environment.

Here is a sample of how I setup my default prisma library in typescript.

// lib/prisma.ts
import { PrismaClient as PrismaEdgeClient } from "@prisma/client/edge";
import { PrismaClient } from "@prisma/client";

declare global {
  var prisma: PrismaClient | undefined;
}

let prisma: PrismaClient;

if (process.env.NODE_ENV === "production") {
  prisma = new PrismaEdgeClient();
} else {
  if (!global.prisma) {
    global.prisma = new PrismaClient({ log: ["query"] });
  }
  prisma = global.prisma;
}

export default prisma;

NOTE: whilst this worked locally for me, it failed on vercel as for some reason it looked like prisma client was being imported to the edge instead of the prisma edge client. So to resolve the error, I tried the following instead and in that case, I only had to use @prisma/client/edge to import the prisma client instead of importing a separate one for production and for development.

import { PrismaClient } from '@prisma/client/edge'
...
if (process.env.NODE_ENV === "production") {
  prisma = new PrismaClient();
} else {
  if (!global.prisma) {
    global.prisma = new PrismaClient({
			log: ['query'],
			datasources: {
				db: {
					url: '<database-url-here>' // use your environment variable for the database url here,
          // in sveltekit, you would import { env } from '$env/dynamic/private';
          // and use something like env.DATABASE_URL
				}
			}
		});
  }
  prisma = global.prisma;
}
...

Noteworthy Changes

• When running the prisma generate command, to support the edge client, you will need to supply an additional parameter, prisma generate --data-proxy. And you can easily do this or make your life easier by adding it as a postinstall script in your package.json, "postinstall": "prisma generate --data-proxy",.
• In production environment like on vercel, if you have the postinstall script setup, you should be good to go but you can also set the environment variable, PRISMA_GENERATE_DATAPROXY to true. This will ensure that when the client is generated during the build process, even if the --data-proxy parameter is not supplied, it will generate the client with the proxy option enabled.

Performing migrations

As at the time of writing this article, another change when performing migrations or running other prisma cli commands is that you will have to use your actual database url since it will not work when using the proxy (this might change in the future).

You can do this in the following steps:

• Set a direct url property in your prisma schema datasource

datasource db {
  provider     = "mysql"
  url          = env("DATABASE_URL")
  directUrl    = env("DATABASE_DIRECT_URL")
}

• Add the DATABASE_DIRECT_URL environment variable to your .env,.env.local or relevant environment variables management file.

• Add the DATABASE_DIRECT_URL environment variable to your vercel or cloudflare project environment variables if you happen to run any of the prisma cli commands in this article.