Prisma, GraphQL, and How to Start

Add type safety to your database fetching

Aristos Markogiannakis
Better Programming
Published in
5 min readMar 25, 2020

--

Photo by Marvin Ronsdorf on Unsplash

For months now, I’ve wanted to write about Prisma. Some months ago, my team worked on an open-source project where I came across it for the first time. Some months later, I was in various projects and didn't manage to write the article to explain how it works. So here I am. I’ll try to explain how to create a small project.

Some parts reference this article by Álvaro on DEV.

Folder Structure

The whole idea is that you have a store. A store has a location, coordinates, and items missing — which is an array of the type Item.

On the root folder, I first created an empty folder called Prisma.

Outside the main folder, I had the package.json file.

The structure needs to be as follows:

Folder structure

The .babelrc contains the presets for using the environment variables that are in the root of our app.

.babelrc

The package.json contains the following:

package.json

For the next step, we need to run npm install.

We also need to globally install Prisma by running the following command:

npm install -g prisma 

1. Set Up Prisma

The repo for this step can be found here.

To set up Prisma, we’ll need to navigate to the Prisma folder.

To do so, just write cd prisma on your terminal.

For this next step, we’ll also use Docker, which will host our database. For our example, we’re using Postgres (you can do the same with MongoDB or MySQL, though).

2. Set Up Docker

We’ll create a Docker file, docker-compose.yml, inside our prisma folder.

Our Docker file to create our service and database

Then, run the following command:

docker-compose up -d 

That command should’ve created an instance of your database in Docker.

You can view it if you select Dashboard from the Docker menu on your Mac or PC (sorry I haven’t used Windows for some time, but it should be available)

Accessing our dashboard on a Mac
Docker showing our service and the database

3. Prisma Setup

Then, we follow the same steps as on Álvaro’s blog post.

prisma init --endpoint http://localhost:YOUR_PORT (in my case 4488)

This command will create two files inside the folder prisma.

The prisma folder after running the init command

We’ll copy the following schema:

Our schema

Note: You’ll have to modify the port on prisma.yml to 4488 for our next step.

prisma deploy

If you navigate to localhost:4488/_admin, you should be able to see the Prisma interface.

Admin interface

From this panel, we can add and remove data and test to see if our code works.

If you like to clean the data, you can run prisma reset.

Optional — seeding the data

There is also a command for seeding the database, which basically adds some data to your database before you start using it. To do so, you’ll need to create a data folder and add a seed file with instructions of what to populate.

For that, you’ll need to run prisma seed.

An example can be seen on an older project I did with my team — follow the link below.

4. Generate Our ORM Code

We can now release our ORM bin files by running the following command:

prisma generate

To make this work, you’ll need to add the following in prisma.yml:

generate:
- generator: javascript-client
output: ./generated/prisma

You should be able to see the following generated folder in your prisma folder.

The prisma folder after running the generate

We can start using the ORM code.

5. Use the ORM Code

We can now create a src folder inside the root of our folder.

We’ll create an index.js file and two folders, resolvers and schemas.

The index.js file is looking like this:

index.js file

We’re getting our schema from the schemas folder and store.graphql and the resolvers by importing them from the resolvers folder.

import resolvers from './resolvers';

We define the schemas on the store.graphql as done in the image below:

store.graphql

We can write the code for the resolvers that use the schema and then run the code that’s using the ORM. Above, the queries are for getting a store by an ID, a name, and the most complicated one is get the stores for a specific items.

At the bottom, you can see how I was able to add a store and the items.

6. Testing This in the Playground

You can access your final result on the playground URL HTTP://localhost:4400.

There you can try some different things — for example, let's add a store.

We can test the store by writing the following query:

The complete example can be seen on the master branch of the repo I created.

--

--

Aristos Markogiannakis
Aristos Markogiannakis

Written by Aristos Markogiannakis

CityJS Conference Founder/Organiser - Developer - Lecturer

No responses yet