GraphQL is a query language for reading and transforming data in APIs. As a back-end developer, GraphQL gives a "type" system where you can describe a schema for your data. Thus, this gives front-end developers of the Application Programming Interface (API) the ability to explore and demand the exact data they need. Generally, web developers have consumed APIs utilizing REST, where data objects reside on a bunch of URLs on a server. When a request is received, the API responds with the full data payload of that object.

That sounds adequately straightforward. However, there are two expected drawbacks here. We may require various elements all at once. In which case, each request is under-fetching the actual data we need. In another case, we may just need a little subset of a data object. In which case, we will be over-fetching from the API and that of course is terrible for the business model.

Rather than using numerous URLs, a GraphQL programming interface has a single entry point. Data is queried or fetched by describing it with a syntax that mirrors its return shape in JSON. The front-end developer describes the data they need while the back-end developer writes code to resolve the request and everything occurs in a syntax that can work with any programming language. Here is an example of what the request and response would look like.

GraphQL request and response

We can begin defining a schema with our custom objects utilizing the "type" keyword. A type can have various fields like a unique id and we'll make that required with an "exclamation" symbol like this.

type Author{
    id: ID! 👈
}

Adding unique ID

We could likewise give it a whole number and string values.

type Author{
    id: ID!
    name: String  👈
    subscribers: Int  👈
    }

Adding number and string values

After that point, create a relationship with another type.

type Author{
    id: ID!
    name: String
    subscribers: Int
}

type Video {  👈
    url: String! 
}

Adding another type to form a relation

A creator can have numerous videos, which we can address by enveloping the "type" by brackets.

type Author{
    id: ID!
    name: String
    subscribers: Int
    videos: [Video]  👈
}

type Video {
    url: String!
}

Linking relation with different types

On the other side, a video also has a unique creator.

type Author{
    id: ID!
    name: String
    subscribers: Int
    videos: [Video]
}

type Video {
    url: String!
    creator: Creator  👈
}

Additional parameters

Now every GraphQL API has a query type which is the primary section point for a consumer of the programming interface. We can query a rundown of videos or an individual user based on their id.

type Author{
    id: ID!
    name: String
    subscribers: Int
    videos: [Video]
}

type Video {
    url: String!
    creator: Creator
}


type Query {  👈
    videos: [Video] 
    creator(id: String!): Creaotr 
}

Defining query structure

That is the way a consumer reads data, but then they might need to modify data. In which case we carry out a "Mutation" type that defines how data can be modified on the API.

type Author{
    id: ID!
    name: String
    subscribers: Int
    videos: [Video]
}

type Video {
    url: String!
    creator: Creator
}


type Query {
    videos: [Video]
    creator(id: String!): Creaotr
}

type Mutation {  👈
    createVideo(url: String) : Video
    deleteVideo(url: String) : String

}

Defining Mutation for future modifying

From there we can define code to resolve this data in any programming language. For example, using JavaScript would look like this.

export const resolvers = {
  Query: {
    creator(obj, args, context, info) {
      return context.db.getCreaotr(args.id);
    },
  },
};

Fetching data with JavaScript

Once dispatched, any developer consuming this API will be able to explore it with a complete comprehensive understanding of every single imaginable query and data element. This means the tooling can autocomplete your query as you type it out in your editor.

Qraphiql console

This has been "GraphQL in 1 minute". Assuming you might be interested in reading more short explanations like this, try to subscribe to my blog. There is significantly more on the way. Thanks for reading and I will see you in the following one.

Subscribe to Sharooq