Notes.txt

Full-stack Project Management System with GraphQL, Express, MongoDB, React, and Apollo

Simple Project Management System
	add clients, manage clients
	add projects
	connect projects to clients
	project page showing all information including client information and area to update the the details, and button to delete the project
	full CRUD functionality
	using bootstrap - so we have modals to add new clients and new projects


GraphQL Intro:
===
GraphQL is an open-source data query and manipulation language for APIs and a runtime for fulfilling queries with existing data.
It is an alternative to a REST API, with some added benefits such as the ability to request the exact data that you want.

In REST API, diffirent endpoints.
In GraphQL single endpoint. Response included ONLY the data asked for

Request/Query:
{
  client(id: "100") {
    name,
    client {
      name
    }
  }
}

Response:
{
  "data": {
    "project": {
      "name": "Mobile Application",
      "client": {
        "name": "Tony Stark"
      }
    }
  }
}


Mutation - used to add/update/delete data to server
mutation {
  addProject(
  name: "Mobile Application",
  description: "This is a description", status: "Not Started",
  clientId: "1" ) {
      name
      description
      status
   }
｝

Response:
{
  "data": {
    "addProject": {
      "name": "Mobile Application",
      "description": "This is a description",
      "status": "Not Started"
    }
  ｝
｝

GraphiQL Tool (like Postman for REST API)

Schemas & Types:
GraphQL servers have a "schema" that specifies all of the fields as well as their "types".
The most basic components of a GraphQL schema are object types,

Scalar Types Include:
String, Int, Float, Boolean, ID

Object Type:
type Project {
  name: String!
  description: String!,
  status: String!
}

Getting Started:
There are a lot of different technologies to chose from. There are also different methods for creating schemas, types, queries, etc

We will be using a package called express-graphql which is a GraphQL server for Node.js with tools to use with Express.
Apollo Server is another popular tool that you can use as well as some content management systems like Graph CMS to easily create a GraphQL API.
===


I see graphql-http being replaced to express-graphql in https://graphql.org/graphql-js/running-an-express-graphql-server/.

Initialize package.json
$ npm init -y

$ npm i express express-graphql graphql mongoose cors colors
($ npm install express graphql-http graphql mongoose cors colors --save)
mongoose - help us connect and interact with MongoDB.

Adding dev dependencies
$ npm i -D nodemon dotenv
nodemon - constantly watch our files and we don't have to keep restarting after we make a change
dotenv - dot env file to define all of our environment variables

Add following in scripts of package.json
"start": "node server/index.js",
"dev": "nodemon server/index.js"

To start the backend (remember to whitelist your IP to MongoDB cluster in Atlas https://cloud.mongodb.com/)
$ npm run dev

For time being we use data from sampleData.js file to use in schema.js

http://localhost:8000/graphql -> Opens GraphiQL UI

{
  client(id: 1) {
    name
    email
  }
}

{
  clients {
    id
    name
    email
    phone
  }
}

Run Query using command "Control + Enter"

{
  project(id: 1) {
    id
    name
    description
    status
  }
}

{
  project(id: 1) {
    id
    name
    description
    status
    client {
      name
      id
    }
  }
}

Till now we have used javascript file for data, now lets move to using the database.

MongoDB Atlas
- The multi-cloud developer data platform.
- An integrated suite of data services centered around a cloud database designed to accelerate and simplify how you build with data.
- https://www.mongodb.com/products/platform/atlas-database

Create and account for MongoDB atlas.
- https://www.mongodb.com/cloud/atlas/register

Create a cluster
Add a user (harikiran, harikiran), and add My Current IP Address (if not added) - These can be changes later in Database Access and Network Access

Go to Database -> Cluster 0 -> Browse Collections -> Add My Own Data -> mgmt_db, clients

(We can use MongoDB Compass Desktop application also)
Overview -> Connect -> Do both Compass and Driver setup

Response as per console log "MongoDB Connected ac-rbjyb79-shard-00-00.fqmzawg.mongodb.net"

Mongoose schema is not related to GraphQL schema

Think like we have a database, and top of that we have mongoose layer, the object data mapper layer. Where we create schema that includes fields for our database collections. And on top of that is our graphQL API and that's where the garphQL schema comes in.

Now update code to fetch data from mongoDB instead of javascript file.
{
  projects {
    name
    description
    status
    client {
      name
      id
    }
  }
}
=>
{
  "data": {
    "projects": []
  }
}

GraphQL Queries & Mutations - https://gist.github.com/harikiranvusirikala/ea919547a29576d334ee195156679b02

mutation {
  addClient(name: "Tony Stark", email: "ironman@gmail.com", phone: "955-365-3376") {
    id
    name
    email
    phone
  }
}
=>
{
  "data": {
    "addClient": {
      "id": "66556de8e829a0431c71d7dc",
      "name": "Tony Stark",
      "email": "ironman@gmail.com",
      "phone": "955-365-3376"
    }
  }
}

mutation {
  deleteClient(id: "6655703e0386f2d6bd082796"){
    name
  }
}

mutation {
  addProject(name: "Mobile App2", description: "This is the project description", status: new, clientId: "66556de8e829a0431c71d7dc") {
   name
   description
  }
}

mutation {
  deleteProject(id: "6656c84ae0a5cad38699119f") {
    id
  }
}

We have done backend with all CURD operation needed for front end. Now starting on front end.
$ npx create-react-app client
cd client
$ npm i @apollo/client graphql react-router-dom react-icons

To start the frontend (should be in client folder)
$ npm start

https://getbootstrap.com/ -> Include via CDN -> Add Bootstrap CSS & JavaScript in index.html

Header.jsx -> rfc (make sure to have the React extension "ES7 React/Redux/GraphQL/Rea...")

Bootstrap Modal example: https://getbootstrap.com/docs/5.3/components/modal/#live-demo
-> change class to className (for react frontend)
-> remove tabIndex="-1"

(Ctrl+D selects the word at the cursor, or the next occurrence of the current selection.
Ctrl+Shift+L, will add a selection at each occurrence of the current selected text.)

Facing issues with Project deletion(linked to client) when deleting the client.