React Framework - Gatsby

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.

Articles Related

Installation

yarn global add gatsby-cli

Hello World

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:

URL_OF_STARTER_GITHUB_REPO default to default starter.

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

concept

Project Structure

./src
      /pages
      /components

Data

Source plugins fetch data from their source.

Node is a an object in a graph

Metadata

siteMetadata: {
    title: `Title from siteMetadata`,
}

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 })

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

Static

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

Plugin

Source

Source plugins fetch data from their source.

Tuto: source-plugins

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

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

onCreateNode

The onCreateNode function is called by Gatsby whenever a new node is created (or updated).

// 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

query MkDownSlugQuery {
  allMarkdownRemark {
    edges {
      node {
        fields {
          slug
        }
      }
    }
  }
}

{
  "data": {
    "allMarkdownRemark": {
      "edges": [
        {
          "node": {
            "fields": {
              "slug": "/sweet-pandas-eating-sweets/"
            }
          }
        }
      ]
    }
  }
}

CreatePages

createPages

to the console for a template, see tuto

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))
  })
}

Sites build with Gatsby

reactjs.org
segment.io/blog