Hoppa till huvudinnehåll

Databas med Prisma och SQLite 💾

Modulsmål 🎯​

Efter denna modul kan du:

  • ✅ Installera och konfigurera Prisma med SQLite
  • ✅ Definiera datamodeller med Prisma Schema
  • ✅ Använda Prisma Client för CRUD operations
  • ✅ Migrera från in-memory storage till riktig databas
  • ✅ Hantera relationer mellan tabeller
Från arrays till riktig databas! 💪

Hittills har vi sparat data i arrays som försvinner när servern startar om. Nu lär vi oss att spara data permanent i en databas!

Vad är Prisma? 🤔​

Prisma är en modern ORM (Object-Relational Mapping) som:

  • Gör det enkelt att prata med databaser
  • Ger dig type-safety automatiskt
  • Hanterar migrations åt dig
  • Fungerar med TypeScript out-of-the-box

SQLite är en:

  • Liten, snabb databas som sparas som en fil
  • Perfect för utveckling och små projekt
  • Inget setup behövs - bara kör!

Projekt: Uppdatera din Forum-app 🔄​

Vi ska ta din forum-app från förra modulen och byta ut array-storage mot en riktig databas!

Steg 1: Installera Prisma 🛠️​

# I ditt forum-app projekt
npm install prisma @prisma/client

# Initiera Prisma med SQLite
npx prisma init --datasource-provider sqlite

Detta skapar:

  • prisma/ mapp med schema.prisma
  • .env fil med databas-URL

Steg 2: Definiera din datamodell 📋​

Öppna prisma/schema.prisma och ersätt innehållet:

// This is your Prisma schema file,
// learn more about it in the docs: https://pris.ly/d/prisma-schema

generator client {
  provider = "prisma-client-js"
}

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

model Forum {
  id          String    @id @default(uuid())
  name        String    @unique
  description String
  createdAt   DateTime  @default(now())
  // Hur skulle du lägga till messages här?
}

// Skapa en Message model här
// Tips: kolla dokumentet för exempel på relationer
Uppgift! 🎯

Fyll i Message-modellen själv. Tänk på:

  • Vilka fält behöver ett meddelande?
  • Hur ska det kopplas till Forum?
  • Kolla exemplet i dokumentet för inspiration!

Steg 3: Skapa databasen 🔨​

# Detta skapar SQLite-filen och tabellerna
npx prisma db push

Grattis! Du har nu en riktig databas! 🎉

Steg 4: Konfigurera Prisma Client 🔧​

Uppdatera src/lib/index.ts:

// src/lib/index.ts
import { PrismaClient } from '@prisma/client';

export const prisma = new PrismaClient();

// Ta bort dina gamla array-baserade funktioner
// Vi använder Prisma direkt nu!

Steg 5: Uppdatera dina load functions 📝​

I src/routes/forums/+page.server.ts:

// src/routes/forums/+page.server.ts
import type { PageServerLoad, Actions } from './$types';
import { prisma } from '$lib';
import { fail } from '@sveltejs/kit';

export const load = (async () => {
  // Hur skulle du hämta alla forum från databasen?
  // Tips: prisma.forum.findMany()
  
}) satisfies PageServerLoad;

export const actions = {
  create: async ({ request }) => {
    const data = await request.formData();
    const name = data.get('name')?.toString();
    const description = data.get('description')?.toString();
    
    // Validering här...
    
    try {
      // Hur skulle du skapa ett nytt forum?
      // Tips: prisma.forum.create({ data: { ... } })
      
      return { success: true };
    } catch (error) {
      // Vad händer om forum-namnet redan finns?
      return fail(400, { error: 'Forum finns redan' });
    }
  }
} satisfies Actions;

Steg 6: Uppdatera dynamiska routes 🎯​

I src/routes/forums/[forum]/+page.server.ts:

import { prisma } from '$lib';
import { error } from '@sveltejs/kit';

export const load = (async ({ params }) => {
  const forumName = params.forum;
  
  // Hitta forumet OCH dess meddelanden
  const forum = await prisma.forum.findUnique({
    where: { name: forumName },
    include: { /* Vad ska stå här? */ }
  });
  
  if (!forum) {
    throw error(404, 'Forum hittades inte');
  }
  
  return {
    forum,
    messages: forum.messages // Om du inkluderade dem ovan
  };
}) satisfies PageServerLoad;

export const actions = {
  message: async ({ request, params }) => {
    // Skapa nytt meddelande med Prisma
    // Tips: använd connect för att koppla till forum
  }
} satisfies Actions;

Viktiga Prisma-koncept 🧠​

1. Grundläggande operationer​

// Skapa
const newForum = await prisma.forum.create({
  data: {
    name: 'gaming',
    description: 'Diskutera spel här!'
  }
});

// Läsa
const allForums = await prisma.forum.findMany();
const oneForum = await prisma.forum.findUnique({
  where: { id: 'some-uuid' }
});

// Uppdatera
const updated = await prisma.forum.update({
  where: { id: 'some-uuid' },
  data: { description: 'Ny beskrivning' }
});

// Ta bort
await prisma.forum.delete({
  where: { id: 'some-uuid' }
});

2. Relationer och include​

// Hämta forum MED dess meddelanden
const forumWithMessages = await prisma.forum.findUnique({
  where: { name: 'gaming' },
  include: { messages: true }
});

// Skapa meddelande kopplat till forum
await prisma.message.create({
  data: {
    content: 'Hej!',
    author: 'SpelareBob',
    forum: {
      connect: { id: 'forum-uuid' }
    }
  }
});

3. Felhantering​

try {
  await prisma.forum.create({
    data: { name: 'gaming' } // Redan finns
  });
} catch (error) {
  if (error.code === 'P2002') {
    // Unique constraint violation
    return fail(400, { error: 'Forum finns redan' });
  }
  throw error;
}

Uppgifter att lösa 📝​

Grundnivå:​

  1. Få grundfunktionaliteten att fungera
    • Definiera Message-modellen korrekt
    • Uppdatera alla load functions att använda Prisma
    • Testa att skapa forum och meddelanden

Mellannivå:​

  1. Lägg till mer funktionalitet
    • Ta bort forum och meddelanden
    • Redigera forum-beskrivningar
    • Sök-funktionalitet

Expertnivå:​

  1. Avancerade features
    • Sortering av meddelanden (senaste först)
    • Paginering för stora forum
    • Statistik (antal meddelanden per forum)

Debugging och verktyg 🔧​

Prisma Studio​

# Öppna visuell databas-editor
npx prisma studio

Detta öppnar en webgränssnitt där du kan:

  • Se all data i databasen
  • Redigera data direkt
  • Testa queries

Prisma generate​

# Regenerera Prisma Client (kör efter schema-ändringar)
npx prisma generate

Database reset​

# Återställ databasen (raderar all data!)
npx prisma db push --force-reset

Vanliga problem 🚨​

❌ "Cannot find module '@prisma/client'"​

Lösning: Kör npx prisma generate

❌ "Table 'Forum' doesn't exist"​

Lösning: Kör npx prisma db push

❌ "Unique constraint failed"​

Lösning: Du försöker skapa något som redan finns (t.ex. forum med samma namn)

❌ Types stämmer inte​

Lösning: Kör npx prisma generate efter schema-ändringar

❌ Du kan inte köra npx prisma generate​

Lösning: Kör se till att utvecklingsservern är avstängd (CTRL+C i terminalfönstret du kört npm run dev i)

❌ Servern kör inte längre​

Lösning: Kör npm run dev i korrekt mapp för att starta servern

Tips 💡​

  1. Använd Prisma Studio för att se vad som händer i databasen
  2. Läs felmeddelanden - Prisma ger bra error messages
Utvecklingsworkflow 🔄
  1. Ändra schema.prisma
  2. Kör npx prisma db push
  3. Kör npx prisma generate
  4. Uppdatera din kod

Nästa steg 🚀​

Nu när du har en riktig databas, nästa modul handlar om relationer och mer avancerade dataoperationer. Vi ska bygga en marknadsplats där du verkligen får träna på komplexa relationer!

Resurser 📚​