Prisma, TypeScript

Getting Started with Prisma

23 Lessons

Ryan Chenkie

Full Stack Instructor

Prisma offers an ORM and suite of tools that make it incredibly easy to work with databases, especially in a type-safe manner. Prisma's ORM offers full type safety when querying our databases, meaning that writing queries becomes faster and far less error-prone. Prisma also offers tools for migrations, database seeding, viewing/editing data, and much more. In this course, we take a look at how to get going using Prisma in a Next.js application. We find out how to define a data model, how to query our database to return results, and how to work with relations.

Welcome and Getting Started

Clone the Finished Project and Install Dependencies

Clone the Starting Point and Install Dependencies

Install the Prisma VS Code Extension

Installing and Initializing Prisma

Install the Prisma CLI and Prisma Client

Initialize Prisma in the Project

Our First Data Model

View and Manage Database Tables with Prisma Studio

Define a Data Model in the Prisma Schema

Add a Table to the Database with a Prisma Migration

Querying for Data from the App

Query for Data in getSeverSideProps

Enable Query Logging in Prisma Client

Create Data Using Prisma Client

Modelling Relations

Define Multiple Data Models in the Prisma Schema

Define a One-to-Many Relation in the Prisma Schema

Define a Many-to-Many Relation in the Prisma Schema

Create Related Records Using Prisma Studio

Prisma Queries for Full CRUD

Update and Delete Providers Data with Prisma Client

Update and Delete Posts Data with Prisma Client

Use Prisma Queries while Server-Side Rendering a Next.js App

Query for Data with Relations in getServerSideProps

Update and Delete Campaigns Data with Prisma Client

Prisma Types

Use Prisma Types in a Next.js App

Use Prisma Types in Next.js API Routes

Wrapping Up

Use a Global Prisma Client Instance

Welcome and Getting Started

Clone the Finished Project and Install Dependencies

SocialCue repo: https://github.com/chenkie/socialcue In this lesson we clone and get it set up in its finished state. Having a copy of the completed app is useful for reference while moving through the course.

;

Clone the Starting Point and Install Dependencies

In this lesson we see how to clone the starting point of the SocialCue repo so that we can work from a (somewhat) blank slate to get Prisma in place.

;

Install the Prisma VS Code Extension

Prisma offers an extension for VS Code that helps greatly with development. Let's see how to get it installed in this lesson.

;

Installing and Initializing Prisma

Install the Prisma CLI and Prisma Client

The Prisma CLI gives us command line tools to work with Prisma in our projects and Prisma Client allows us to run queries against our database in our app code. Let's get these two dependencies in place in this lesson.

;

Initialize Prisma in the Project

To start working with Prisma in an existing project, we first need to initialize it. In this lesson, we see the commands to run to get Prisma in place.

;

Our First Data Model

View and Manage Database Tables with Prisma Studio

Prisma Studio is a database client GUI that helps us easily manage data in our databases. In this lesson, we look at how to start Prisma Studio and use it to create some data.

;

Define a Data Model in the Prisma Schema

After Prisma is installed, the first step to working with a database is to define a data model. This is done in the schema.prisma file and in this lesson we see how to create our first model.

;

Add a Table to the Database with a Prisma Migration

After defining a model, we need to run a migration to sync up the state of our data model with our database. In this lesson, we see how to do so in two different ways.

;

Querying for Data from the App

Query for Data in getSeverSideProps

Next.js offers a great way to have server-side rendering in our applications. The getServerSideProps function is a great place to use Prisma Client to query for data. In this lesson, we see how to run a query in getServerSideProps.

;

Enable Query Logging in Prisma Client

In this lesson, we see how to enable query logging in Prisma Client so that we can see the underlying SQL commands that are generated by Prisma.

;

Create Data Using Prisma Client

Prisma Client has methods for creating new data and offers a type-safe way to do it. In this lesson, we take a look at how to add new records in our database by hitting an API route.

;

Modelling Relations

Define Multiple Data Models in the Prisma Schema

Our app needs three tables in total. In this lesson, we see how to model out the additional tables for our app to function.

;

Define a One-to-Many Relation in the Prisma Schema

Prisma allows us to easily establish one-to-many relations between our data models. In this lesson, we see how to create a one-to-many relation between two models and then apply the changes to the database.

;

Define a Many-to-Many Relation in the Prisma Schema

Prisma has great features for supporting many-to-many relations and can completely abstract away management of pivot tables. In this lesson, we see how to work with many-to-many relations in our app.

;

Create Related Records Using Prisma Studio

Prisma Studio has great support for establishing relations between two tables when creating data. In this lesson, we see how to use Prisma Studio to create related records.

;

Prisma Queries for Full CRUD

Update and Delete Providers Data with Prisma Client

In this lesson, we finish out CRUD operations for the providers data.

;

Update and Delete Posts Data with Prisma Client

In this lesson, we finish out CRUD operations for the posts data.

;

Use Prisma Queries while Server-Side Rendering a Next.js App

In this lesson, we change our or call to a static dataset for a call to Prisma using getServerSideProps.

;

Query for Data with Relations in getServerSideProps

In this lesson, we finish out the queries from getServerSideProps by furnishing all the data needed for the posts scheduling area.

;

Update and Delete Campaigns Data with Prisma Client

We can use Next.js API routes to manage our CRUD operations. In this lesson, we apply full CRUD to the campaigns data.

;

Prisma Types

Use Prisma Types in a Next.js App

Prisma produces TypeScript types for us automatically and we can use these to our advantage. In this lesson, we see how to use the types Prisma gives us to add type safety to our app on the front end.

;

Use Prisma Types in Next.js API Routes

The types that Prisma gives us can also be used in our API routes. In this lesson, we see how to apply them there.

;

Wrapping Up

Use a Global Prisma Client Instance

We can run into issues when working with Prisma in a Next.js application if we have too many instances. In this lesson, we see how to use a global Prisma instance.

;