Prisma, GraphQL, and How to Start
Add type safety to your database fetching
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:
The .babelrc
contains the presets for using the environment variables that are in the root of our app.
The package.json
contains the following:
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.
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)
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
.
We’ll copy the following 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.
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.
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:
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:
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.