Brief Introduction to GraphQL

06 augustus 2020 om 14:00 by ParTech Media - Post a comment

Being a developer, you must be acquainted with client-server architecture in software and utilization of REST to develop APIs. You must also be familiar with several endpoints and how some of them are redundant. Thus, handling REST API at the endpoint isn’t a piece of the pie. Therefore, GraphQL is introduced to reduce the complexities by presenting back-end data in a systematic graphical view.

What is GraphQL?

GraphQL is a new API warrior that designs and consume them. It is a query language that comes with a server-side runtime for executing queries. GraphQL isn’t restricted to one specific technology; you can implement it in multiple languages as per your requirement.

It is a useful alternative of REST (REpresentational State Transfer) API. You might notice that Facebook has developed GraphQL in a quite different way from REST. It forms an entirely new dimension for APIs. For instance, when you are loading a complicated web application, you have to make multiple REST calls to fetch the data, which means more network usage and management of complexities in asynchronous response. It looks like this:

REST_API_URL/authors 	# Gets all authors
REST_API_URL/posts 		# Gets all posts
REST_API_URL/author/12 	# Gets all details of author with id 12

On the contrary, with GraphQL you just have to create one query and retrieve all the required data:

{
    authors {
    	name
	},
	posts {
	    content  
	},
	getAuthor(id: 12) {
		name,
        email
   }
}

Source: https://medium.com/@chathuranga94/introduction-to-graphql-3e0142879aba

Composition Terminology of GraphQL Query

When you are shifting from REST API to GraphQL API, you will encounter some new architectural and conceptual terminologies. For example:

Source: SlideShare

Schema is GraphQL API’s type system. It defines the complete set of data, including objects, relationships, fields, etc., that clients can access. All the calls from clients are validated and executed with the schema. Users can find schema information from introspection. Schema resides on the GraphQL server.

Field

It is a unit of data that the user can get from an object. According to the official GraphQL documentation – GraphQL is a query language that revolves around selecting fields on objects. It indicates that if you are trying to return to the non-scalar field, a schema validation will return an error. You have to insert nested subfields unless all fields become scalar.

Argument

The argument is a set of key values linked to a particular field. Some fields, like mutation, require an input object as an argument.

Implementation

Implementation terminology is used by GraphQL schema to define how a particular object has been inherited from an interface. For example:

interface X {
 some_field: String!
 other_field: String!
}
 
type Y implements X {
 some_field: String!
 other_field: String!
 new_field: String!
}

Source: https://developer.github.com/v4/guides/intro-to-graphql/

The example showed how object Y requires the same field/argument/return type as compared to interface X while inserting a new field to object Y.

Connection

Connections offers query related objects in the same call. The benefit of using a connection is that you can use single GraphQL calls instead of using multiple calls in REST API. It assists in graphical picture formation by connecting all the dots to lines. Dots are referred to nodes and the lines to edges. In short, connection narrates a relationship between various nodes.

Edge

Edge defines a connection between multiple nodes. When you send a connection query, you traverse its edges to retrieve its nodes. Thus, one edges field has a node field and a cursor field. For pagination, cursor fields are used.

Node

Node is a generic term to define an object. You can access the node directly, or you can use a connection to the access node. When you have to specify a node that doesn’t include return scalar, you have to add subfields until all fields return scalars.

GraphQL variables

When you are dealing with highly complicated GraphQL query, you have to use Variables to dynamically specify a value used inside a query. In this situation, you have to add a person’s ID as a string inside the query:

{ 
    owner: person(id: "1") {
      	fullname: name
     }
}

Source: https://flaviocopes.com/graphql/

ID will probably change your program's dynamics, so you have to find a way to pass it without string interpolation. Using variables, the same query can be compiled as:

query GetOwner($id: String) {
 owner: person(id: $id) {
  fullname: name
 }
} 

{
 "id": "1"
}

Source: https://flaviocopes.com/graphql/

As per the above syntax, you have assigned the GetOwner name to your query. You have to think of it as a named function, whereas previously, you were dealing with an anonymous function. Named queries are highly functional when you are dealing with lots of queries in your application. When a query is defined with the variables, it looks like a function definition, and it can work equivalently.

Why Use GraphQL?

From the ages, REST has been a popular way to expose data from a server. When REST was introduced to the developers at that time, applications used to be way more straightforward than today’s development pace. Thus, REST was an ideal pick for numerous applications. However, in the last few years, the API landscape has been dynamically shifted. This change in the dynamics has encouraged developers to use GraphQL like solutions designed to meet present requirements.

Source: Nordic APIs

Increase in Mobile Usage – With the wave of mobile devices, the low power and reduced network speed have encouraged Facebook to develop GraphQL. It has minimized the amount of data transferred over the network. Thus, the performance of the application won’t suffer under unfavorable conditions.

Various Fronted Frameworks – With the heterogeneous landscape of front-end frameworks, it is difficult for client applications to build and maintain a single API to fulfill all the requirements. But, with GraphQL, each client can easily access to the required data without any hassle.

Accelerated Development – Fast and continual development has raised the bar for companies. The new companies have to find a way to beat rapid iterations and frequent product updates. REST APIs method of data exposing and specifying client-side design needs to be modified to fasten up the development process. With GraphQL, hindrances of fast development pace can be easily handled.

Bottom Line

Today, GraphQL has been adopted by numerous progressive companies like GitHub, Yelp, Shopify, Twitter, and a couple of others. If you want to improve your application's efficiency and power in 2020 to beat poor network and sloppy power, you have to adopt GraphQL API without any second thoughts. For a better result from your client-side and backend side application, you need a GraphQL. Moreover, GraphQL is collaborating with ASP.NET Core (discussed in another blog) so it is indeed going to be a futuristic language.

Nieuwste