DEV Community

Cover image for GraphQL Tips & Tricks
Naur
Naur

Posted on

GraphQL Tips & Tricks

#graphql #api #rest #backend

When discussing APIs, two models always come up: REST and GraphQL. Both operate over the HTTP protocol, but differ in how they deliver data and the level of control the client has over what is returned.

This article explores these differences and answers several common questions, including the famous ! in GraphQL and how to test everything using request files.

📌 Code examples are available in this repository:
https://github.com/SrLuc/GrapQL-Example

GraphQL vs REST

Imagine you walk into a restaurant:

At a REST, you look at the menu and each dish is served exactly as is. Want just rice? You might even get rice, beans, salad, and farofa all together.

Need more details? You have to order another dish.

At GraphQL, you choose exactly what goes on your plate, “I just want rice and farofa.” or “I want everything: rice, meat, juice, and dessert.”

That's the essence of the difference.

Exemple REST 

GET /dishes
Enter fullscreen mode Exit fullscreen mode

Simple and functional…
But sometimes you just want beans, and the restaurant brings you the complete "PF" (a full plate), which means you receive more data than necessary.

{
  "dishes": [
    {
      "id": "1",
      "name": "Dish of the Day",
      "rice": true,
      "beans": true,
      "meat": true,
      "salad": true
    }
  ]
}
Enter fullscreen mode Exit fullscreen mode

Even if you only want the name, REST sends the entire object.

Exemple de GraphQL 

POST /graphql
Enter fullscreen mode Exit fullscreen mode

with GraphQL, you build your meal:

query {
  dishes {
    id
    name
    rice
  }
}
Enter fullscreen mode Exit fullscreen mode

And the server returns only what you requested.

{
  "dishes": [
    {
      "id": "1",
      "name": "Dish of the Day",
      "rice": true
    }
  ]
}
Enter fullscreen mode Exit fullscreen mode

Nothing more, nothing missing.

⚠️ Most GraphQL requests are POST because GraphQL sends the query within the request body, and POST is the standard method that supports this structure.

Rest vs GraphQL Ilustration :

What is a query in GraphQL?

Think of a query like your order at a restaurant.

query {
  dishes {
    name
    rice
  }
}
Enter fullscreen mode Exit fullscreen mode

A query is the way to describe exactly what data you want.

What is the relationship between a query and a schema?

Think of the schema as a restaurant menu.

type Dish {
  id: ID!
  name: String!
  rice: Boolean!
  beans: Boolean
  meat: Boolean
  salad: Boolean
}
Enter fullscreen mode Exit fullscreen mode

It defines everything that is available and how each dish is structured:

⚠️ The ! means that the field is required. It's like saying:

“This dish always comes with rice. No exceptions.”

Final Concepts :

Concept REST (ready-made dishes) GraphQL (build your own dish)
Endpoints Many Only one
Data returned Fixed Customized
Process GET, POST, PUT, DELETE Queries and Mutations
Common problems Overfetching / underfetching Queries becoming too complex
Ideal for Simple APIs Apps that consume lots of data

📌 Code examples are available in this repository:

https://github.com/SrLuc/GrapQL-Example
Thank you all

Top comments (0)