React Framework - Gatsby

> (World Wide) Web - (W3|WWW) > Javascript (Js|ECMAScript) > React > React - Framework

1 - About

Gatsby is a React Framework that builds static PWA (Progressive Web App)

When a visitor lands on a Gatsby page, the page’s HTML file is loaded first, then the React JavaScript bundle.

Advertising

3 - Installation

yarn global add gatsby-cli

4 - Hello World

4.1 - Create a site

gatsby new [SITE_DIRECTORY_NAME] [URL_OF_STARTER_GITHUB_REPO]
# example
gatsby new hello-world https://github.com/gatsbyjs/gatsby-starter-hello-world

where:

4.2 - Start dev server

cd hello-world
gatsby develop
# or to listen on both ‘localhost’ and your local IP
gatsby develop -- --host=0.0.0.0

5 - concept

5.1 - Project Structure

./src
      /pages
      /components

5.2 - Data

Source plugins fetch data from their source.

Node is a an object in a graph

  • Metadata
gatsby-config.js
siteMetadata: {
    title: `Title from siteMetadata`,
}
Advertising

5.3 - Queries

Graphiql - http://localhost:8000/___graphql

You can sort and filter nodes, set how many nodes to skip, and choose the limit of how many nodes to retrieve.

allMarkdownRemark(sort: { fields: [frontmatter___date], order: DESC })

5.3.1 - Page

Page queries live outside of the component definition — by convention at the end of a page component file — and are only available on page components.

Tuto: build-a-page-with-a-graphql-query

5.3.2 - Static

static-query allows non-page components (like our layout.js component), to retrieve data via GraphQL queries

5.4 - Plugin

5.4.1 - Source

Source plugins fetch data from their source.

Tuto: source-plugins

5.4.2 - Transformer

transformer plugins transform the raw content brought by source plugins. transformer plugins which take raw content from source plugins and transform it into something more usable.

yarn add gatsby-transformer-remark
Advertising

5.5 - Dynamic Page Creation

Gatsby lets you use GraphQL to query your data and map the query results to pages—all at build time.

This is a two steps process:

  • Generate the “path” or “slug” for the page (ie: pandas-and-bananas.md will become /pandas-and-bananas/). See onCreateNode
  • Create the page. See createPages

Example: Gatsby - Markdown

5.5.1 - onCreateNode

  • The onCreateNode function is called by Gatsby whenever a new node is created (or updated).
gatsby-node.js
// The API  implementation for onCreateNode
const { createFilePath } = require(`gatsby-source-filesystem`)
exports.onCreateNode = ({ node, getNode, actions }) => {
  const { createNodeField } = actions
  if (node.internal.type === `MarkdownRemark`) {
 
    console.log("onCreateNode for "+node.internal.type)
    const fileNode = getNode(node.parent)
    console.log(`   * Create slug for `, fileNode.relativePath)
 
    const slug = createFilePath({ node, getNode, basePath: `pages` })
    createNodeField({
      node,
      name: `slug`,
      value: slug,
    })
 
  }
}
  • After restarting Gatsby, the slug field can be queried
graphiql
query MkDownSlugQuery {
  allMarkdownRemark {
    edges {
      node {
        fields {
          slug
        }
      }
    }
  }
}
{
  "data": {
    "allMarkdownRemark": {
      "edges": [
        {
          "node": {
            "fields": {
              "slug": "/sweet-pandas-eating-sweets/"
            }
          }
        }
      ]
    }
  }
}

5.5.2 - CreatePages

to the console for a template, see tuto

gatsby-node.js
exports.createPages = ({ graphql, actions }) => {
  // **Note:** The graphql function call returns a Promise
  // see: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise for more info
  return graphql(`
    {
      allMarkdownRemark {
        edges {
          node {
            fields {
              slug
            }
          }
        }
      }
    }
  `
).then(result => {
    console.log(JSON.stringify(result, null, 4))
  })
}
Advertising

6 - Sites build with Gatsby