Why Choose GraphQL Over REST for JavaScript Queries?

Hey there! If you find this story helpful or entertaining, feel free to give it a like or share it with others who might enjoy it too.

---

I’m at a supermarket. In the past, whenever I needed groceries, I’d have to make a shopping list, and give it to the store attendant (let’s call him REST). I’d say, “REST, I need some apples, a loaf of bread, and a gallon of milk.” REST would nod and disappear into the back room. After a few minutes, he’d come back with a big basket filled with apples, bread, milk, and an extra dozen eggs, even though I didn’t ask for them. “Here,” he’d say, “I thought you might want these too, just in case.”

Now, this worked, but it was not always efficient. Sometimes I didn’t need those extra eggs, and sometimes, I wished I could specify the type of bread or the number of apples. But REST had a standard process and couldn’t take those specific requests.

Then, one day, I meet a new attendant at the supermarket named GraphQL. GraphQL says, “Hey, tell me exactly what you need.” So, I say, “I need just three apples, one loaf of whole-grain bread, and no milk today.” GraphQL smiles, takes note, and returns quickly with exactly those three apples and the whole-grain bread. It’s precise and exactly what I asked for, nothing more, nothing less.

What’s even cooler? If I realize halfway through my shopping trip that I also need some bananas, I can update my request on the fly, and GraphQL will grab those for me too, without any fuss.

This new way of shopping is like using GraphQL for database queries. It’s flexible, efficient, and gives me exactly what I need without any unnecessary extras—saving both time and resources. And just like shopping with GraphQL, I get to choose the exact details of what I want, making my life a whole lot easier.

---

Continuing with our supermarket analogy, let’s imagine I’m building a JavaScript application to manage my grocery shopping. With REST, if I wanted to fetch data, I’d make a request like this:

// Using REST
fetch('/api/groceries')
  .then(response => response.json())
  .then(data => {
    // I get all groceries, even items I didn't specifically ask for
    console.log(data);
  });

This is like asking REST for groceries and getting a big basket of items, many of which I might not need at the moment. I have to sift through the data to find just the apples and bread I wanted.

Now, with GraphQL, I can be much more specific about my request. Here’s how that looks in JavaScript:

// Using GraphQL
const query = `
  query {
    groceries {
      apples
      bread
    }
  }
`;

fetch('/graphql', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ query }),
})
  .then(response => response.json())
  .then(data => {
    // I get exactly what I asked for: apples and bread
    console.log(data.data.groceries);
  });

In this example, I’m using a GraphQL query to specify that I only want apples and bread. GraphQL returns precisely that, without any extra items cluttering my data. This is like asking GraphQL at the supermarket for exactly what I need and getting just that, making the process more efficient.

Key Takeaways

1. Precision and Efficiency: GraphQL allows me to specify exactly what data I want, reducing the amount of unnecessary data transfer and processing on the client side.
2. Flexibility: I can easily modify my queries to suit changing needs without altering the server endpoints, similar to updating my shopping list on the fly.
3. Simplified Data Handling: By receiving only the requested data, my JavaScript application can handle data more efficiently, improving performance and user experience.