GraphQL Server for ammarahmed.ca
A high-level overview of the tech stack this website uses:
- React with TypeScript is used for the functionality of the website.
- TailwindCSS is used as the UI framework.
- NextUI is used to create the standardized and aesthetic UI.
- Apollo Client is used to handle making GraphQL requests.
Back-end
- Node.js with TypeScript is used for the server environment.
- Notion is used to persist web content (database).
- Notion API is used to connect the server to Notion
- TypeGraphQL is used to structure the GraphQL API with TypeScript.
- Apollo Server is used to serve the GraphQL API
Hosting
- Google Firebase is used for the client-side hosting
- Fly.io is used for the server-side hosting.
A high-level diagram of how the server and API is set up.
With previous iterations of my website, I found that it was quite annoying to go back into the code everytime I wanted to add/edit a project, experience or blog post to the website. I was using Notion to edit and write out my posts, experiences and project descriptions anyway, so, with the release of the official Notion API, I thought it would be simplify my experience greatly to pull data straight from there into the website. This is precisely what this backend was designed to-do.
All the data for my website is store in a Notion database. When a request is made to the server, the resolver pulls the data, parses it and sends it to the website. Here's a breakdown of the steps for a project post query:
- Request made to GraphQL server with the query
projectMetadata - Resolver for
projectMetadatamakes a request to the Notion database using the Notion API - Data from Notion is parsed into fields and types that I have defined
- Data is sent as a response to the query
Node.js (TypeScript)
As I'm quite comfortable with TypeScript, this was the obvious choice for me.
GraphQL
GraphQL API's are the status quo for modern API's due to their obvious advantages over REST API's. GraphQL API's allow for more fine-tuned requests which saves on data as the user can request exactly which fields they need. It also makes for easier implementation as all requests are made to the same endpoint.
TypeGraphQL
With a typical GraphQL API, types would need to be re-defined in many places when using TypeScript. The types would need to be set in the GraphQL schema as well as with the resolver functions for the API. TypeGraphQL allows you to create a single TypeScript class which will auto-generate the schema as well as be used as a regular TypeScript class for the resolvers.
If you have any feedback, please reach out to me at ammar.ahmed1@uwaterloo.ca. If you find any bugs, please create an issue or feel free to make a PR with a fix.