GraphQL

What is GraphQL?

GraphQL saw the light in 2012 at Facebook, where the pressure to forge a powerful APIGlossary · In briefAPIAn API is a defined way for software to exchange data or call functions in other software without needing to know how that software works internally.Read more for their mobile apps was very high. In 2015 they open-sourcedGlossary · In briefopen sourceOpen source is software whose source code is available under a licence that allows others to use, study, modify and redistribute it.Read more it, and since then adoption has only kept accelerating. Big names such as Facebook, Spotify, GitHub, Pinterest, and Twitter now use it.

Efficient communication at multiple levels

With GraphQL, a queryGlossary · In briefqueryA query is a targeted instruction to a system to retrieve, filter, combine or modify data.Read more specifies which data you want to receive, even when it comes from multiple sources. An application can request the fields needed for a particular screen. This helps avoid fetching unnecessary data or making extra requests for missing information.

The importance of speed

The faster your application loads, the better. Many studies (see here for 12 studies about how much the speed of loading impacts conversions ) have shown that each additional second of page load decreases the average conversion rate by 4.42% . With GraphQL, the client can get exactly what it wants and doesn't need to take anything else. This is why requests are so much faster than traditional API's. When the request goes out, the response comes back just as quickly, again because there isn't unnecessary information included with the response, which makes building an integration with an API so much easier. See also here you will find 12 statistics that show the impact of load time on conversion.

Collaboration between frontend and backend

GraphQL allows front-endGlossary · In brieffrontendThe frontend is the part of a website or application that users see and operate, such as pages, buttons, forms and interactive screens.Read more and back-endGlossary · In briefbackendThe backend is the part of an application that processes data, applies business rules and communicates with other systems on the server. Users usually access it through a frontend or API.Read more teams to communicate better due to how data is queried; and it also provides an effective method in which both front-end and back-end development are simpler as well as more documented. The use of GraphQL along with TypeScript, offers developers a higher level of confidence in regards to the quality and correctness of their code.

GraphQL in practice

In the public IVBB case, GraphQL appears between a NestJS backend and a React frontend in an application where security, consistent data structures, and maintainability all need to work together. That fits how we use GraphQL ourselves: mainly where multiple screens or admin flows benefit from a sharper contract, not as a universal replacement for every REST API.

We also make that nuance explicit in our own blog about GraphQL. For public APIs with multiple versions or clients that can lag behind for a long time, another approach can make more sense. We therefore assess whether GraphQL makes the data contract between client and server clearer.