My introduction to Gatsby.js

4 min readNov 14, 2020

Hello today I’m taking a break from my data structure series to talk about Gatsby. Gatsby is a static site generator, it uses HTML, CSS, Javascript, React and GraphQL. Before we move on I’m writing this article hoping that the readers have a fundamental understanding of HTML, CSS, Javascript, Node and React. I will take some time to explain GraphQL. Okay, sorry for the detour!

Static site generators apply data, content and templates to generate a view of a page which can be served to the visitors of a site. Gatsby produces static HTML files that are hosted on a server. This tools produces a final produce and it uses Node.js but doesn’t need node on the server.

Okay so we know what Gatsby is now but how do we use it right? Well, gatsby uses react and the JSX syntax. We can go to the gatsby docs to learn how to setup our dev environment and start our first gatsby project. Once we do that we can edit our index.js file in pages folder. Something like this below.

import React from "react"export default function Home() {return <div style={{ color: `purple`, fontSize: `72px` }}>Hello Gatsby!</div>}
// Common react functional component right!

Here we see our first change in gatsby from react. Our gatsby pages has its own built-in folder structure this is because gatsby allows the developer to add pages easier and faster. We could navigate to the new page and boom it's there without a react-router-dom switch components. Gatsby uses a similar Link component that must be imported from gatsby. Before moving to our next topic “GraphQL”. Gatsby also has cool feature the hot reloading, Gatsby watches the files for any changes, so there’s only a few instances where we must restart the gatsby servers.

The previous section is pretty much React with the Jsx syntax and everything but now for gatsby’s data layer. Gatsby uses GraphQL, GraphQL is a query language for APIs, which are meant to retrieve information from a database, such as: SQL and JSON. GraphQL receives all the data you need in the site in a single request. GraphQL is an alternative to REST, it enables a client to specify exactly what data it needs from an API, instead of multiple endpoints.

GraphQL is mobile friendly, it was made “by Facebook” to minimize the amount of data that needs to be transferred over a network. GraphQL enables components to declare the data they need. When working in gatsby, you’ll want to reuse certain pieces of data like the site title in different components, like the site title as well as the page title. We place this information in the gatsby-config.js file.

module.exports = {siteMetadata: {title: `Title from siteMetadata`,},plugins: [`gatsby-plugin-emotion`,{resolve: `gatsby-plugin-typography`,options: {pathToConfigModule: `src/utils/typography`,},},],}

Now to make a page query, we first need to import GraphQL from gatsby. Then we need to pass in

import React from "react"
import { graphql } from "gatsby"
import Layout from "../components/layout"/* Below we deconstructed the variable “data” as an argument for our functional component. Data is just a variable for our query similar to a fetch call, after removing the json in the second .then( ) method we can name our information whatever we want.fetch('http://example.com/movies.json')
  .then(response => response.json())
  .then(data => console.log(data));
*/export default function About({ data }) {
  return (
    <Layout>
      <h1>About {data.site.siteMetadata.title}</h1>
      <p>
        We're the only site running on your computer dedicated to showing the
        best photos and videos of pandas eating lots of food.
      </p>
    </Layout>
  )
}/* Before we use our data we have to export the query from graphql at the bottom of our page */
 
export const query = graphql`
  query {
    site {
      siteMetadata {
        title
      }
    }
  }
`

Now we can render the data from our api in the config folder. Before we end this article there’s a recently introduced hook for gatsby the useStaticQuery hook. This allows non-page components to retrieve data like our layout component.

import React from "react"
import { css } from "@emotion/react"
import { useStaticQuery, Link, graphql } from "gatsby"import { rhythm } from "../utils/typography"
export default function Layout({ children }) {
  const data = useStaticQuery(
    graphql`
      query {
        site {
          siteMetadata {
            title
          }
        }
      }
    `
  )
  return (
    <div
      css={css`
        margin: 0 auto;
        max-width: 700px;
        padding: ${rhythm(2)};
        padding-top: ${rhythm(1.5)};
      `}
    >
      <Link to={`/`}>
        <h3
          css={css`
            margin-bottom: ${rhythm(2)};
            display: inline-block;
            font-style: normal;
          `}
        >
          {data.site.siteMetadata.title}
        </h3>
      </Link>
      <Link
        to={`/about/`}
        css={css`
          float: right;
        `}
      >
        About
      </Link>
      {children}
    </div>
  )
}