Welcome to 👏

This article introduces GraphQL through a real world scenario. The purpose of this article is to give you a quick understanding of what GraphQL is and how it works.

What is GraphQL?

GraphQL is a back-end data query language, which can be simply understood as the OBJECT of GraphQL is a REST interface.

GraphQL is open sourced by Facebook and currently supports hundreds of billions of API calls on Facebook, and is being rapidly adopted outside of Facebook.

Let’s not be misled by the name GraphQL; when I first saw it, I thought it was a graph database query language.

GraphQL does stand for “graph query” in general, but the “graph” stands for data graph, not graph database.

GraphQL

For example, this is the mainstream form of Feed flow. How to implement it?

After deciding which data elements to display in the interface, the back end customizes a REST interface to query the relevant data:

  • A Post card
  • The author
  • Like Like
  • The Comment comments
  • Share Share

Back-end programmers perform data associative queries, pull out the required data items, and then encapsulate them into a data structure that is easy to operate on the front end, such as a JSON object.

In this way, the interface of the Feed stream is OK. Similarly, the corresponding interface development can be carried out for other interfaces.

For example, in the post details page, the data involved is the same as in the Feed stream, but the specific data items are different, for example:

  • Post needs full text
  • Like the image list and ID of the user to Like
  • Comment Requires a list of details

Because the data items are different, it needs to be redeveloped for this interface requirement.

Back-end development is easy if you don’t mind the hassle of providing a large and complete interface, but new problems arise, such as:

  • Front-end development needs to carefully pick out the data items you need from the resulting data.
  • The data returned by the interface contains a large amount of front-end useless data, which will occupy more bandwidth and affect the performance. For example, Facebook uses hundreds of billions of API calls. This kind of bandwidth waste is intolerable.

What better way to do it? (If you have better experience, please send it to me and I will share it with you.)

Facebook designed GraphQL to solve this problem.

GraphQL solution

For the above scenario, it is essentially the back end dealing with each requirement of the front end, centering on the front end requirement.

The front end says, “I want this data.” The back end prepares the data.

Here’s Facebook’s idea:

Data is like that. What items are contained in each data object? According to the relationship of each data object, the data atlas can be formed.

The back end is responsible for constructing the data graph, and the front end queries the data it needs according to the data graph.

In this way, both the front end and the back end are centered on the data graph, so that the back end does not need to serve the different types of requirements of the front end, and the front end can freely and accurately query data.

It’s a bit abstract, isn’t it? Look at the following example code:

# -- -- -- -- -- -- -- -- -- -- - define the data type -- -- -- -- -- -- -- -- -- -- - type Post {id: String! title: String! description: String comments: [Comment] likes: [Like]} type the Comment {id: String} type Like # {id: String} -- -- -- -- -- -- -- -- -- -- - define Query interface -- -- -- -- -- -- -- -- -- -- - the type of the Query { recentPosts(count: Int, offset: Int): [Post]! } type Mutation { writePost(title: String! , category: String) : Post! }Copy the code

(The above code can be swiped horizontally)

It is divided into two parts:

  • The above section defines data types, such as Post, which data items to include, wherecomments,likesOther data types are associated, thus delineating relationships between data objects.
  • The following sections define the query interface to be invoked by the front end.

And then we’ll see how the front end works.

In the figure above, the left side shows how the front end is called and the right side shows the result of the data returned.

The front end calls the recentPosts interface and specifies that only the ID needs to be returned, so only the ID data item is returned.

In the figure above, the front end calls the recentPosts interface, this time specifying the need:

  • Post the id of the item
  • Likes the id of the item
  • Comments the id of the item

You can see in the return result on the right that the data is returned as required by the front end.

Third, summary

With the data graph as the center, the back end is free and the front end free. So the core of GraphQL is to build this data graph.

That’s the basic GraphQL content. If you are interested in it, please leave a comment and let me know. Later I will compile a GraphQL tutorial.