Query the data with GraphQL
I had intended to continue with my learning on Sunday. Instead, Sunday came and blurred into Monday. Monday was a holiday, no obligation at work. Still I worked slowly, googling frequently, reading bits and pieces, in bursts and stops.
GraphQL
My reading was mostly concerned with GraphQL, the what, when, why, who, and how.
Like React, GraphQL is the brain child of Facebook. Like React, its conception, perfection, and growth directly correlated with the rise and dominance and ever-increasing prevalence of smartphones. Facebook’s quest for a mobile-first user experience fueled the growth of many technological innovations (We are owned by mobiles).
In 2012, Facebook started the development of GraphQL internally. In 2015, it released it as an open source project. Since then it has been widely used by hundreds of organizations of all sizes including Facebook, Credit Karma, GitHub, Intuit, PayPal, the New York Times and many more.
GraphQL is a data query language that provides an alternative to REST-based architectures with the purpose of increasing developer productivity and minimizing amounts of data transferred, in that clients (mobile apps, web applications, other forms of data consumptions) can request and specify the exact shape of the data, thus saving time and bandwidth for transmission. API developers can also have the visibility and intelligence of the usage and demand for the data.
Now it is time to plugin and use GraphQL. My little goal is simply to query a few static JSON files.
Step 1: Install gatsby-transformer-json and gatsby-source-filesystem.
Step 2: Add gatsby-transformer-json and gatsby-source-filesystemto the list of plugin specifications in `gatsby-config.js`
Step 3: Start the query in your component. The following is my complete code for a component. It queries a .json file called post.json and outputs the list of links with its title and short description.
I found it helpful to use the local GraphQL server Gatsby spun and check the data and schema, as shown in the following:
Still much to learn. I wish I did not have to wrap my data query in edges, then node, then do a transformation to turn the queried result (an object) into an array.
FontAwesome Icons, site favicon
In addition to adding data to my site, I also spent some time fixing up my homepage and the overall site, such as by adding icons, replacing the default GatsbyJS favicon.ico.
The following is the result:
You can view the site live here and access the code here.
Note:
This is the second part of a series of my recording of learning GatsbyJs, through which I also try to peel the curtain off ReactJs, Graphql, and many other technologies that made up of the inner-working of a GatsbyJS web application.
Part one is available at: Learning GatsbyJs