# TanStack Start (Prisma ORM v7) (/docs/guides/v7/frameworks/tanstack-start)

> For the complete Prisma documentation index, see [llms.txt](https://www.prisma.io/docs/llms.txt). A markdown version of any docs page is available by appending `.md` to its URL.

Learn how to use Prisma ORM in a TanStack Start app

Location: Guides > v7 > Frameworks > TanStack Start

## Introduction [#introduction]

[TanStack Start](https://tanstack.com/start/latest/docs/framework/react/guide/server-functions) runs server functions alongside your React routes, which is where you call Prisma ORM to read from a [Prisma Postgres](https://www.prisma.io/postgres) database.

This guide shows you how to integrate Prisma ORM with a Prisma Postgres database in a TanStack Start project from scratch.

## Quick start [#quick-start]

Run one command to scaffold a TanStack Start project with Prisma ORM and Prisma Postgres ready to go:

  

#### bun

```bash
bunx create-prisma@stable --template tanstack-start
```

#### pnpm

```bash
pnpm create prisma@stable --template tanstack-start
```

#### yarn

```bash
yarn create prisma@stable --template tanstack-start
```

#### npm

```bash
npm create prisma@stable -- --template tanstack-start
```

Or follow the steps below to set it up manually.

## Prerequisites [#prerequisites]

* [Node.js 20+](https://nodejs.org)

## 1. Set up your project [#1-set-up-your-project]

To begin, create a new TanStack Start project.

  

#### bun

```bash
bun create @tanstack/start@latest
```

#### pnpm

```bash
pnpm create @tanstack/start@latest
```

#### yarn

```bash
yarn create @tanstack/start@latest
```

#### npm

```bash
npm create @tanstack/start@latest
```

> [!NOTE]
> * *What would you like to name your project?* tanstack-start-prisma
> * *Would you like to use Tailwind CSS?* No
> * *Select Toolchain* None
> * *Select deployment adapter* Nitro
> * *What add-ons would you like for your project?* Prisma
> * *Would you like any examples?* No
> * *Prisma: Database Provider* Prisma PostgresSQL

This will create a new folder called `tanstack-start-prisma` and provision a new Prisma Postgres database. At the end of the setup, the CLI will display the database connection string:

```
●  Database Connection
│
│    Connection String:
│
│    postgresql://username:password@db.prisma.io:5432/postgres
●
```

> [!WARNING]
> The database is **temporary** and will be deleted after 24 hours. To keep it permanently, follow the claim link shown in the CLI output.

Navigate to your project directory:

```bash
cd tanstack-start-prisma
```

Then, add the connection string you copied to your `.env` file:

```bash title=".env"
DATABASE_URL="postgresql://username:password@db.prisma.io:5432/postgres"
```

## 2. Configure Prisma [#2-configure-prisma]

### 2.1. Define your Prisma Schema [#21-define-your-prisma-schema]

In `schema.prisma`, the model for our todos is defined below the generator and datasource blocks:

```prisma title="prisma/schema.prisma"
generator client {
  provider = "prisma-client"
  output   = "../app/generated/prisma"
}

datasource db {
  provider = "postgresql"
}

model Todo {
  id        Int      @id @default(autoincrement())
  title     String
  createdAt DateTime @default(now())
}
```

This creates a `Todo` model that will be pushed to the database

### 2.2. Run migrations and generate Prisma Client [#22-run-migrations-and-generate-prisma-client]

Now, run the following command to create the database tables:

  

#### bun

```bash
bun run db:migrate --name init
```

#### pnpm

```bash
pnpm run db:migrate --name init
```

#### yarn

```bash
yarn db:migrate --name init
```

#### npm

```bash
npm run db:migrate -- --name init
```

Generate the Prisma Client needed for the project:

  

#### bun

```bash
bun run db:generate
```

#### pnpm

```bash
pnpm run db:generate
```

#### yarn

```bash
yarn db:generate
```

#### npm

```bash
npm run db:generate
```

### 2.3. Seed the database [#23-seed-the-database]

Then seed the project with the `seed.ts` file in the `prisma/` directory:

  

#### bun

```bash
bun run db:seed
```

#### pnpm

```bash
pnpm run db:seed
```

#### yarn

```bash
yarn db:seed
```

#### npm

```bash
npm run db:seed
```

And open Prisma Studio to inspect your data:

  

#### bun

```bash
bun run db:studio
```

#### pnpm

```bash
pnpm run db:studio
```

#### yarn

```bash
yarn db:studio
```

#### npm

```bash
npm run db:studio
```

## 3. Integrate Prisma into TanStack Start [#3-integrate-prisma-into-tanstack-start]

### 3.1 The Prisma Client [#31-the-prisma-client]

Instead of creating a new Prisma Client instance in each file, TanStack Start has a `db.ts` that
creates a single instance that can be shared globally

```tsx title="src/db.ts"
import { PrismaClient } from "./generated/prisma/client.js";

import { PrismaPg } from "@prisma/adapter-pg";

const adapter = new PrismaPg({
  connectionString: process.env.DATABASE_URL!,
});

declare global {
  var __prisma: PrismaClient | undefined;
}

export const prisma = globalThis.__prisma || new PrismaClient({ adapter });

if (process.env.NODE_ENV !== "production") {
  globalThis.__prisma = prisma;
}
```

### 3.2 Fetch data on load [#32-fetch-data-on-load]

First, import the necessary modules. Then, create a server function using the [`createServerFn`](https://tanstack.com/start/latest/docs/framework/react/guide/server-functions) function. This function will fetch the data from the database using the `.findMany()` method

```typescript title="src/routes/index.tsx"
import { createFileRoute } from "@tanstack/react-router";
import { createServerFn } from "@tanstack/react-start"; // [!code ++]
import { prisma } from '../db'; // [!code ++]

export const Route = createFileRoute("/")({
  component: Home,
});

const getTodos = createServerFn({ method: "GET" }).handler(async () => { // [!code ++]
  return prisma.todo.findMany(); // [!code ++]
}); // [!code ++]

function Home() {
  return (
    <div>
    </div>
  );
}
```

TanStack Start allows functions to run on load with loader functions in the [`createFileRoute`](https://tanstack.com/router/latest/docs/framework/react/api/router/createFileRouteFunction) function. Fetch the users and their posts on load with this code:

```typescript title="app/routes/index.tsx"
import { createFileRoute } from '@tanstack/react-router';
import { createServerFn } from '@tanstack/react-start';
import { prisma } from '../db';

export const Route = createFileRoute("/")({
  component: Home,
  loader: () => { // [!code ++]
    return getTodos(); // [!code ++]
  }, // [!code ++]
});

const getTodos = createServerFn({ method: "GET" }).handler(async () => {
  return prisma.todo.findMany();
});

function Home() {
  return (
    <div>
      <h1>Todos</h1>
    </div>
  );
}
```

Store the response from the loader in the main component using [`Route.useLoaderData()`](https://tanstack.com/router/latest/docs/framework/react/api/router/useLoaderDataHook):

```typescript title="app/routes/index.tsx"
import { createServerFn } from "@tanstack/react-start";
import { createFileRoute } from "@tanstack/react-router";
import { prisma } from '../db';

export const Route = createFileRoute("/")({
  component: Home,
  loader: () => {
    return getTodos();
  },
});

const getTodos = createServerFn({ method: "GET" }).handler(async () => {
  return prisma.todo.findMany();
});

function Home() {
  const todos = Route.useLoaderData(); // [!code ++]

  return (
    <div>
      <h1>Todos</h1>
    </div>
  );
}
```

### 3.3 Display the todos [#33-display-the-todos]

Next, you'll update the home page to display the data retrieved from your database.

Map over the `todos` and display them in a list:

```typescript title="app/routes/index.tsx"
import { createFileRoute } from '@tanstack/react-router';
import { createServerFn } from '@tanstack/react-start';
import { prisma } from '../db';

export const Route = createFileRoute('/')({
  component: App,
  loader: () => getTodos(),
});

const getTodos = createServerFn({ method: 'GET' }).handler(async () => {
  return prisma.todo.findMany();
});

function App() {
  const todos = Route.useLoaderData();

  return (
    <div>
      <ul>
        {todos.map(todo => (
          <li key={todo.id}>{todo.title}</li>
        ))}
      </ul>
    </div>
  );
}
```

This setup will display the todos on your page, fetched directly from your database.

## Next steps [#next-steps]

Your TanStack Start app now loads todos from a Prisma Postgres database through a server function. A few suggestions for what to do next:

* Expand your Prisma models to handle more complex data relationships.
* Implement additional CRUD operations.
* Check out [Prisma Postgres](https://www.prisma.io/postgres) to see how you can scale your application.

## More info [#more-info]

* [Prisma ORM Documentation](https://www.prisma.io/docs/orm/v7)
* [TanStack Start Documentation](https://tanstack.com/start/latest/docs/framework/react/overview)

## Related pages

- [`Astro`](https://www.prisma.io/docs/guides/v7/frameworks/astro): Learn how to use Prisma ORM in an Astro app
- [`Elysia`](https://www.prisma.io/docs/guides/v7/frameworks/elysia): Learn how to use Prisma ORM in an Elysia app
- [`Hono`](https://www.prisma.io/docs/guides/v7/frameworks/hono): Learn how to use Prisma ORM in a Hono app
- [`NestJS`](https://www.prisma.io/docs/guides/v7/frameworks/nestjs): Learn how to use Prisma ORM in a NestJS app
- [`Next.js`](https://www.prisma.io/docs/guides/v7/frameworks/nextjs): Learn how to use Prisma ORM in a Next.js app and deploy it to Vercel