How to Use Prisma with Remix: Setup and Example

To use Prisma with Remix, install Prisma and set up your database schema, then create a Prisma client instance to query your database inside Remix loaders or actions. Use Remix's server-side functions to call Prisma methods for fetching or modifying data securely.

Syntax

Here is the basic syntax to use Prisma in a Remix app:

• Import the PrismaClient from @prisma/client.
• Create a single PrismaClient instance to reuse across requests.
• Use Prisma methods like findMany or create inside Remix loaders or actions.
• Return data from loaders to your components for rendering.

typescript

import { PrismaClient } from '@prisma/client';

const prisma = new PrismaClient();

export async function loader() {
  const items = await prisma.item.findMany();
  return { items };
}

Example

This example shows a simple Remix loader fetching all users from a database using Prisma and returning them as JSON.

typescript

import { PrismaClient } from '@prisma/client';
import type { LoaderFunction } from '@remix-run/node';

const prisma = new PrismaClient();

export const loader: LoaderFunction = async () => {
  const users = await prisma.user.findMany();
  return new Response(JSON.stringify(users), {
    headers: { 'Content-Type': 'application/json' },
  });
};

Output

[{"id":1,"name":"Alice"},{"id":2,"name":"Bob"}]

Common Pitfalls

Common mistakes when using Prisma with Remix include:

• Creating a new PrismaClient instance on every request, which can exhaust database connections.
• Not handling async/await properly in loaders or actions.
• Forgetting to close the PrismaClient connection in development with hot reloads.

Use a singleton pattern for PrismaClient and handle async calls correctly.

typescript

/* Wrong: Creating PrismaClient inside loader (bad for connection pooling) */
export async function loader() {
  const prisma = new PrismaClient();
  const data = await prisma.item.findMany();
  return { data };
}

/* Right: Create PrismaClient once outside loader */
const prisma = new PrismaClient();
export async function loader() {
  const data = await prisma.item.findMany();
  return { data };
}

Quick Reference

Concept	Description
PrismaClient	Main class to interact with your database
findMany()	Fetch multiple records from a table
loader()	Remix server function to load data before rendering
Singleton PrismaClient	Create one instance to reuse across requests
Async/Await	Use to handle asynchronous database calls

Key Takeaways

Create a single PrismaClient instance outside Remix loaders or actions to avoid connection issues.

Use Prisma methods inside Remix loaders or actions to fetch or modify data securely.

Always handle async/await properly when calling Prisma in Remix server functions.

Return data from loaders to your components for rendering dynamic content.

Close PrismaClient connections in development to prevent errors with hot reloads.