Configurer une base de données Prisma avec React Router 7

Apprends à installer, initialiser et utiliser Prisma pour gérer ta base PostgreSQL dans React Router 7. Passe à l’étape full-stack avec un client TypeScript typé.

4 min read
Déverrouillez votre potentiel

avec React Router 7

Vous en avez marre de...

❌ perdre du temps à chercher des informations éparpillées
❌ ne pas avoir de retour sur votre progression
Assistant IA spécialisé

Posez vos questions 24/7 à notre IA experte en React Router 7

Quiz interactifs

Validez vos acquis avec des quiz personnalisés et un feedback instantané

9 modules
57 leçons
Accès à vie
299.49€
-35%

Pourquoi Prisma avec React Router 7 ?

Ton app React Router 7 est full-stack : le serveur Express rend les pages, exécute les loader/action… et, très vite, a besoin de lire/écrire dans une base. Prisma est l’ORM qui colle parfaitement à cette philosophie :

  • schéma déclaratif versionné ;
  • migration SQL automatiques ;
  • client TypeScript généré (typé à 100 %) ;
  • outils DX (Studio, seed, formatteur) intégrés.

Tu vas voir comment l’ajouter pas-à-pas à la base de code construite dans les modules précédents.

Installer Prisma et TSX

install.sh
1
npm install -D prisma

2
npm install -D @prisma/client tsx
  • @prisma/client sera utilisé runtime côté serveur.
  • tsx exécute les scripts TypeScript (seed, migrations) sans transpile.

Initialiser le schéma et la migration

prisma-init.sh
1
npx prisma init

Prisma crée :

1
prisma/

2
├── schema.prisma     # ton schéma de données

3
└── .env              # la chaîne de connexion DATABASE_URL

Dans schema.prisma définis ton premier modèle :

prisma/schema.prisma
1
model User {

2
  id        Int     @id @default(autoincrement())

3
  firstName String

4
  lastName  String

5
  slug      String  @unique

6
  age       Int

7
  active    Boolean @default(true)

8
}

Lance ta 1ère migration :

Terminal
1
npx prisma migrate dev --name init

Prisma écrit le SQL, crée la table User, puis génère le client.

Choisir et connecter ta base Postgres

Dans .env renseigne la connexion :

.env
1
DATABASE_URL="postgresql://postgres@localhost:5432/react_router_7"

Deux options :

  1. Local : tu installes Postgres via Homebrew, APT ou Docker → gratuit mais tu gères les backups.
  2. Prisma Data Platform (--db=postgresql dans prisma create) : base managée, sauvegardes incluses ; payant au-delà du free tier.

Le transcript montre les deux chemins, choisis celui adapté à ton projet.

Générer et utiliser Prisma Client

Les docs suggèrent ceci :

prisma/schema.prisma
1
generator client {

2
  provider = "prisma-client-js"

3
  output   = "../app/generated/prisma" // ⚠️ bug avec React Router 7

4
}

Pour éviter le bug de résolution vu dans la vidéo, commente la ligne output et garde la génération par défaut :

prisma/schema.prisma
1
- output   = "../app/generated/prisma"

Puis regénère :

Terminal
1
npx prisma generate

Remplir la base avec un script seed

prisma/seed.ts
1
import { prisma } from "~/server/db.server";

2


3
const users = [

4
  { firstName: "Virgile", lastName: "Rietsch", slug: "virgile", age: 28 },

5
  { firstName: "Robert",  lastName: "Durand",  slug: "robert",  age: 35 },

6
  { firstName: "John",    lastName: "Doe",     slug: "john",    age: 42 },

7
];

8


9
await prisma.user.deleteMany();          // reset

10
for (const u of users) {

11
  await prisma.user.create({ data: u });

12
}

Ajoute le script dans package.json :

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

Exécute :

Terminal
1
npx prisma db seed

Visualise dans Prisma Studio :

Terminal
1
npx prisma studio

Partager un client unique (singleton)

Réduis les connexions en créant un singleton :

app/server/db.server.ts
1
import { PrismaClient } from "@prisma/client";

2


3
declare global {

4
  var prismaClient: PrismaClient | undefined;

5
}

6


7
globalThis.prismaClient ??= new PrismaClient();

8
export const prisma = globalThis.prismaClient;

Chaque loader/action importe simplement :

app/server/users.server.ts
1
import { prisma } from "~/server/db.server";

Refactorer tes utilitaires serveur

app/server/users.server.ts
1
export async function getUsers() {

2
  return prisma.user.findMany();

3
}

4


5
export async function addUser(data: UserCreateInput) {

6
  const slug = createSlug(data.firstName);

7
  await prisma.user.create({ data: { ...data, slug } });

8
  return slug;

9
}

10


11
export async function updateUser(slug: string, data: UserUpdateInput) {

12
  await prisma.user.update({ where: { slug }, data });

13
}

14


15
export async function deleteUser(slug: string) {

16
  await prisma.user.delete({ where: { slug } });

17
}

18


19
export const createSlug = (name: string) =>

20
  name.toLowerCase().replace(/ /g, "-");

Tes routes dynamiques (users.$userSlug.tsx) n’utilisent plus le faux tableau db.users ; elles appellent maintenant ces helpers.

Récap’ des points clés

  • Installation via npm i prisma @prisma/client tsx.
  • prisma init crée le schéma ; migrate dev génère la table.
  • Base PostgreSQL locale ou managée (Prisma Data Platform).
  • Bug React Router 7 ↔︎ Prisma 6.7 : commente output dans le générateur.
  • seed.ts + npx prisma db seed pour injecter tes données de test.
  • Singleton prisma pour éviter les multiples connexions en dev (HMR).
  • Toutes tes loader/action appellent désormais Prisma → données persistées, pas de mock en mémoire.
Premium
Quiz interactif
Testez vos connaissances et validez votre compréhension du module avec notre quiz interactif.
1

Comprendre les concepts fondamentaux

Quelle est la principale différence entre les composants client et serveur dans React ?

Les composants client s'exécutent uniquement dans le navigateur
Les composants serveur peuvent utiliser useState
Les composants client sont plus rapides
Il n'y a aucune différence significative
2

Optimisation des performances

Quelle technique est recommandée pour éviter les rendus inutiles dans React ?

Utiliser React.memo pour les composants fonctionnels
Ajouter plus d'états locaux
Éviter d'utiliser les props
Toujours utiliser les class components
3

Architecture des données

Quel hook permet de gérer les effets de bord dans un composant React ?

useEffect
useState
useMemo
useContext
4

Gestion des erreurs

Comment implémenter la gestion des erreurs pour les requêtes API dans React ?

Utiliser try/catch avec async/await
Ignorer les erreurs
Toujours afficher un message d'erreur
Rediriger l'utilisateur
5

Déploiement et CI/CD

Quelle est la meilleure pratique pour déployer une application React en production ?

Utiliser un service CI/CD comme GitHub Actions
Copier les fichiers manuellement via FTP
Envoyer le code source complet
Ne jamais mettre à jour l'application

Débloquez ce quiz et tous les autres contenus premium en achetant ce cours

Dans cette leçon