Introduction to GraphQL

Let's take some REST!
Let's create a mini-LinkedIn model?
But wait, we shouldn't always REST!
Well then, what's the solution?
Let's take a look at our Graphical tool (ah well, that's GraphiQL)
Let's create our own server first
It's time to write some queries
GETing that was cool, but what about POSTing that?
Let's write some mutations
But wait, we can't ship the GraphiQL to users, right?
Can I try hitting a GQL query with Postman REST request :0
Doing that would become a mess in the frontend, so we have these clients.

Problem with RESTing too much

Under-fetching (If you need more data than what the single endpoint supports, you'll have to call multiple APIs)
Over-fetching (If you need less data than what the endpoint is giving, you're just wasting your users data pack)

Check out the slides

Download the slides here

How to run

Clone this repo: git clone https://github.com/MadhavBahl/graphql-starter
cd graphql-starter/miniLinkedin
npm install
If you're developing, run npm run dev to start the server and enable hot reload
If you just want to start the server, run npm start
Run the JSON-Server using npm run serve-json
Go to localhost:4000/graphql to see the GraphQL Playground

Real data schemas used in this project -

1. User

{
    id: Id,
    firstName: String,
    lastName: String,
    email: String,
    description: String,
    location: Id<Location>,
    posts: List[Id<Posts>],
    company: Id<Company>,
    position: Id<Position>,
    connections: List[Id<User>]
}

2. Company

{
    id: Id,
    name: String,
    description: String,
    location: Id<Location>,
    employees: List[Id<User>]
}

3. Post

{
    id: Id,
    author: Id<User>,
    content: String,
    likedBy: List[Id<User>],
    comments: List[Id<Post>],
    isComment: Boolean,
    parentPost: Id<Post>
}

4. Position

{
    id: Id,
    name: String
}

5. Location

{
    id: Id,
    name: String
}

Samples GraphQL Queries

1. Get User by id

query {
  user(id: "4102") {
    id
    firstName
    lastName
    description
    email
    location{
      name
    }
  }
}

2. Get all Users

{
  users {
    id
    firstName
    lastName
    description
  }
}

3. Get Location By ID

{
  location (id: "1") {
    id
    name
  }
}

4. Get all Users at a Location

{
  location (id: "1") {
    name
    users{
      id
      firstName
      lastName
      description
      email
      location {
        name
      }
    }
  }
}

5. Find company information from id

{
  company(id: "210"){
    id
    name
    description
    location {
      name
    }
    users {
      id
      firstName
      lastName
      description
      email
    }
  }
}

6. Get all companies

{
  companies {
    id
    name
    location {
      name
    }
    description
  }
}

7. Get Post by ID without comments

{
  post(id: "12") {
    id
    author {
      firstName
      lastName
    }
    content
    likedBy {
      firstName
      lastName
    }
  }
}

8. Get Post by ID with comments

{
  post(id: "12") {
    id
    author {
      firstName
      lastName
    }
    content
    likedBy {
      firstName
      lastName
    }
    comments {
      id
      author {
        firstName
        lastName
      }
      isComment
      likedBy{
        firstName
        lastName
      }
    }
  }
}

9. Get all Posts

{
  posts{
    id
    content
    author {
      firstName
      lastName
    }
    comments{
      content
      author {
        firstName
        lastName
      }
    }
    likedBy {
      firstName
      lastName
    }
  }
}

10. Get Position by ID

{
  position (id: "2") {
    title
    employees {
      firstName
      lastName
    }
  }
}

11. Get all positions

{
  positions {
    id
    title
    employees{
      firstName
      lastName
      description
      email
    }
  }
}

12. Get complete information about any user

{
  user (id: "4102") {
    id
    firstName
    lastName
    email
    description
    position{
      title
    }
    location {
      name
    }
    company {
      name
    }
    posts{
      id
      content
      likedBy{
        firstName
        lastName
      }
    }
    connections{
      firstName
      lastName
      email
      description
      location{
        name
      }
      company {
        name
      }
    }
  }
}

13. Fetching multiple Users at the same time

{
	user1: user(id: "4102") {
    firstName
    lastName
    description
    position {
      title
    }
  }
  user2: user(id: "4103") {
    firstName
    lastName
    description
    position {
      title
    }
  }
  
}

14. Fetching multiple users with code re-use

fragment userFields on User{
  firstName
  lastName
  description
  position {
    title
  }
}

{
	user1: user(id: "4102") {
    ...userFields
  }
  user2: user(id: "4103") {
    ...userFields
  }
}

Mutations

1. Create a new User

mutation {
  addUser(
    firstName: "Jimmy",
    lastName: "Carter",
    email: "JimmyCarter@minilinkedin.com",
    description: "I love developing softwares"
    locationId: "1"
  ) {
    id
    firstName
    lastName
    location {
      id
      name
    }
  }
}

2. Edit an existing User

mutation {
  modifyUser (id: "8xJRV_D", firstName: "James") {
    firstName
    lastName
    email
    description
  }
}

3. Delete a User

mutation {
  deleteUser (id: "xWVUlsB") {
    firstName
    lastName
  }
}

4. Add a Company

mutation {
	addCompany (
    name: "Company ABC",
    description: "We deal with fuels",
    locationId: "1"
  ) {
  	id
    name
    description
    location {
      name
    }
  }
}

5. Modify a Company

mutation {
  modifyCompany (
    id: "fKtixV8"
    name: "Company1"
  ) {
    id
    name
    description
    location {
      name
    }
  }
}

6. Delete a Company

mutation {
  deleteCompany(id: "fKtixV8") {
    id
  }
}

7. Add a Location

mutation {
  addLocation (name: "Pune, India") {
    id
    name
  }
}

8. Modify a Location

mutation {
  modifyLocation (id: "v2b20i4", name: "Mumbai, India") {
    id
    name
  }
}

9. Delete a Location

mutation {
  deleteLocation (id: "v2b20i4") {
    id
  }
}

10. Add a Position

mutation{
  addPosition (title: "Senior Program Manager") {
    id
    title
  }
}

11. Modify a Position

mutation{
  modifyPosition (id: "tBymKr2", title: "Program Manager 2") {
    id
    title
  }
}

13. Delete a Position

mutation{
  deletePosition (id: "tBymKr2") {
    id
    title
  }
}

14. Add a post

mutation {
  addPost(
    author: "4102",
    content: "This is the most amazing post ever",
    isComment: false
  ) {
  	id
    author {
      firstName
      lastName
    }
    content
    isComment
  }
}

15. Add a comment

mutation {
  addPost(
    author: "4103",
    content: "Loved it bro!",
    isComment: true
    parentPost: "14"
  ) {
  	id
    author {
      firstName
      lastName
    }
    content
    isComment
    parentPost {
      author {
        firstName
        lastName
      }
      content
      isComment
    }
  }
}

Reference links and Credits

I heavily used GitHub's copilot to write this code. It's a great tool to write code faster. You can try it out here. Trust me, you'll love it ;)

This project is heavily inspired by @Stephen Grider's GraphQL user project: https://github.com/StephenGrider/GraphQLCasts/tree/master/users - Thanks Stephen for the awesome course!

If you're checking out this repo, you should definitely follow him on GitHub!

Few more places where I got some inspiration from:

MadhavBahl / graphql-starter