Goodbye Over-fetching: What is GraphQL and Why It Is Revolutionizing APIs

Welcome back to Code With Botina. In our previous posts, we highly praised Client-Server architecture and the HTTP requests that bring REST APIs to life. But let's be honest: REST has its flaws, especially when applications grow and become complex.

Today we are going to talk about GraphQL, the technology created by Facebook (Meta) that came to change the game and solve the biggest headaches for Frontend and Backend developers.

The Problem with REST: Too much or too little information

Imagine you are building a user profile screen for your mobile app. You only need to show their name and profile picture.

In a traditional REST API, you would make a GET request to /api/users/1. The problem? The server returns a giant JSON file containing their name, picture, email, address, date of birth, purchase history, and phone number.

This is called Over-fetching. You are downloading a bunch of data you don't need, wasting bandwidth and draining the user's battery.

On the flip side, if you also want to show the last 3 posts from that user, the REST API might force you to make another request to /api/users/1/posts. This is called Under-fetching, because a single request wasn't enough to build your interface.

The Solution: What is GraphQL?

GraphQL is a query language for your API. Instead of having multiple endpoints like in REST (/users, /posts, /comments), GraphQL has a single endpoint (usually /graphql).

The magic lies in the fact that the Client (the Frontend) has absolute control. Instead of the server deciding what data to send, the client tells the server exactly what data it needs, and the server returns only that. Nothing more, nothing less.

Practical Code Example

Following our previous example, if we only want the name, picture, and titles of the last posts, we would send this Query to the GraphQL server:

query {
  user(id: "1") {
    name
    profilePicture
    posts(limit: 3) {
      title
    }
  }
}

And what does the server return? The exact same structure in JSON format:

{
  "data": {
    "user": {
      "name": "Botina",
      "profilePicture": "[https://img.com/photo.jpg](https://img.com/photo.jpg)",
      "posts": [
        { "title": "What is an API" },
        { "title": "Edge Computing Explained" },
        { "title": "The damage of fake teachers" }
      ]
    }
  }
}

Boom! A single request, zero garbage data downloaded.

Why is GraphQL so relevant today?

Mobile Performance: By downloading only what is strictly necessary, applications load much faster and consume less mobile data.
Agile Development: In REST, if the Frontend team needs a new piece of data on the screen, the Backend team has to modify the endpoint. In GraphQL, the Frontend simply adds one more field to their query and they are good to go. Total independence!
Strongly Typed: GraphQL has a strict Schema. The Frontend knows exactly what data types exist (String, Int, Boolean), which makes tools like autocomplete in your code editor work wonderfully and prevents thousands of bugs.

Conclusion

REST isn't going anywhere; it is still excellent for simple services or internal microservices. But for complex, modern, user-facing applications, GraphQL is the undisputed king. It gives us back control and optimizes our applications to the max.

Have you ever struggled fighting with a REST API that returned too much garbage data? Let me know in the comments!

If you are passionate about software architecture and clean code, make sure to keep exploring Code With Botina.