Blog

Jan 4, 2025

Storing and Querying Relational Data with Prisma in a SvelteKit App

Discover how conducting user research can inform design decisions and lead to better user satisfaction.

Isaque Ferreira

Linkdeln
Linkdeln
Linkdeln
X
X
X
Instagram
Instagram
Instagram

Modern web applications often require the ability to manage and interact with complex relational data — whether for handling users, organizations, events, or various forms of user interactions. This article demonstrates how to efficiently store and query relational data using Prisma ORM within a SvelteKit application.

The structure and patterns shown here are ideal for apps such as church platforms, event management systems, or any solution that depends on scalable, well-structured data relationships.

Use Case Example: Church Platform

To make it practical, let’s say I’m building a basic structure for a church management system:

  • User: a person who logs into the app

  • Church: an organization that users belong to

  • Event: something the church hosts (like a service or meeting)

  • Attendance: a record of users attending events

Step 1: Setting Up Prisma in SvelteKit:

Then I create a helper to access Prisma in src/lib/server/prisma.ts:

Step 2: Define the Prisma Schema

In prisma/schema.prisma, I define the models like this:

Then I run the migration:
npx prisma migrate dev --name init

Step 3: Seeding Some Data (Optional)

For quick testing, I seed the database with a script:

Run it with:

Step 4: Querying Relational Data in the App:
In src/routes/dashboard/+page.server.ts, I fetch the data like this:

And in the page component (+page.svelte):

<script lang="ts">  export let data;</script>{#each data.churches as church}  <h2>{church.name}</h2>  <h3>Users:</h3>  <ul>    {#each church.users as user}      <li>{user.name} ({user.email})</li>    {/each}  </ul>  <h3>Events:</h3>  {#each church.events as event}    <div>      <strong>{event.title}</strong> – {new Date(event.date).toLocaleDateString()}      <ul>        {#each event.attendances as attendance}          <li>{attendance.user.name} attended on {new Date(attendance.createdAt).toLocaleString()}</li>        {/each}      </ul>    </div>

Why I Use This Setup

This structure lets me:

  • Keep data normalized and fast to query

  • Easily show nested data in the UI

  • Handle complex logic like filtering attendances or grouping events by church

  • Maintain clean code with Prisma’s type safety

Whether I’m building an app for a church, a client, or an internal tool, SvelteKit + Prisma helps me move fast while staying organized.

Background
light
light

Stay Updated with Us

Stay Updated with Us

Ready to advance your skills? Sign up now and start your learning journey with us!

Ready to advance your skills? Sign up now and start your learning journey with us!

Instant Access

Boost Productivity

Easy Setup

No spam, just genuine updates!

Background
light

Stay Updated with Us

Ready to advance your skills? Sign up now and start your learning journey with us!

Instant Access

Boost Productivity

Easy Setup

No spam, just genuine updates!

Logo

Working for the Glory of God and for the Kingdom of our Lord Jesus Christ

Linkdeln
X

Canada

201 - 1065 Canadian Place #1061 Mississauga, ON L4W 0C2 Canada

Brazil

Paulista Avenue - São Paulo - Bela Vista District - Number 171 01311-904

© Perdoado. All rights reserved. Contact us for more solutions.

Logo

Working for the Glory of God and for the Kingdom of our Lord Jesus Christ

Linkdeln
X

Canada

201 - 1065 Canadian Place #1061 Mississauga, ON L4W 0C2 Canada

Brazil

Paulista Avenue - São Paulo - Bela Vista District - Number 171 01311-904

© Perdoado. All rights reserved. Contact us for more solutions.

Logo

Working for the Glory of God and for the Kingdom of our Lord Jesus Christ

Linkdeln
X

Canada

201 - 1065 Canadian Place #1061 Mississauga, ON L4W 0C2 Canada

Brazil

Paulista Avenue - São Paulo - Bela Vista District - Number 171 01311-904

© Perdoado. All rights reserved. Contact us for more solutions.