Gatsby Cheat Sheet

A reference for Gatsby's GraphQL data layer, gatsby-config and gatsby-node APIs, and plugins for building fast static React sites.

2 PagesIntermediateFeb 25, 2026

gatsby-config.js

Site metadata, plugins, and source options.

javascript

module.exports = {  siteMetadata: {    title: 'My Gatsby Site',  },  plugins: [    'gatsby-plugin-image',    'gatsby-plugin-sharp',    'gatsby-transformer-sharp',    {      resolve: 'gatsby-source-filesystem',      options: { name: 'images', path: `${__dirname}/src/images/` },    },  ],};

GraphQL Page Query

Querying Gatsby's data layer directly from a page component.

javascript

import { graphql } from 'gatsby';export const query = graphql`  query {    allMarkdownRemark {      nodes {        frontmatter { title date }        excerpt      }    }  }`;export default function BlogIndex({ data }) {  return (    <ul>      {data.allMarkdownRemark.nodes.map((node) => (        <li key={node.frontmatter.title}>{node.frontmatter.title}</li>      ))}    </ul>  );}

Programmatic Pages (gatsby-node.js)

Generating pages from queried data at build time.

javascript

exports.createPages = async ({ graphql, actions }) => {  const { createPage } = actions;  const result = await graphql(`    query { allMarkdownRemark { nodes { frontmatter { slug } } } }  `);  result.data.allMarkdownRemark.nodes.forEach((node) => {    createPage({      path: node.frontmatter.slug,      component: require.resolve('./src/templates/post.js'),      context: { slug: node.frontmatter.slug },    });  });};

Core Concepts

The pieces that make up a typical Gatsby project.

gatsby-config.js- site-wide configuration: metadata, plugins, and source options
gatsby-node.js- Node.js APIs for creating pages programmatically and modifying the GraphQL schema
GraphQL data layer- pulls data from all sources into one queryable GraphQL layer at build time
useStaticQuery- hook for querying GraphQL data from non-page components
gatsby-plugin-image- provides the GatsbyImage component for optimized, lazy-loaded responsive images
File System Route API- generates pages automatically from file names based on GraphQL nodes
Plugins- source plugins pull in data (filesystem, CMS); transformer plugins reshape it (markdown, images)

Pro Tip

Gatsby builds are static -- data fetched via GraphQL is baked in at build time, so for content that changes often, use Incremental Builds or fetch client-side (e.g. in useEffect) instead of expecting fresh data without a rebuild.

Was this cheat sheet helpful?

Remix Cheat Sheet

Astro Cheat Sheet