DEV Community

Cover image for GraphQL in 3 mins!
Sadiqur Rahman for DeSpider

Posted on • Edited on

GraphQL in 3 mins!

GraphQL is a data query language developed by Facebook in 2012 and they made it public in 2015. Within this 3–4 years, many top companies have adopted GraphQL. Github, Twitter, PayPal, Pinterest, Coursera, New York Times, Shopify are few to name. Nowadays, it seems like, GraphQL has gained enough momentum to be a very 🔥Hot Topic🔥! If this is the case, then we should at least know what it is, right? Lets dive in!

When you say "Data Query Language", it does not make a lot of sense. Lets make it simple.

GraphQL is an alternative to REST API.

In REST API, one App may have hundreds of end points.

/api/users/
/api/posts/
/api/news/
/api/blah/
Enter fullscreen mode Exit fullscreen mode

But for GraphQL, it will have only one!

/graphql       or        /anythingYouLike
Enter fullscreen mode Exit fullscreen mode

Say, you need usernames and emails of users from some-site.com, for some reason. So, you send a GET request to some-site.com/api/users/. It sends you all the usernames and emails along with all the other data it had about the users.

[{
  username: "someName",
  firstName: "Mr.",
  lastname: "someName",
  email: "someName@email.com",
  age: 28,
   .
   .
   .
  and 100 more fields
}, 
{...}, {...}, ... ]
Enter fullscreen mode Exit fullscreen mode

This is very kind of REST API, but might be overwhelming!
For GraphQL, you would send a POST request to some-other-site.com/graphql with the following body

query users {
  username
  email
 }
Enter fullscreen mode Exit fullscreen mode

It would bring you the formatted data you were looking for!

[{
  username: "someOtherName",
  email: "someOtherName@email.com",
}, 
{...}, {...}, ... ]
Enter fullscreen mode Exit fullscreen mode

Sounds cool right? There is more!

As you are building a REST API, you need to use a third party software like "postman" to check if everything is working fine. For GraphQL, it ships with a built-in "Adorable" query interface.

graphQl Playground

Right section of the image above shows some documentation, which is auto-generated!

Are you excited enough to play with the GraphQL interface? Guess what? I got a demo App for you!

Live: https://despider-graphql.herokuapp.com/graphql
Github: https://github.com/despider001/graphql_event_booking

It is an event booking App, which lets users createEvent, bookEvent or cancelBooking. Just copy-paste the query below in the query section and click the play button to see it in action.

{
  getEvent {
    title
    description
    date
  }
}
Enter fullscreen mode Exit fullscreen mode

GraphQL ships with a lot more fun than what I mentioned above. To learn more, simply google it😉

Have a great day! 👋🏼

Twitter: @Sadiqur_Rahman_

Top comments (0)