Learn Gatsby - Data Fetching & GraphQL

#Introduction

Gatsby differs from most frameworks: instead of calling APIs one by one, it builds a single data layer containing all of your site's data that can be queried with GraphQL. Understanding this pattern is the key to getting the most out of Gatsby.

Episode 5 breaks down the query concepts in Gatsby, the difference between page queries and static queries, how to provide content from various sources, and patterns for querying images and content relationships.

#Understanding Gatsby's Data Layer

#One Graph for All Data

When source plugins pull in data — files, Markdown, JSON, CMS content, or APIs — Gatsby unifies it into a graph. You then use GraphQL to fetch the data you need. Because pages are rendered at build time, queries run once during the build, not on every request.

All queries can be tried out in GraphiQL at http://localhost:8000/___graphql while gatsby develop is running. Getting in the habit of trying queries in GraphiQL before writing them in code will save you a lot of time.

#A Simple Query

An example query for reading site metadata:

Query siteMetadata

query {
  site {
    siteMetadata {
      title
      description
    }
  }
}

#Page Query vs Static Query

#Page Query in Pages and Templates

A page query is used in a page or template file and runs at build time. Define it as a named export query:

Page query with markdownRemark

import { graphql } from "gatsby"
 
export const query = graphql`
  query HalamanTentang {
    markdownRemark {
      frontmatter {
        title
      }
      html
    }
  }
`

The query result is automatically passed to the page component as the data prop. Page queries support variables, so they can be customized per page through context — we'll use that in episode 9.

#Static Query in Components

Non-page components must not use page queries. Instead, use useStaticQuery from the gatsby package:

useStaticQuery in a component

import { useStaticQuery, graphql } from "gatsby"
 
const Footer = () => {
  const data = useStaticQuery(graphql`
    query {
      site {
        siteMetadata {
          title
        }
      }
    }
  `)
  return <footer>{data.site.siteMetadata.title}</footer>
}

A single component can only call useStaticQuery once.

#Sourcing Content from Markdown, JSON, and APIs

#Markdown with a Transformer Plugin

Markdown files can only be queried after you install a transformer. Install these plugins:

npm install gatsby-transformer-remark

With the gatsby-source-filesystem already configured in episode 3, the gatsby-transformer-remark plugin converts File nodes into MarkdownRemark nodes containing frontmatter, html, and excerpt.

#JSON and YAML

For structured data, install the JSON and YAML transformers:

npm install gatsby-transformer-json gatsby-transformer-yaml

After that, JSON files inside the sourced folder can be queried as DataJson, and YAML as DataYaml. This pattern suits static configuration-style data.

#External APIs

API data can flow in through plugins like gatsby-source-graphql for GraphQL APIs, or through a custom source plugin that we'll build in episode 14. Everything eventually becomes a node you can query in the data layer.

#Querying Image Data and Content Relationships

#Relationships Between Content

Gatsby's data layer is relational. A post can reference an image rendered by Sharp:

Query an image through a relationship

query PostDenganGambar {
  markdownRemark {
    frontmatter {
      title
      featuredImage {
        childImageSharp {
          gatsbyImageData(layout: CONSTRAINED)
        }
      }
    }
  }
}

The frontmatter.featuredImage relationship is formed because the source plugin connects the file path to the image node. This is one reason Gatsby is so powerful for media-rich content.

#Query Best Practices

Only request the fields you actually need — GraphQL returns exactly what you ask for. Avoid giant queries that fetch entire nodes; use the limit, filter, and sort arguments to narrow the results. The leaner the query, the faster the build and the smaller the page.

#Conclusion

Episode 5 unlocked Gatsby's core power: the GraphQL data layer. You can now tell page queries and static queries apart, provide content from Markdown, JSON, YAML, and APIs, and take advantage of relationships between content and images.

Key takeaways:

• The data layer unifies all data sources into a single queryable graph.
• Page queries are for pages and templates; useStaticQuery is for components.
• Markdown needs gatsby-transformer-remark; JSON and YAML need their own transformers.
• GraphiQL at ___graphql is an essential tool for trying out queries.
• Relationships between content and images form automatically via source plugins.
• Only request the fields you need for fast builds.

In the next episode we focus on images and media optimization — gatsby-plugin-image and Sharp for responsive images, lazy loading and placeholders, and handling audio and video on Gatsby pages.