So Easy, a Junior Dev Can Do It
GraphQL is an open-source technology used to make API calls to get exactly and only the data you want. Created by Facebook, GraphQL (GQL) works well with sites pulling large amounts of data by replacing inexact or frequent API calls with a single, precise query for the data you’re looking for. Having a GQL-enabled backend is also useful for differing data needs between a mobile vs. desktop environment.
After researching what it can do and experimenting with it firsthand, it sounds like GraphQL will do for the backend what React has done to the frontend: become a mainstream enterprise technology by simultaneously enabling scalability while maintaining ease of use.
As a relatively new developer, you quickly realized there is a vast ocean of possible technologies to learn, and you secretly wonder how capable you are to learn all of it. Or maybe that’s just me. Thankfully, with a little research and some helpful “Getting Started” docs, you can get rolling with GQL in no time at all.
GraphQL syntax is made to look like a query language (that’s what the QL stands for). Or maybe a half-SQL, half-JSON hybrid. Regardless, it’s intuitive to look at and understand what you’re asking (and you don’t need to know any special SQL commands to use it).
You need three pieces to make GraphQL requests from the frontend:
- A GQL-enabled server to query (I’m borrowing Crystallize’ demo API)
- A wrapper to “translate” the GQL into a readable API request
- The actual
<Query>in your frontend to fetch the data you want
While making GraphQL requests from the frontend require very little set-up, this blog assumes there is already a GQL-enabled server ready to receive requests.
I chose to use Apollo as the wrapper system to “translate” my API requests, which is currently the most popular wrapper choice among GraphQL developers. The other known alternative is Relay, which was created by Facebook.
I used a handful of
npm modules to make and display my query:
apollo-boostto get started with Apollo
bootstrapfor a touch of styling
In Apollo, the client is the API backend you’re going to be reaching out to. For this demo, I used
https://api.crystallize.com/graphql. This needs to happen “high” in your React app. I did it right in
index.js by wrapping all other app components under the
<ApolloProvider> tags and setting
<ApolloProvider>’s client attribute to the above API.
The next level down, I created a ProductWrapper component where I made the Apollo
<Query> to the client with the sample GQL query above. The results were mapped and returned, passing in each child as a prop to a Product component, displaying each product individually.
Note: at the time of development, the sample query also returned an empty product, so I added a filter so that I would only pass down a complete product to the Product component so it wouldn’t break while mapping.
reactstrap styling to the Product component, I could render an indefinite number of products that matched my query within a responsive framework. I didn’t bother styling more than this since my goal was to implement GraphQL in a minimalist way—just enough so that I know I could.
The result was a simple, lightweight implementation. You can see (and borrow) my implementation through my GitHub repo.
While every developer and manager needs to assess the technology for themselves, for anyone sending a lot of data to a lot of users this is definitely a scalable solution worth considering.
If a junior developer can figure this out, there’s no reason a senior dev can’t build this into their own applications. For a large-scale app handling a surplus of API calls, this could reduce the server load significantly without sacrificing functionality. I’m bullish on GraphQL.