DEV Community

ShinaBR2
ShinaBR2

Posted on

GraphQL for children

Introduction

Welcome to my blogs. So hard to introduce, so forget it =))
I'm not a fan of writing blog about a very specific technology or language even with framework. I like to show "how should you think" instead of "what can you get".
Today, I will talk about GraphQL in two main things: "Why was GraphQL born?" and "thinking in GraphQL"

Ah, take a look at GraphQL definition. I have just copied from it's homepage, nothing special from me.

GraphQL: A query language for your API

So It's a language, for sure =))) that's why It has syntax. And all things you should understand is what it using for, you'll understand how to use it correctly.

Why was GraphQL born

Not only GraphQL, as a developer, please always ask yourself, why do you use language X or framework Y. Before GraphQL, REST make the job done for very long time. Of course, GraphQL will resolve some problems that REST can not do. That's it!

We'll take a look at a scene that all of use have faced is: get list of products, show to users, click on every product will give them information detail. It's very easy to know what we need in both backend and frontend development. I'll take a model for example in backend:

Product {
    id,
    name,
    dateCreated,
    //... some more fields
}

I don't even know what programming language I have used in that above code =)) It doesn't matter anyway. But I'm sure everybody will understand what I mean. After that, frontend guys will loop all array of products to display in a table for example.

A nightmare become when frontend guys doing this. And this is fucking scene that I have faced for years with REST. What happen if on some beautiful day, somebody changes API fields, such as rename name into fucking_new_name?

As a freak frontend developer, I had resolved the problem by using two steps:

  1. Define my model in frontend side, like above
  2. Create new function to convert what received from API to my new model in step one.

That's all! From now, I don't have to find all the frontend source code to replace name into fucking_new_name. All things I should do is changing the convert function that I have created in second step above. Everything just works, perfect!

This is one of some reason that make GraphQL born. If I need to say shortly about GraphQL: "You'll get what you fucking deserve" (From Joker 2019 if you have seen that film).

From now, you have known GraphQL already.

Thinking in GraphQL

Before googling, try to think first. How can you "get what you fucking deserve"?

We need to do some steps:

  1. Define models, everything in programming should start from model.
  2. Tell what you want to get from above defined models.
  3. Just get what you fucking deserve =)))

GraphQL has already done all dirty things for you behind the scene. All things you need to do are all things above. One thing is, you should implement GraphQL on both client and server.

Back to first problem. When a backend guy change API, REST is allowed and API just work normally. With me, It's a bug, not a feature =)))

But if you using GraphQL, GraphQL will throw error, that's why you have no choice, and this fucking scene with REST never happen again. Let think about this. How GraphQL knows and throw error?
Your answer will show us one pros and cons of GraphQL: we need to define model on both client and server side. That mean if client side request some data or API responses some data that has no mapped model on the other side, error will be thrown. This behavior makes developer easier to debug what side (client/server) cause the error faster than REST.

One basic different thing between REST and GraphQL is "core concept". With REST, it uses "resource" concept. On the other hand, GraphQL is using "entity graph" concept. You can find more here (I'm neither the author nor even care who is the author by the way =))). That's why REST APIs have a lot of endpoints and some method like POST, GET, PUT and so on. On the other side, we just need GET and POST for GraphQL only. GraphQL called "Query" (seems to be like GET) and "Mutations" (seems to be like POST).

Another thing is response in GraphQL, It works typically on JSON and GraphQL syntax is based on JSON. Thanks god!

Hmm, I don't even know what to write more. As I told before, I like to show "how should you think" instead of "what you can get". You can always easy to checkout the GraphQL server code and GraphQL client code to see more how to implement. But, don't worry too much on coding, let think more about your problem need to be solved.

In a nutshell, all things should be remembered about GraphQL:

  • A query language => language for querying (I don't even know what query is, you should google for yourself anyway).
  • Define model on both client and server side.
  • It has already done dirty things for you, just tell it what data you need based on your defined above models.
  • Core concept of REST is "resource", and GraphQL is based on "entity graph".
  • Query mean getting data, mutations is changing data.

Now, I have some questions for you:

  • Can I use GraphQL with language/framework X?
  • Why do I need GraphQL?

If you guys ask me two above questions, that mean I'm totally failed for this post =)))
Thanks for reading :D

Discussion (0)