What is GraphQL Anyway?

Great Scott! GraphQL is popping up everywhere. If you're not familiar with it already, there's a good chance you've been hearing about it. It's a relatively new technology that has been making waves across the space time continuum.

Like many new technologies, it has a pretty good dose of hype. However, many would say that for GraphQL, that hype is justified.

GraphQL represents a whole new approach for client applications (like web and mobile apps) to interact with backends. It provides a whole new way for these apps to retrieve data from servers. It can bring together mutliple data services into a single unified API that is easy and intuitive to use.

Perhaps best of all, GraphQL can make the lives of client app developers much easier by giving them a full view into what kinds of data can be queried and in what shape it will arrive.

So what the heck is GraphQL then?

Simply put, GraphQL is a special language for querying data. That's what the QL is for: query language.

But GraphQL is about much more than just a special way to query data. As a technology, it's a paradigm shift that extends to many parts of the application stack. From things like how we manage app state to how we deploy and host our server code, GraphQL gives us a fresh perspective on our development workflows that ultimately aims to make things easier.

But what does that actually mean?

Buzzwords and promises of productivity might sound ok, but they fail hard at showing how something works. If you want to get to know GraphQL, it's best to learn by doing.

This interactive tutorial aims to do just that. Each lesson has an associated challenge that requires you to craft a GraphQL query in the editor below which returns an expected data output. Complete each challenge to move onto the next lesson.

By going through these lessons and challenges, you'll get a solid introduction to how to use GraphQL as a client app developer. By the end of it, you'll be populating data into an application with simple, beautiful GraphQL queries. If that sounds good to you, then...

Let's Try GraphQL!

Say Hello!

To the right is a very special in-browser editor called GraphiQL. Its job is to give us a place to write queries and play around with a GraphQL backend.

Want to run a quick query to get a preview of some data? Just put the query in the left side and the result will come through on the right side.

Want to view which kinds of queries you can make to the particular GraphQL server we're connected to? Click the "Docs" tab and you'll be able to view them all.

Challenge

The left side of the GraphiQL editor is pre-loaded with a simple query. Hit the play button up at the top to run the query and see what gets returned.