Learning Prisma with Prisma Data Platform

Tech
5
minute read

Prisma Data Platform is a great place to practice ORM technology Prisma, because it has a fantastic query console that allows you to use all the methods Prisma Client provides. This gives you quick hands-on experience that you might be missing from your learning hours. Oftentimes, our biggest obstacle in learning a new technology is not knowing how to get started, or how to set up an environment for it. We read the documentation but a certain feeling of incompleteness remains:  “now what”, we ask ourselves. 

Alexandra Fazakaș found herself in that very situation when learning Prisma, but managed to overcome it after discovering studio.prisma.io. Here, she talks us through the initial set-up and how to:

  • Use a template available in prisma.cloud.id
  • Make local changes to the prisma schema of that template
  • Have the local changes reflected on the platform
  • Perform queries in the platform’s query console

Getting started

To get started using the platform you need to either have an existing Prisma-based project in your GitHub or generate one based on their templates. We like using their templates, as they all represent a complete environment we can build on. 

Start with logging into cloud.prisma.io with GitHub, where you will be prompted on an application creation page composed of multiple steps. You will be asked to give prisma.cloud writing permissions. After you have given those permissions you will be directed back to the platform where you can choose the NextJS template. It will come with a blog schema that looks like this:

In Prisma we use models to define the structure of a database. You can think about it as an equivalent of a mysql table. Each model has fields just like each table has columns. In relational databases like mysql a collection of tables end up creating the structure of the database. On the Prisma side, a collection of models is called a schema.  

We will modify this schema locally by adding a category model to it.

In the next step, you will need to sign in or create a Heroku account. By doing this Prisma will connect to Heroku and give it instructions to generate a postgresql database that will be connected to and used by the Prisma platform.

Next steps

After completing the previous step you will receive some variables to use, but before you click the done button make sure you save  DATABASE_MIGRATE_URL  somewhere handy. This variable is a postgresql connection string that we will use locally to connect to Heroku. Before that though, Prisma should have created a repository in your GitHub account. Go ahead and clone it.

Notice how you receive instructions in the README.md file. For our purposes you now need to create an .env file and set DATABASE_URL to the value of DATABASE_MIGRATE_URL

Before you install your dependencies, it is worth taking a look at the package.json file: prisma package is part of our dev dependencies. It is the tool you will use to sync your models to our postgresql database, turning your models into tables. 

Install the dependencies npm install or yarn

Now your prisma package is installed. Type prisma-help in order to see all the commands available for use as well as their descriptions.

Go to prisma/schema.prisma file and add the following line:

This defines a category model with a single unique field called name. 

In order to have access to it in your platform you will need to do two things:

  1. Push your changes to GitHub
  2. Sync your database with our schema

Push your changes to GitHub 

This is the easy part - just a few basic commands and you are done with this step: 

  1.  git add prisma/schema.prisma 
  2.  git commit -m “feat: add category model”
  3.  git push

Sync your database with your schema

For this we will make use of Prisma’s db push command. It is used to “Push the Prisma schema state to the database”. This will convert your model syntax into a sql command and will execute it against the Heroku postgresql database you are connected to so that you have a perfect match between the two.

Now it is time to go back to your platform and check it out. You should see a category model in the Data Browser tab:

Add some categories like this:

And you should be ready to make some Prisma queries. Go to Query Console tab and write your first query:

Click “run active query” and you will get one result:

You did it

Congrats! You are now all set up to make use of the great potential this platform offers. As a challenge, you can associate the category model with the post model so that each post belongs to one or more categories. With the fantastic documentation Prisma provides and with the hands-on practice made possible by Prisma Data Platform’s query console, you will become proficient in Prisma in no time. Also, keep in mind that you have a great Next Js project environment, equipped with API routes inside your api folder, as well as the potential to deploy it on Vercel with a click of a button.

Have a project in mind? Let's talk.

Contact us