Creating a serverless GraphQL API with TypeScript and Prisma

Photo by Anas Alshanti

Creating a serverless GraphQL API with TypeScript and Prisma

Posted on 6th December 2020

12 min read

In this post we’ll create a GraphQL API to create, view and delete notes that we can deploy to Vercel using Apollo Server, TypeScript and MongoDB.

Initial Setup

First Vercel will need be downloaded, installed and logged into.

shell

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.

shell

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.

Setup Prisma

First install the dependencies.

shell

Then create tsconfig.json with the following configuration.

tsconfig.json

json

Next let’s create the Prisma schema file by running the prisma init command.

shell

This will create the prisma folder in the project root and in it the schema.prisma and .env files.

prisma\schema.prisma

prisma

prisma\.env

env

Replace the placeholder DATABASE_URL in your .env file with the URL of your own database.

Remember to not commit the .env file. Add it to .gitignore.

To organize our code, first let’s move the .env to the project root.

.env

env

Then move the schema.prisma file to src\db\schema.prisma.

src\db\schema.prisma

prisma

We also need to modify Prisma to read the schema from its new path by adding the path in package.json.

package.json

json

Now we need to add the model for Notes. All models are “declared” in the schema.prisma file.

src\db\schema.prisma

prisma

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.

shell

This will create a new folder called migrations in src\db to store your migration history but it won’t actually create the table in your database.

Replace init with the name of your migration.

To finish creating the table, run the up command.

shell

Install and Generate the Prisma Client

shell

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.

shell

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.

Then import ApolloServer from apollo-server-micro.

api/graphql.ts

typescript

After that import the GraphQL Schemas and Resolvers. We’ll create these later.

api/graphql.ts

typescript

Then initialize the Apollo Server and export it.

api/graphql.ts

typescript

To finish configuring we’ll set the introspection and playground options.

api/graphql.ts

typescript

Setup the GraphQL Schema

In the src folder create the graphql folder and in it create the schema folder.

GraphQL doesn’t have a type for date and time so we’ll need a schema for those types. Create custom.ts in the schema folder.

src/graphql/schema/custom.ts

typescript

Next we’ll setup the schema for Note.

First create the Note schema file, note.ts in the schema folder.

src/graphql/schema/note.ts

typescript

Then add the Note type.

src/graphql/schema/note.ts

typescript

After that add two Queries, one to get all Notes and one to get a specific Note.

src/graphql/schema/note.ts

typescript

Next add two Mutations to create new Notes and delete existing ones.

src/graphql/schema/note.ts

typescript

Note that we add the keyword extend to 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.

src/graphql/schema/index.ts

typescript

Then import the other Schemas and add them to the array.

src/graphql/schema/index.ts

typescript

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 custom.ts.

src/graphql/resolvers/custom.ts

typescript

Next we’ll start working on the resolver for Notes.

Start by creating note.ts in graphql, importing the required dependencies and exporting an empty object which is going to be our resolver.

src/graphql/resolvers/note.ts

typescript

Notice the Note type from @prisma/client this comes from generating the Prisma Client from earlier.

Then define an object for the Queries.

src/graphql/resolvers/note.ts

typescript

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.

src/graphql/resolvers/note.ts

typescript

Then add the code to get all the notes.

src/graphql/resolvers/note.ts

typescript

After that let’s add the resolver for getNote.

src/graphql/resolvers/note.ts

typescript

We can retrieve the id argument from the second parameter.

Let’s finish of the Note resolvers by adding the resolvers for the mutations.

src/graphql/resolvers/note.ts

typescript

Now we have to connect all the resolvers together using an index.ts file created in the resolvers folder.

src/graphql/resolvers/index.ts

typescript

Running the API locally

To run the project locally first you need to link it to a Vercel project.

shell

Then run vercel dev to start the API locally.

shell

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.

shell

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.

shell

The GraphQL Playground should be visible in the /api/graphql route of the URL returned.

Wrapping Up

I made a sample deployment which you can check out below or here. The source code is available on GitHub.

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 pages folder.

The only extra step you need to do is to add this bit of code to the end of the graphql.ts file.

pages/api/graphql.ts

typescript

0 views

Leave a Reaction below!!! (No login required)