#02 – Core Concepts – Learn GraphQL

In this post, we have discussed the core GraphQL concepts e.g. schema, types, queries, mutations, and subscriptions with example codes.

Core Concepts of GraphQL

  • Schema
  • Types
  • Queries
  • Mutations
  • Subscriptions
  • Resolvers

Scheme

  • The schema defines how a client can read and manipulate (add, update, and delete) data
  • It represents a contract between client and server
  • It consists of GraphQL types and the special root types
  • Root types define the entry points for the API (type Query, type Mutation, type Subscription)

Types

  • GraphQL provides schema definition language (SDL) to define simple types
  • Types define the structure of the data and how the data is manipulated
  • GraphQL allows creating relationships between types

Example Code

//User type
type User{
   id: ID!
   name: String!
   courses: [Course!]!
} 
//Course type
type Course{
   id: ID!
   title: String!
   url: String
   author: User!
}
// ! indicates that the field is required
// One to many relationship is defined between User and Course //types

Queries

  • Queries are used to fetch (read) data from GraphQL API
  • A query specifically describes what data it needs in the response
  • Arguments are passed in the queries to return/alter data based on the arguments
  • Queries can be used to get nested or relational data as well

Example Code

type Query{
   getCourses(last: Int): [Course!]!
}
//get all courses with only title field
{
   courses: {
      title
   }
}
//get all courses with author info i.e. name
{
   courses: {
      title
      author: {
         name
      }
   }
}

Mutations

  • Mutations are used to modify data i.e. create, update or delete
  • Mutations accept arguments (input) and payload (expected output)

Example Code

type Mutation {
    addUser(name: String!): User
!
}
mutation {
   addUser (name: "junaid", courses: []) {
      id
      name
   }
}

Subscriptions

  • GraphQL subscriptions provide real-time updates to the subscribers
  • Whenever new data is added, the subscriptions notified or pushes the data back to the subscriber in real-time
type Subscription{
   addUser: User!
}
subscription {
  newUser{
    id
    name
  }
}

Resolvers

  • For each query and mutation, there is a resolver function with the same name as the query or mutation
  • The resolver function communicates with the appropriate data source and sends the response
//import Course from "../../models/Course"; mongoose model
Query: {
    async allCourses() {
      try {
        const courses = await Course.find();
        return courses;
      } catch (err) {
        throw new Error(err);
      }
    }
},
Mutation: {
    async addCourse(parent, { name, url }, context, info) {
      try {
        const course = await new Course({name, url});
        return course.save();
      } catch (err) {
        throw new Error(err);
      }
    }
}

Leave a Comment

Your email address will not be published.