Diving head first into GraphQL — Part 1
Overview
In this series, we shall explore the core concepts of GraphQL, with implementations in both Javascript and Python. Pythonistas and JS equivalents, I got your backs.
What is GraphQL?
GraphQL is a query language for APIs developed by Facebook and designed to supersede REST. It has been relicensed to allow better collaboration and support from well known companies.
GraphQL is an efficient way of asking for information from a server and we demonstrate that in following sections.
TLDR; Its a shiny new piece of tech, you just can’t wait to play with.
Why GraphQL?
To discuss this we really need to first understand the shortcomings of REST.
REST Pain Point #1
REST leads to under fetching and over fetching of data from the server. This is a major pain point if developing applications that are mostly liked to be used in areas with poor internet connections since many requests are made and a lot of data is transferred that may not be needed for the user. This also puts stress on a users data plan.
Consider a landing page of an application more often than not we shall need to display the username of the logged in user as it goes with REST we shall have to make a call to our API.
http://localhost:8080/users/1Returned data from the server
For our landing page we only needed the username but lo and behold the amount of data returned from the server.
GraphQL Pain Relief . #1
GraphQL queries allow us to only specify the exact data required from the server and only that is returned. This will be demonstrated later on in the series
REST Pain Point #2
REST breaks down on highly relational data and this can lead to making of too many requests or most commonly the breaking of REST conventions which sees people nest the data.
Case in point, using the returned data from above say we wanted to find all the villains Batman’s friends had this would lead to making (n +1) requests to our server.
- One request to get a list of
Batman'sfriends as per REST convention
http://localhost:8000/users/1/friends2. N requests will have to be made to all the friends
http://localhost:8000/users/1/friends/{id}/villiansGraphQL Pain Relief #2
GraphQL allows us to make a single query that will to a single endpoint which will return all the necessary data since GraphQL considers the data as Graph data structure which excels with highly relational data. For a example a simple GraphQL query can be made to achieve the above result as follows
Returned data
But hold up, lets first rewind this method of making queries really looks different and much simpler.
It is what’s called declarative fetching of data where the developer simply,
- States what data is needed
- That data is rendered on the view
As opposed to imperative fetching of data as shown below
- Making a request to an external server using fetch in JS or requests in Python
- Parse the response data as JSON
- Store the JSON locally
- Display the data UI
REST Pain Point #3
In most cases, changes that might require extra data on the UI will require the developer to make changes on the API , or versioning of APIs, the constant back and forth movement really slows down product iteration cycles.
GraphQL Pain Relief #3
GraphQL queries allow us to specify what data is needed on view , in the event that more data is needed, an additional field is added to the query with necessarily to making changes to the API
GraphQL further introduces a type checking system with the aid of schemas this allows frontend and backend teams to work separate since the expected data types are clearly known.
Though we haven’t really covered all the cool new things GraphQL brings to the table such as realtime subscriptions to data, automatic caching.(These will be demonstrated as the series proceed). I believe this is a good point to end this part of the series here.
Next part of this series, we roll up our sleeves and get our hands in dirty with implementations in Javascript and Python.
Till next time, never stop learning
Alluta continua
