Skip to content

Upgrade project to prisma v6 #1043

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 2 commits into from
Closed

Upgrade project to prisma v6 #1043

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a95c116
Refactor: Use generated Prisma client and SQLite adapter
cursoragent Sep 30, 2025
4785e26
Refactor: Use Prisma's typedSql and LibSQL adapter
cursoragent Sep 30, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,4 +25,5 @@ node_modules

# generated files
/app/components/ui/icons
/app/utils/prisma-generated.server
.react-router/
2 changes: 1 addition & 1 deletion app/routes/_auth+/webauthn+/registration.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,7 @@ export async function action({ request }: Route.ActionArgs) {
data: {
id: credential.id,
aaguid,
publicKey: Buffer.from(credential.publicKey),
publicKey: new Uint8Array(credential.publicKey),
userId,
webauthnUserId,
counter: credential.counter,
Expand Down
19 changes: 15 additions & 4 deletions app/routes/users+/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import { searchUsers } from '@prisma/client/sql'
import { Img } from 'openimg/react'
import { redirect, Link } from 'react-router'
import { GeneralErrorBoundary } from '#app/components/error-boundary.tsx'
Expand All @@ -14,8 +13,20 @@ export async function loader({ request }: Route.LoaderArgs) {
return redirect('/users')
}

const like = `%${searchTerm ?? ''}%`
const users = await prisma.$queryRawTyped(searchUsers(like))
const users = await prisma.user.findMany({
where: {
OR: [
{ name: { contains: searchTerm ?? '' } },
{ username: { contains: searchTerm ?? '' } },
],
},
select: {
id: true,
name: true,
username: true,
image: { select: { objectKey: true } },
},
})
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@cursor, the changes in this file are incorrect. This uses a feature of prisma called typed sql. Below are the docs for this feature:

https://www.prisma.io/docs/orm/prisma-client/using-raw-sql/typedsql

title: 'TypedSQL'
metaTitle: 'Writing Type-safe SQL with TypedSQL and Prisma Client'
metaDescription: 'Learn how to use TypedSQL to write fully type-safe SQL queries that are compatible with any SQL console and Prisma Client.'
sidebar_class_name: preview-badge

Getting started with TypedSQL

To start using TypedSQL in your Prisma project, follow these steps:

  1. Ensure you have @prisma/client and prisma installed and updated to at least version 5.19.0.

    npm install @prisma/client@latest
npm install -D prisma@latest

  2. Add the typedSql preview feature flag to your schema.prisma file:

    generator client {
  provider = "prisma-client-js"
  previewFeatures = ["typedSql"]
}

    :::tip[Using driver adapters with TypedSQL]

    If you are deploying Prisma in serverless or edge environments, you can use driver adapters to connect through JavaScript database drivers. Driver adapters are compatible with TypedSQL, with the exception of @prisma/adapter-better-sqlite3. For SQLite support, use @prisma/adapter-libsql instead. All other driver adapters are supported.

    :::

  3. Create a sql directory inside your prisma directory. This is where you'll write your SQL queries.

    mkdir -p prisma/sql

  4. Create a new .sql file in your prisma/sql directory. For example, getUsersWithPosts.sql. Note that the file name must be a valid JS identifier and cannot start with a $.

  5. Write your SQL queries in your new .sql file. For example:

    SELECT u.id, u.name, COUNT(p.id) as "postCount"
FROM "User" u
LEFT JOIN "Post" p ON u.id = p."authorId"
GROUP BY u.id, u.name

  6. Generate Prisma Client with the sql flag to ensure TypeScript functions and types for your SQL queries are created:

    :::warning

    Make sure that any pending migrations are applied before generating the client with the sql flag.

    :::

    prisma generate --sql

    If you don't want to regenerate the client after every change, this command also works with the existing --watch flag:

    prisma generate --sql --watch

  7. Now you can import and use your SQL queries in your TypeScript code:

    import { PrismaClient } from '@prisma/client'
import { getUsersWithPosts } from '@prisma/client/sql'

const prisma = new PrismaClient()

const usersWithPostCounts = await prisma.$queryRawTyped(getUsersWithPosts())
console.log(usersWithPostCounts)

Passing Arguments to TypedSQL Queries

To pass arguments to your TypedSQL queries, you can use parameterized queries. This allows you to write flexible and reusable SQL statements while maintaining type safety. Here's how to do it:

  1. In your SQL file, use placeholders for the parameters you want to pass. The syntax for placeholders depends on your database engine:

    For PostgreSQL, use the positional placeholders `$1`, `$2`, etc.: 
    SELECT id, name, age
FROM users
WHERE age > $1 AND age < $2
    For MySQL, use the positional placeholders `?`: 
    SELECT id, name, age
FROM users
WHERE age > ? AND age < ?
    In SQLite, there are a number of different placeholders you can use. Positional placeholders (`$1`, `$2`, etc.), general placeholders (`?`), and named placeholders (`:minAge`, `:maxAge`, etc.) are all available. For this example, we'll use named placeholders `:minAge` and `:maxAge`: 
    SELECT id, name, age
FROM users
WHERE age > :minAge AND age < :maxAge

    :::note

    See below for information on how to define argument types in your SQL files.

    :::

  2. When using the generated function in your TypeScript code, pass the arguments as additional parameters to $queryRawTyped:

    import { PrismaClient } from '@prisma/client'
import { getUsersByAge } from '@prisma/client/sql'

const prisma = new PrismaClient()

const minAge = 18
const maxAge = 30
const users = await prisma.$queryRawTyped(getUsersByAge(minAge, maxAge))
console.log(users)

By using parameterized queries, you ensure type safety and protect against SQL injection vulnerabilities. The TypedSQL generator will create the appropriate TypeScript types for the parameters based on your SQL query, providing full type checking for both the query results and the input parameters.

Passing array arguments to TypedSQL

TypedSQL supports passing arrays as arguments for PostgreSQL. Use PostgreSQL's ANY operator with an array parameter.

SELECT id, name, email
FROM users
WHERE id = ANY($1)
import { PrismaClient } from '@prisma/client'
import { getUsersByIds } from '@prisma/client/sql'

const prisma = new PrismaClient()

const userIds = [1, 2, 3]
const users = await prisma.$queryRawTyped(getUsersByIds(userIds))
console.log(users)

TypedSQL will generate the appropriate TypeScript types for the array parameter, ensuring type safety for both the input and the query results.

:::note

When passing array arguments, be mindful of the maximum number of placeholders your database supports in a single query. For very large arrays, you may need to split the query into multiple smaller queries.

:::

Defining argument types in your SQL files

Argument typing in TypedSQL is accomplished via specific comments in your SQL files. These comments are of the form:

-- @param {Type} $N:alias optional description

Where Type is a valid database type, N is the position of the argument in the query, and alias is an optional alias for the argument that is used in the TypeScript type.

As an example, if you needed to type a single string argument with the alias name and the description "The name of the user", you would add the following comment to your SQL file:

-- @param {String} $1:name The name of the user

To indicate that a parameter is nullable, add a question mark after the alias:

-- @param {String} $1:name? The name of the user (optional)

Currently accepted types are Int, BigInt, Float, Boolean, String, DateTime, Json, Bytes, null, and Decimal.

Taking the example from above, the SQL file would look like this:

-- @param {Int} $1:minAge
-- @param {Int} $2:maxAge
SELECT id, name, age
FROM users
WHERE age > $1 AND age < $2

The format of argument type definitions is the same regardless of the database engine.

:::note

Manual argument type definitions are not supported for array arguments. For these arguments, you will need to rely on the type inference provided by TypedSQL.

:::

Examples

For practical examples of how to use TypedSQL in various scenarios, please refer to the Prisma Examples repo. This repo contains a collection of ready-to-run Prisma example projects that demonstrate best practices and common use cases, including TypedSQL implementations.

Limitations of TypedSQL

Supported Databases

TypedSQL supports modern versions of MySQL and PostgreSQL without any further configuration. For MySQL versions older than 8.0 and all SQLite versions, you will need to manually describe argument types in your SQL files. The types of inputs are inferred in all supported versions of PostgreSQL and MySQL 8.0 and later.

TypedSQL does not work with MongoDB, as it is specifically designed for SQL databases.

Active Database Connection Required

TypedSQL requires an active database connection to function properly. This means you need to have a running database instance that Prisma can connect to when generating the client with the --sql flag. If a directUrl is provided in your Prisma configuration, TypedSQL will use that for the connection.

Dynamic SQL Queries with Dynamic Columns

TypedSQL does not natively support constructing SQL queries with dynamically added columns. When you need to create a query where the columns are determined at runtime, you must use the $queryRaw and $executeRaw methods. These methods allow for the execution of raw SQL, which can include dynamic column selections.

Example of a query using dynamic column selection:

const columns = 'name, email, age'; // Columns determined at runtime
const result = await prisma.$queryRawUnsafe(
  `SELECT ${columns} FROM Users WHERE active = true`
);

In this example, the columns to be selected are defined dynamically and included in the SQL query. While this approach provides flexibility, it requires careful attention to security, particularly to avoid SQL injection vulnerabilities. Additionally, using raw SQL queries means foregoing the type-safety and DX of TypedSQL.

Acknowledgements

This feature was heavily inspired by PgTyped and SQLx. Additionally, SQLite parsing is handled by SQLx.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Working on it! I'll start making changes in this branch.

Open in Cursor Open in Web

return { status: 'idle', users } as const
}

Expand Down Expand Up @@ -49,7 +60,7 @@ export default function UsersRoute({ loaderData }: Route.ComponentProps) {
>
<Img
alt={user.name ?? user.username}
src={getUserImgSrc(user.imageObjectKey)}
src={getUserImgSrc(user.image?.objectKey)}
className="size-16 rounded-full"
width={256}
height={256}
Expand Down
2 changes: 1 addition & 1 deletion app/utils/auth.server.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import crypto from 'node:crypto'
import { type Connection, type Password, type User } from '@prisma/client'
import { type Connection, type Password, type User } from '#app/utils/prisma-generated.server'

Check warning on line 2 in app/utils/auth.server.ts

View workflow job for this annotation

GitHub Actions / ⬣ ESLint 

`#app/utils/prisma-generated.server` import should occur after import of `remix-utils/safe-redirect`
import bcrypt from 'bcryptjs'
import { redirect } from 'react-router'
import { Authenticator } from 'remix-auth'
Expand Down
5 changes: 3 additions & 2 deletions app/utils/db.server.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { styleText } from 'node:util'
import { remember } from '@epic-web/remember'
// Changed import due to issue: https://github.com/remix-run/react-router/pull/12644
import { PrismaClient } from '@prisma/client/index.js'
import * as PrismaClientModule from '#app/utils/prisma-generated.server/index.js'
const { PrismaClient } = PrismaClientModule
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@cursor, I think we should be able to do this:

Suggested change
import * as PrismaClientModule from '#app/utils/prisma-generated.server/index.js'
const { PrismaClient } = PrismaClientModule
import { PrismaClient } from '#app/utils/prisma-generated.server/client.ts'

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Working on it! I'll start making changes in this branch.

Open in Cursor Open in Web


export const prisma = remember('prisma', () => {
// NOTE: if you change anything in this function you'll need to restart
Expand All @@ -14,6 +14,7 @@ export const prisma = remember('prisma', () => {
log: [
{ level: 'query', emit: 'event' },
{ level: 'error', emit: 'stdout' },
{ level: 'info', emit: 'stdout' },
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Bug: PrismaClient Missing SQLite Adapter

The PrismaClient in app/utils/db.server.ts is instantiated without the SQLite driver adapter. Since the schema uses engineType = "library", Prisma requires this adapter, and its omission will cause database connection failures at runtime.

Fix in Cursor Fix in Web

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@cursor, this is too noisy.

Suggested change
{ level: 'info', emit: 'stdout' },

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Working on it! I'll start making changes in this branch.

Open in Cursor Open in Web

{ level: 'warn', emit: 'stdout' },
],
})
Expand Down
2 changes: 1 addition & 1 deletion eslint.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,6 @@ export default [
rules: { 'react-hooks/rules-of-hooks': 'off' },
},
{
ignores: ['.react-router/*'],
ignores: ['.react-router/*', './app/utils/prisma-generated.server'],
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Bug: ESLint Ignore Pattern Fails Directory Matching

The ESLint ignore pattern '.app/utils/prisma-generated.server' only ignores a file with that exact name, not the directory's contents. This means ESLint will still lint the generated Prisma files, which is inconsistent with the existing glob pattern style.

Fix in Cursor Fix in Web

},
]
Loading
Loading