Skip to main content

How to use Prisma ORM with SolidStart

10 min

Introduction​

Prisma ORM streamlines database access with type-safe queries and a smooth developer experience. SolidStart, a modern framework for building reactive web apps with SolidJS, pairs well with Prisma and Postgres to create a clean and scalable full-stack architecture.

In this guide, you'll learn how to integrate Prisma ORM with a Prisma Postgres database in a SolidStart project from scratch. You can find a complete example of this guide on GitHub.

Prerequisites​

Before getting started, make sure you have the following installed:

  • Node.js 18+ installed

Step 1: Set Up a SolidStart Project​

Begin by creating a new SolidStart app. In your terminal, run:

npm init solid@latest
info

Use the following options when prompted:

  • Project name: my-solid-prisma-app (or any name you prefer)
  • Is this a SolidStart project: yes
  • Template: bare
  • Use TypeScript: yes

Next, navigate into your new project, install dependencies, and start the development server:

cd my-solid-prisma-app
npm install
npm run dev

Once the dev server is running, open http://localhost:3000 in your browser. You should see the SolidStart welcome screen.

Let's clean up the default UI by editing the app.tsx file and replacing the header:

src/app.tsx
import { createSignal } from "solid-js";
import "./app.css";

export default function App() {
  const [count, setCount] = createSignal(0);

  return (
    <main>
      <h1>SolidStart + Prisma</h1>
      <h1>Hello world!</h1>
      <button class="increment" onClick={() => setCount(count() + 1)} type="button">
        Clicks: {count()}
      </button>
      <p>
        Visit{" "}
        <a href="https://start.solidjs.com" target="_blank">
          start.solidjs.com
        </a>{" "}
        to learn how to build SolidStart apps.
      </p>
    </main>
  );
}

Your app.tsx file should now look like this:

src/app.tsx
import "./app.css";

export default function App() {
  return (
    <main>
      <h1>SolidStart + Prisma</h1>
    </main>
  );
}

Step 2: Install and Initialize Prisma​

To get started with Prisma, you'll need to install a few dependencies:

npm install prisma @prisma/client --save-dev
npm install tsx --save-dev
npm install @prisma/extension-accelerate
info

If you're not using a Prisma Postgres database, you can skip @prisma/extension-accelerate.

Once installed, initialize Prisma in your project:

npx prisma init --db --output ../src/generated/prisma

This will create:

  • A prisma/ directory with a schema.prisma file
  • A .env file with a DATABASE_URL already set

Step 2.1: Define Your Prisma Schema​

Open the prisma/schema.prisma file and add the following models and change the generator to use the prisma-client provider:

prisma/schema.prisma
generator client {
  provider = "prisma-client"
  provider = "prisma-client-js"
  output   = "../src/generated/prisma"
}

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

model User {
  id    Int     @id @default(autoincrement())
  email String  @unique
  name  String?
  posts Post[]
}

model Post {
  id        Int     @id @default(autoincrement())
  title     String
  content   String?
  published Boolean @default(false)
  authorId  Int
  author    User    @relation(fields: [authorId], references: [id])
}

This creates two models: User and Post, with a one-to-many relationship between them.

Now, run the following command to create the database tables and generate the Prisma Client:

npx prisma migrate dev --name init

Step 2.2: Seed the Database​

Let's add some seed data to populate the database with sample users and posts.

Create a new file called seed.ts in the prisma/ directory:

prisma/seed.ts
import { PrismaClient, Prisma } from "../src/generated/prisma";

const prisma = new PrismaClient();

const userData: Prisma.UserCreateInput[] = [
  {
    name: "Alice",
    email: "alice@prisma.io",
    posts: {
      create: [
        {
          title: "Join the Prisma Discord",
          content: "https://pris.ly/discord",
          published: true,
        },
        {
          title: "Prisma on YouTube",
          content: "https://pris.ly/youtube",
        },
      ],
    },
  },
  {
    name: "Bob",
    email: "bob@prisma.io",
    posts: {
      create: [
        {
          title: "Follow Prisma on Twitter",
          content: "https://www.twitter.com/prisma",
          published: true,
        },
      ],
    },
  },
];

export async function main() {
  for (const u of userData) {
    await prisma.user.create({ data: u });
  }
}

main();

Now, tell Prisma how to run this script by updating your package.json:

package.json
"prisma": {
  "seed": "tsx prisma/seed.ts"
}

Run the seed script:

npx prisma db seed

And open Prisma Studio to inspect your data:

npx prisma studio

Step 3: Use Prisma Client in Your Application​

Step 3.1: Create a Prisma Client​

At the root of your project, create a new lib folder and a prisma.ts file inside it:

mkdir -p lib && touch lib/prisma.ts

Add the following code to create a Prisma Client instance:

lib/prisma.ts
import { PrismaClient } from "../src/generated/prisma";
import { withAccelerate } from "@prisma/extension-accelerate";

const prisma = new PrismaClient().$extends(withAccelerate());

export default prisma;
info

If you're not using Prisma Postgres, remove .$extends(withAccelerate()).

Step 3.2: Create an API Route​

Now, let's fetch data from the database using an API route.

Create a new file at src/routes/api/users.ts:

src/routes/api/users.ts
import prisma from "../../lib/prisma";

export async function GET() {
  const users = await prisma.user.findMany({
    include: {
      posts: true,
    },
  });
  return new Response(JSON.stringify(users), {
    headers: { "Content-Type": "application/json" },
  });
}

Step 4: Fetch Data in Your Component​

In your app.tsx file, use createResource to fetch data from your new API route:

src/app.tsx
import "./app.css";
import { createResource } from "solid-js";
import { User, Post } from "@prisma/client";

type UserWithPosts = User & {
  posts: Post[];
};

const fetchUsers = async () => {
  const res = await fetch("http://localhost:3000/api/users");
  return res.json();
};

export default function App() {
  const [users, { mutate, refetch }] = createResource<UserWithPosts[]>(fetchUsers);

  return (
    <main>
      <h1>SolidStart + Prisma</h1>
    </main>
  );
}
info

createResource is a SolidJS hook for managing async data. It tracks loading and error states automatically. Learn more.

Step 5: Display the Data​

To show the users and their posts, use SolidJS's <For> component:

src/app.tsx
import "./app.css";
import { createResource, For } from "solid-js";
import { User, Post } from "@prisma/client";

type UserWithPosts = User & {
  posts: Post[];
};

const fetchUsers = async () => {
  const res = await fetch("http://localhost:3000/api/users");
  return res.json();
};

export default function App() {
  const [users, { mutate, refetch }] =
    createResource<UserWithPosts[]>(fetchUsers);

  return (
    <main>
      <h1>SolidJS + Prisma</h1>
      <For each={users() ?? []}>
        {(user) => (
          <div>
            <h3>{user.name}</h3>
            <For each={user.posts}>{(post) => <p>{post.title}</p>}</For>
          </div>
        )}
      </For>
    </main>
  );
}
info

<For> loops through an array reactively. Think of it like .map() in React. Learn more

Step 6: Add Loading and Error States​

Use SolidJS's <Show> component to handle loading and error conditions:

src/app.tsx
import "./app.css";
import { createResource, For, Show } from "solid-js";
import { User, Post } from "@prisma/client";

type UserWithPosts = User & {
  posts: Post[];
};

const fetchUsers = async () => {
  const res = await fetch("http://localhost:3000/api/users");
  return res.json();
};

export default function App() {
  const [users, { mutate, refetch }] =
    createResource<UserWithPosts[]>(fetchUsers);

  return (
    <main>
      <h1>SolidJS + Prisma</h1>
      <Show when={!users.loading} fallback={<p>Loading...</p>}>
        <Show when={!users.error} fallback={<p>Error loading data</p>}>
          <For each={users()}>
            {(user) => (
              <div>
                <h3>{user.name}</h3>
                <For each={user.posts}>{(post) => <p>{post.title}</p>}</For>
              </div>
            )}
          </For>
        </Show>
      </Show>
    </main>
  );
}
info

<Show> conditionally renders content. It's similar to an if statement. Learn more

Next Steps​

Now that you have a working SolidStart app connected to a Prisma Postgres database, you can:

  • Extend your Prisma schema with more models and relationships
  • Add create/update/delete routes and forms
  • Explore authentication, validation, and optimistic updates

More Info​


Stay connected with Prisma

Continue your Prisma journey by connecting with our active community. Stay informed, get involved, and collaborate with other developers:

We genuinely value your involvement and look forward to having you as part of our community!