How to Query in GraphQL

The basics of GraphQL, Querying and more.

Big picture there’s data in a database somewhere and it can be made public/exposed via an API, traditionally you would be given an endpoint and syntax to query it via REST, something like api.yummysnacks/list_snacks , then you use some javascript or python library to query it and you get a response, usually in JSON {snacks: {cupcake,cookie,icecream}} you then use this information to do something useful like display it on a site or app’s front end.

GraphQL is simply another way to get this information ( a query language ), you are still given an API endpoint, something like api.yummysnacks but how you ask for information is different, here’s what the previous request would look like as a graphQL query:

You would get this as a response:

This might seem like a weird over complicated syntax, but the main benefit is that you have a fundamentally different, ( yet logical ) and dramatically expanded way to interact with data ( within limits though ), let me explain…

When you query via a REST API request you have no idea what you are getting, with graphQL you know; you asked for snack type in the query, you got precisely snack type in the response. You can also ask only for the information you need, let’s say we wanted to also query for flavor , we would just change our query to :

And get the following response:

In comparison a REST api would include a predetermined set of attributes and you have no choice but to receive them along with your request.

Perhaps the most difficult thing to grasp when transitioning to GraphQL is the notion that you are dealing with a data graph on the other end of your queries and not static responses tied to particular requests, here you traverse the graph and get back tree objects; heavy stuff.

Your garden variety Graph consists of some nodes and edges, in graphQL your nodes represent data and the edges the relationship between said data, our query for instance would look like this:

And that is a tree we took out of a graph via a query.

So we could have asked the graph for a menu, snacks or beverages; these root query types are given to us by the graph itself which is what we will cover next.

We are mostly done with the theory, the following are more real world practical considerations, good place for a break if you need one.

A graphs schema is basically a map you can use to make queries and introspection is a way to ask a graph for said map.

Let’s say you are given an api endpoint and nothing else, your job is to build a front end dashboard, where do you start?

Most graphQL api endpoints lead you to a graphiQL (or similar ) interface like this one:

My favorite way to get/understand a schema is through a graphical overview using GraphQL Voyager and introspection. Introspection is a way to ask a graph for its schema and Voyager makes it super easy:

Armed with these tools and know how ( and some pen and paper ) you can plan most of your queries, let’s now look at some specific implementations and queries…

So now you know how to get a schema and have some idea of how the query process works, now you need to get started on you project, you might need some middleware in the form of a graphQL client which there are plenty , we will try out a couple for Python and Javascript…

Now that we have the basic implementations covered it’s time to tackle some basic queries, all these queries should work in your client of choice but since every graph is a little different you should use your noodle to adapt them to your needs…

Arguments beg the question where do you get arguments since every graph is different ? A few ways:

So in order to use the where: Exchange_filter we would chose a value like say tokenSymbolto filter for a specific token:

You can also find the arguments in your GraphiQL interface while typing your queries:

As a practical introduction I hope this helps you get started, there are a few more topics and graphQL features that I would point you to if you want to keep learning, these might also be needed for your project:

Mutations : Which allow you to change information in the graph.

Variables, fragments: We just scrapped what information you can use to compose your queries, variables and fragments help with complex requests.

Authentication: Some graphs require you to be authenticated to query and perform mutations.

Deeper Type & schema understanding.

Subscriptions: Get notified when a graph changes.

Serve a graph

Framework Integration

For more information on the above I would point you to the following links:

Thanks for reading !

AI, Software Developer, Designer : www.k3no.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store