How to Connect Database in Remix: Simple Guide

To connect a database in Remix, use a server-side database client like Prisma inside your loader or action functions. Initialize the client in a separate module and import it where needed to query your database securely on the server.

Syntax

In Remix, database connections happen on the server side, typically inside loader or action functions. You create a database client instance (e.g., PrismaClient) in a separate file and import it where needed.

Example parts:

• import { PrismaClient } from '@prisma/client': imports the Prisma client.
• const prisma = new PrismaClient(): creates a new client instance.
• export default prisma: exports the client for reuse.
• Use await prisma.model.findMany() inside Remix loaders or actions to query data.

typescript

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

const prisma = new PrismaClient();

export default prisma;

// In your route file
import prisma from '~/db.server';

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

Example

This example shows how to connect to a SQLite database using Prisma in a Remix app. It fetches all items from the database in the loader and displays them.

typescript

// db.server.ts
import { PrismaClient } from '@prisma/client';

const prisma = new PrismaClient();

export default prisma;

// routes/index.tsx
import type { LoaderFunction } from '@remix-run/node';
import { json } from '@remix-run/node';
import prisma from '~/db.server';

export const loader: LoaderFunction = async () => {
  const items = await prisma.item.findMany();
  return json({ items });
};

import { useLoaderData } from '@remix-run/react';

export default function Index() {
  const { items } = useLoaderData<typeof loader>();
  return (
    <main>
      <h1>Items</h1>
      <ul>
        {items.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </main>
  );
}

Output

<main>
  <h1>Items</h1>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</main>

Common Pitfalls

1. Creating multiple PrismaClient instances: This can cause connection issues. Always create one client instance and reuse it.

2. Using database calls on the client side: Remix runs loaders and actions on the server, so database calls must be inside these functions, never in React components directly.

3. Forgetting to handle async properly: Always await database calls inside async loaders or actions.

typescript

/* Wrong: Creating PrismaClient inside loader (creates new client on every request) */
import { PrismaClient } from '@prisma/client';

export const loader = async () => {
  const prisma = new PrismaClient(); // Avoid this
  const items = await prisma.item.findMany();
  return { items };
};

/* Right: Create PrismaClient once in a separate module and import it */
// db.server.ts
import { PrismaClient } from '@prisma/client';
const prisma = new PrismaClient();
export default prisma;

// routes/index.tsx
import prisma from '~/db.server';
export const loader = async () => {
  const items = await prisma.item.findMany();
  return { items };
};

Quick Reference

• Install Prisma and set up your database schema.
• Create a single PrismaClient instance in a db.server.ts file.
• Import the client in Remix loaders or actions to query the database.
• Never use database calls directly in React components.
• Always await async database calls inside server functions.

Key Takeaways

Create and reuse a single PrismaClient instance in a separate module for database access.

Perform database queries only inside Remix loader or action functions on the server.

Always await async database calls to avoid unexpected behavior.

Never run database queries directly in React components to keep client code clean.

Follow Prisma setup steps to connect your database before querying.