My first step into GraphQL
Since a bit of time now, I felt as if I wasn’t really learning anything new. I was keeping working with the technology I know the most (React/Javascript) and I wasn’t really trying to increase my knowledge and explore a new technology.
But then, by having a look about the companies’ requirements, I realised that most of the time, the companies required a good knowledge in React but also in others technologies that I just heard about. And one of these technologies is GraphQL.
This is not a tutorial about graphql but an experience sharing. I won’t share any code or real knowledge. You will find some resources about how to start with graphql!
What is GraphQL
Good question! According to Wikipedia, GraphQL is an open-source data query and manipulation language for APIs, and a runtime for fulfilling queries with existing data. GraphQL has been developed by Facebook and made open source in 2018. But it has been publicly release in 2015.
The amazing feature of GraphQL is the possibility for a frontend to filter the received data to reduce the size of requests and deal with the right amount of data.
The syntax used by GraphQL is very similar to JSON, which makes its usage very easy. No need to learn a new syntax!
query GetBooks {
getBooks {
id
name
author {
name
id
}
}
}It’s as simple as that, in this bit of code, you are create a new query called GetBooks this query is calling the graphQL query called getBooks and will return the asked variables inside. It’ll even nest objects!
The first step
Being a javascript developer, I decided to looks for a full stack solution for GraphQL and the most famous one is Apollo. Apollo is a Javascript solution to write backend supporting GraphQL. It’s an impression open source project which makes the development of restful API amazing! Apollo also allows you to try their solution by going through a tutorial!
After going through the first part of the tutorial, I was getting more and more familiar with graphQL, its logic and it’s wordings. I started reading about resolver, query or mutation and more I was reading this tutorial and more confusing it was. I had to come back on the code and read several times before understanding it.
Time to experiment
I know myself, I never finished a tutorial. Not because I don’t have the patience but more because when I have a minimum knowledge about a technology, I prefer creating my own project.
I agreed (with myself) on a stack for this project. A todo list (how original) using Java Spring Boot and GraphQL as backend (I decided not using any database, I know how to use them and it’d be a waste of time setting up one)
and ReactJS/Apollo Client for the frontend. The CSS/responsive is done with Bulma.
My first step is setting up the backend. My best way would be to find a tutorial which talks about the setup of Spring Boot and GraphQL. I could eventually find one on the graphql-java website.
As I said, I’m not a tutorial person. I go through the most interesting bit of it, I try to understand how java is dealing with graphql which is more JS oriented (JSON) and how Spring itself is handling it. I end up having a working server and it’s time to implement all my requests!
After implementing about 10 different requests, I end up having a big file for my queries. I decide to split it into two files, one for the queries and another one for the mutations.
It is now time to implement the frontend! Thanks to the react team, a simple create-react-app with a Typescript (❤) template and my project is up and running! Before doing any development, I wanted to be sure that I could communicate with my server and run a query. The query to get all the todos seems appropriate (I hardcoded some todos to have some when starting the server)
My first try is actually not with Apollo Client but with ugql but because of a lack of details in the error, I couldn’t determine why I couldn’t access my server :(
Apollo Client did error too, but the stack trace talked about a CORS problem. My localhost:3000 is not the same origin than my localhost:8080.
By tweaking spring boot, I did enabled the CORS and I could continue my investigation. Eventually, I end up having my request working and my data coming. I then spent the evening having fun with the CSS and create a responsive UI to display my data!
Conclusion
After one day learning GraphQL, I’m super happy about this experience and can’t wait to keep learning it and understanding it! It was also so nice going back to Java after some time not using it.
If I had one advise for people who doubt about GraphQL right, give it a go, you might be surprised!
Thank for reading, Cheers!
Rémy
