Gatsby 1.x — In The Reading Of The Code Examples

From: Gatsbyjs.org

Disclaimer: I have not yet explored GraphQL properly, so I do not yet know the magic behind it (in the coming weeks, I intend to find it all). I’ve not used React in a proper project, have always just fiddling around with it. Also I’m not a full time programmer (I hope to change it soon, pray for me!)

Edit:

I didn’t know this great tutorial existed. A really good supplement to this article as well as to Gatsby’s official tutorial.

I got tired of not reading / writing code. It’s been almost half a year, since I’d touched something properly, besides some silly little attempts, and one intermediate attempt, both of them left in the middle of the sun.

Between studying for GRE and trying to read some code and learn something, I finally gave in to one, because not being able to decide is the worst. Enough story, on with some initial things with Gatsby Static Site Generator (now more than just static things!)

Kyle Mathew’s baby, Gatsby 1.0 turns every data source, even markdown files written in filesystem as something query-able against a GraphQL schema. More, it let’s you create dynamic graphql nodes (through its API) and create pages dynamically, on the fly. So if you wanted to have an index of all your latest blogposts sorted out by the latest, you’d need to tell Gatsby to do that, unlike in 0.x.x versions where it was magic. It is not as difficult as it might seem.

One of things that is a little cryptic to me right now is the Gatsby node API and interface, it’s jargon right now. So I picked up a Gatsby plugin — gatsby-source-plugin and starting reading its code. I still haven’t understood it all yet, but I got the gist of it, like you automatically start getting the gist of the language you keep hearing from your parents and everybody around when you are a baby. I’ll turn to it again and also other plugins to get the picture cleared more, amm… clearly 😆

Oh, by the way, Gatsby is much more modular now. It’s plugin system is rebuilt! There are two major kinds of plugins

1. Source plugins (gatsby-source-*), which gets your data to particular graphql nodes. Data from a source, for example from a database, an external API, or even markdown files in the files system. For example gatsby-source-filesystem converts files into File Nodes, against which we can query some file properties. (Follow the Gatsby official tutorial to know more about how).
2. Transformer plugins (gatsby-transform-*) can also create nodes by transforming source nodes into new types of nodes. For example

The Remark (Markdown library) transformer plugin looks for new nodes that are created with a mediaType of text/markdown and then transforms these nodes into MarkdownRemark nodes with an html field.

3. There might be many different cases for plugins that are neither of these, for example gatsby-plugin-offline, gatsby-plugin-sharp, gatsby-plugin-nprogress(for that zipping progress bar on the top of your page like youtube/medium), gatsby-plugin-glamor for using glamor style css-in-js styles, gatsby-plugin-google-analyticsetc.

This looks really powerful. Since Gatsby is so modular now, it has all kinds of plugins, from pulling data from a wordpress v2 api, to getting your website work offline. There are a whole bunch of available plugins that you can use. You can check them out here. Super cool stuff 🚀.

Coming to the Gatsbygram example that I read, which also has a detailed case study written by Kyle and other people. Some of the learnings out of it:

How are the Instagram images made queryable:

1. Get Instagram images of a particular images by scraping and downloading
2. gatsby-transform-json ! Which transforms the json data into json files nodes!
3. Querying against the GraphQL schema. It’s like all the data sources you can think of, even if they arejson files or markdown in your filesystem itself, Gatsby weaves magic to help you query against it with the help of GraphQL like it was a database.
4. That’s it!

Some of the things that I learnt new in this example are:

• To use lodash/chunk to split Image Nodes data in chunk of threes (for the Instagram like UI of three images in a row)
• typography.js just solves so much apart from resetting vendor css — from relative measuring system to using google fonts super easily.
• Implementing an infinite scroll using React’s state and calculating when we’ve reached to the bottom of our next images and continue doing so.
• I’d never seen onMouseEnter and onMouseLeave used before anywhere really, I’ve always seen hover (what’s the difference if somebody cares to spare me a google search?)
• Every component being responsible for pulling the exact shape of data it wants in the form of graphql queries. AMAZING! No json blobs anymore. So in the example (if you’ve opened it and cloned it by now, if you haven’t why are you reading this? 🤣), you could see at the end of all components which need data from somewhere, export a graphql query something like

// path to actual file
export const pageQuery = graphql`
  query allImages {
    user: allPostsJson(limit: 1) {
      edges {
        node {
          username
          ...Avatar_user
        }
      }
    }
    allPostsJson {
      edges {
        node {
          id
          text
          weeksAgo: time(difference: "weeks")
          ...Post_details
          ...PostDetail_details
          ...Modal_posts
        }
      }
    }
  }
`;

• I’m still not quite clear as to how src and srcset and sizes attributes work on an image to make it responsive across resolutions and sizes, but it’s amazing gatsby let’s you leverage it with gatsby-transform-sharp, the image processing plugin. If somebody could share some links that’d solidify my understanding of how the three attributes works, that’d be awesome!
• One of the coolest things that I got out of this example, was the use of just props (and not even state! Is because render method of layout would be called on every route change, hence the win win! (I’m talking sense, right?)) to achieve the opening of a modal window. For half an hour I kept looking for an event listener somewhere on the image post component post.js (in the example), or anywhere else. Until! I found that the layout component is always there! And that could be leveraged along with the componentWillReceiveProps to wonderfully save an event listener. It’s more elegant in the flow of how it works if you ask me. If you see how it’s being done read src/layouts/index.js.
• I also found that all the click events are sort of synthetically bubbled up to the react root, so that it is way more efficient to just find out which element (target) was clicked with just one event listener in the app. That’s sort of nice. I don’t really know any other details about it. Care to chime in if you know!
• I found that you could use mousetrap npm module to save some keyboard combinations for key events.
• You could provide different types of react templates for different type of dynamic routes you want to make. For example you could produce different kinds of templates for pages and posts say fetched from a wordpress api. using-wordpress example provides an example of how to do it (it’s very straight-forward, once you complete the official gatsby tutorial).
• Like on the Gatsby official website, the images get loaded inline using base64 encoding and then when full images are fetched gets replaced with it (how medium and facebook do things). This is already implemented in gatsby-remark-images but that’s for markdown files. I wonder if something like this could be done for a blob of HTML pulled out of an external API like wordpress’s (is it possible? I’d like to explore, if it isn’t already done).
• Gatsby lazy loads the assets that you need for the routes other than the one that you landed on and cache them in a service worker, so that everything is super instant and fast! I don’t really understand the mechanism of caching in memory for the browsers which do not have service workers implemented, just pre loading them is it?

Well there are a couple of things that might make sense. These came to me when I was on the third run of reading the gatsby docs.

1. Is already a github issue open: #430
2. It could/would be nice if there was a way to see which plugin added which types of nodes to the graphql schema.

Thanks Gatsby contributors and Kyle for this amazing tool! Makes you want to jump off your bed and write some web appy — websites!

Hope I keep writing about Gatsby until I understand everything about it 😄