How to Build an Apollo GraphQL Server with Serverless, AWS Lambda, Express, and TypeScript

Background

Recently, GraphQL and BFF are becoming more and more popular. Our company decided to move from Restful API to GraphQL base AWS Lambda. However, due to some legacy issues, your GraphQL server has to support Restful API as well. As we know, apollo-server-lambda doesn’t support Restful API. After days of investigation and spiking, we find a very useful package called serverless-http, which can support the integration of Apollo and web frameworks such as express, koa, etc.

This article aims to help you set up a GraphQL + express + Lambda server from scratch. In addition, I will show you how to use typescript in the project to get the type checking feature. At the same time, use ESLint` and Prettier to let your team maintain a uniform code style during the development process.

Step 1: Set up package.json

npm init

Then configure your package.json according to your needs.

Below is the configuration of my package.json

Step 2: Use ESLint to standardize Typescript code, use prettier to format code

add corresponding files

• add .eclintrc.js

You can configure the rules according to your needs.

• add .prettierrc.js

• add .vscode/setting.json

install the corresponding packages

yarn add eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin -D

yarn add prettier eslint-config-prettier eslint-plugin-prettier -D

notes:

• eslint The core code of eslint
• @typescript-eslint/parser ESLint’s parser, used to parse Typescript, thereby checking and standardizing Typescript code
• @typescript-eslint/eslint-plugin An ESLint plugin which provides lint rules for TypeScript codebases

Finally, don’t forget to install the corresponding vscode plugin

Now when you save the code, the document should be automatically formatted. And when your code does not meet the format requirements, you should be able to see the corresponding warning.

Start coding

add corresponding files

serverless.yml

src/main.ts

Remember to install related serverless before running the project.

Run project

yarn start:sls

You should see the similar output in the terminal

Enter the following link in the browser to view the corresponding results.

http://localhost:5002/dev/api/xml

http://localhost:5002/dev/api/graphql

The corresponding code has been uploaded to Github, if you have any questions, you can check the corresponding repo.

Congratulations! We are done!!

At PH we use react/graphql/mongo on AWS to build out an AI platform that manages over 80k applications per month and recently tripled in scale without missing a beat.

References

https://www.serverless.com/plugins/serverless-http