Course

Exploring Prisma Studio

We now have everything we need to begin exploring how easy it is to work with Prisma and databases.

Let's review what we've done so far:

  • Created our Next App
  • Initialized Prisma
  • Created our Database with Supabase
  • Connected Prisma to our Database

In this lesson- we'll:

  • Push up an example Schema to our Database
  • Explore the Prisma Studio for viewing the database
  • Explore creating entries in our database with Prisma Studio

Before we can begin exploring tables and learning our tools- we'll need to have some tables in our database to view and alter. For now- I'll provide you with some code to generate a tables with.

Let's copy and paste this code into our file.

This code will give us a table.

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

datasource db {
  provider  = "postgresql"
  url       = env("DATABASE_URL")
  directUrl = env("DIRECT_URL")
}

model User {
  id        Int      @id @default(autoincrement())
  name      String
  email     String   @unique
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
}

db push

Once we've added this code to our schema- we need to send it to our database on .

To do this- we use

In Prisma, is a command that synchronizes your Prisma schema with your database. It is used to create or update the database schema based on the defined models in your Prisma schema file.

Here you can see what happens when we run this command in our console.

schema.prisma
model User {
id Int @id @default(autoincrement())
name String
email String @unique
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
}
npx prisma db push
ID name email createdAt updatedAt

Once you've successfully ran the push command- you should see a success message in your terminal:

And you're ready to begin exploring, viewing, and adding to your database!

Prisma Studio

Prisma comes with it's own tools for viewing our database visually. This is called .

To access the studio- we simply run the prisma studio command in our terminal and Prisma will host a web server locally for us to view and edit our database.

terminal
npx prisma studio

Prisma will then start the server. Opening up the web browser to will open up the studio.

Image

Here we can see a display of all (or 'tables') in our database. For now, we've only defined the table, but anything else you add to the schema will show up here as well.

Select the model, and we'll see a view of all the rows in our table.

Image

If we had users in this table- we could view and sort them here for easy viewing or editing.

Go ahead and press , and you'll see a new field appear. Here, you can manually enter values to create a new record for the table right here in the studio.

Here I've created a new record by just typing in my values manually:

Image

But now I see I need to edit it. I want my name to be my full name. So I can simply the value I want to change, and it will become editable. Click away, and hit to update our database.

If I want to delete this user, all I need to do is click the checkbox to the left, and then select

Image

As you can see, the Prisma Studio is a quick and easy way to

  • View all of our Tables
  • Sort and search for records in our Tables
  • Create new records
  • Edit and modify records when needed
  • Delete records we no longer need

These are great tools for updating values in our Database. But what about updating the of the Database? In the next lesson we'll discuss updating the schema to change what values our User table holds, how to add new tables, and how to delete them completely.

0 Comments

"Please login to view comments"

glass-bbok

Join the Conversation!

Subscribing gives you access to the comments so you can share your ideas, ask questions, and connect with others.

Upgrade your account
tick-guideNext Lesson

Updating Our Schema