Why GraphQL Beats REST: A Quick Overview of Data Graphs

Welcome to read 👏 This article introduces GraphQL through a practical scenario, aiming to let you quickly understand what GraphQL is and its basic workflow, without covering actual usage, so the reading is easy.

1. What is GraphQL?

GraphQL is a backend data query language that can be simply understood as an alternative to REST APIs.

GraphQL was open‑sourced by Facebook and now powers billions of API calls within Facebook and is rapidly being adopted elsewhere.

Don’t be misled by the name; at first I thought it was a graph‑database query language.

GraphQL does mean “graph query”, but the “graph” refers to a data graph , not a graph database.

2. GraphQL Approach

The above diagram shows a typical feed flow. How to implement it?

After deciding which data elements need to be displayed on the UI, the backend creates a REST endpoint to query the related data:

Post

Author

Like

Comment

Share

The backend programmer performs data association queries, extracts the required fields, and packages them into a front‑end‑friendly structure such as a JSON object.

This makes the feed interface work, and similar interfaces are developed for other screens.

For a post detail page, the same data objects are involved but the required fields differ, e.g.:

Full post content

Like needs a list of user avatars and IDs

Comment needs detailed list

Because the data items differ, a new interface must be developed for this screen.

If you prefer a “one‑size‑fits‑all” endpoint, backend development becomes simpler, but new problems arise:

The front end must sift through the returned data to pick what it needs.

The response contains a lot of unnecessary data, consuming bandwidth and hurting performance, which is intolerable at Facebook’s scale.

What’s a better solution? ( If you have better experience, feel free to share it. )

Facebook designed GraphQL to solve this.

GraphQL Solution Idea

In the above scenario, the backend is essentially catering to each front‑end request, centering on front‑end needs.

The front end says “I need these fields”, and the backend prepares them, handling one requirement at a time.

Facebook’s idea is:

Data objects contain fields, and the relationships among objects form a data graph. The backend constructs this data graph, and the front end queries the graph for the data it needs.

This makes both front end and back end data‑graph‑centric: the backend no longer has to serve myriad front‑end specific endpoints, and the front end can query precisely what it wants.

The concept may seem abstract; see the example code below:

# ----------- 定义数据类型 -----------
type Post {
    id: String!
    title: String!
    description: String
    comments: [Comment]
    likes: [Like]
}

type Comment {
    id: String
}

type Like {
    id: String
}

# ----------- 定义查询接口 -----------
type Query {
    recentPosts(count: Int, offset: Int): [Post]!
}

type Mutation {
    writePost(title: String!, category: String): Post!
}

The code consists of two parts:

The first part defines data types, such as Post, specifying which fields it contains; fields like comments and likes link to other types, illustrating relationships between data objects.

The second part defines query interfaces for the front end to call.

Now see how the front end uses it.

The left side shows the front‑end call, the right side the returned data.

The front end calls the recentPosts query and requests only the id field, so the response contains only the id data.

In this example the front end again calls recentPosts, this time requesting:

Post id

Like id

Comment id

The response on the right shows that the requested data is returned accordingly.

3. Summary

After centering on the data graph, the backend becomes hassle‑free and the front end gains freedom. The core of GraphQL is building this data graph.

This covers the basic concepts of GraphQL. If you’re interested, leave a comment and I’ll later prepare a tutorial on using GraphQL.

References:

https://medium.com/javarevisited/basic-functionalities-of-graphql-every-developer-should-know-71347d7fab08

Happy Learning ヾ(￣▽￣)Bye~Bye~