Simple Notes app using React, TypeScript, Node.js, GraphQL and MongoDB

Mon, 17 Apr 2023 00:00:00 +0000

In the series of the blog post, I am going to walk through step by step process of building a Simple Notes App using React, TypeScript, Node.js, GraphQL , and MongoDB. During the process of our development, we are going to use some useful npm packages like Express, Apollo-Server, Typegoose, Mongoose, TypeGraphQL , and Bootstrap.

Here is the Github Source Code to run the application.

Table of Content

Dev Environment Setup

We are going to set up our initial codebase and folder structure to get started. In this tutorial, I am going to use the Windows environment. The command structure is mostly the same and can be easily replicated to macOS.

Introduction to GraphQL: Why It Matters

Sat, 25 Jul 2020 00:00:00 +0000

GraphQL is a query language for APIs that lets clients request exactly the fields they need. Unlike REST, you avoid over-fetching and under-fetching by design.

Schema-First Design

type Query {
  user(id: ID!): User
  posts(limit: Int = 10): [Post!]!
}

type User {
  id: ID!
  name: String!
  posts: [Post!]!
}

Clients send queries that mirror the shape of the response:

query {
  user(id: "1") {
    name
    posts(limit: 5) { title createdAt }
  }
}

Server Implementation

Apollo Server and GraphQL Yoga are popular in Node.js. Resolvers map fields to databases or microservices. Use DataLoader to batch N+1 queries.

Graphql on David Lang

Simple Notes app using React, TypeScript, Node.js, GraphQL and MongoDB

Dev Environment Setup

Introduction to GraphQL: Why It Matters

Schema-First Design

Server Implementation