Photo by Anas Alshanti
Creating a serverless GraphQL API with TypeScript and Prisma
Posted on 6th December 2020
12 min read
First Vercel will need be downloaded, installed and logged into.
The nice thing about using Vercel for development is that we don’t have to worry about manually configuring TypeScript.
Then create a folder, initialize a project in it and install
typescript as a dev dependency.
Setup the Database
We will be using Prisma to connect to and work with our database. In this example we’ll be using PostgreSQL.
If you need a database without installing one locally, Heroku has free tier.
Once you have the database set up, keep note of its URL.
First install the dependencies.
tsconfig.json with the following configuration.
Next let’s create the Prisma schema file by running the
prisma init command.
This will create the
prisma folder in the project root and in it the
Replace the placeholder
DATABASE_URL in your
.env file with the URL of your own database.
To organize our code, first let’s move the
.env to the project root.
Then move the
schema.prisma file to
We also need to modify Prisma to read the schema from its new path by adding the path in
Now we need to add the model for Notes. All models are “declared” in the
Creating the database tables
We will be using Prisma Migrate to create the database tables using the models in your schema file.
First enter the following command.
This will create a new folder called
src\db to store your migration history but it won’t actually create the table in your database.
To finish creating the table, run the
Install and Generate the Prisma Client
When you generate the Prisma Client it will create types for all the database models to use in our code. In our case it’ll create one for Note.
Setup the GraphQL API
First let’s install the dependencies.
Next create the folder
api in the project root and in it create the file
graphql.ts. Vercel will expose the serverless function in the file as the endpoint /api/graphql. The GraphQL function will be created using Apollo Server. Since we’re doing a serverless version we’ll be using apollo-server-micro.
After that import the GraphQL Schemas and Resolvers. We’ll create these later.
Then initialize the Apollo Server and export it.
To finish configuring we’ll set the
Setup the GraphQL Schema
src folder create the
graphql folder and in it create the
GraphQL doesn’t have a type for date and time so we’ll need a schema for those types. Create
custom.ts in the
Next we’ll setup the schema for Note.
First create the Note schema file,
note.ts in the
Then add the Note type.
After that add two Queries, one to get all Notes and one to get a specific Note.
Next add two Mutations to create new Notes and delete existing ones.
Note that we add the keyword
extendto the Query and Mutation type in the two schemas. This is because we’ll be joining all the schemas into one later.
Finally we’ll need a schema a join all the others schemas together. Create
index.ts in the
schema folder and declare and export the Link Schema in an array.
Then import the other Schemas and add them to the array.
Setup the resolvers
Since we added a custom type for dates and times in our schema, the first resolver we’ll add is for those types. Create a folder called
resolvers in the
graphql folder and in it create
Next we’ll start working on the resolver for Notes.
Start by creating
graphql, importing the required dependencies and exporting an empty object which is going to be our resolver.
@prisma/clientthis comes from generating the Prisma Client from earlier.
Then define an object for the Queries.
When defining the function for each of the queries (or mutations or fields) there are three important parameters.
parent- If you a resolving a field of an object this parameter will contain it. We won’t be needing it in this post.
args- The arguments passed to the query or mutation.
context- The context object created when setting up the API. We won’t be needing it in this post.
First let’s write the resolver for
getAllNotes. Start by declaring the function.
Then add the code to get all the notes.
After that let’s add the resolver for
We can retrieve the
id argument from the second parameter.
Let’s finish of the Note resolvers by adding the resolvers for the mutations.
Now we have to connect all the resolvers together using an
index.ts file created in the
Running the API locally
To run the project locally first you need to link it to a Vercel project.
vercel dev to start the API locally.
If you visit
http://localhost:3000/api/graphql you can see the GraphQL Playground.
Deploying to Vercel
First we need to upload the database path as an Environment Variable.
Name the variable
DB_PATH and make sure you make to available for all three environments (Production, Preview and Development).
Then all that’s left to do is to deploy to Vercel.
The GraphQL Playground should be visible in the
/api/graphql route of the URL returned.
If you want a more detailed explanation into GraphQL and making a server for it, you can check out the excellent guide that I learnt from here.
Bonus: Using it in Next.js
You can create a GraphQL API endpoint in your Next.js project by putting the
graphql.ts inside the
api folder in the
The only extra step you need to do is to add this bit of code to the end of the
Leave a Reaction below!!! (No login required)