Migrate to Netlify Today

Netlify announces the next evolution of Gatsby Cloud. Learn more

  • Gatsbyjs.com
    Gatsbyjs.com
  • Gatsby Cloud
    Gatsby Cloud
  • Documentation
    Documentation
  • Support
    Support
  • Contact
    Contact
  • Log in
    Log in
docs
    • Tutorial
      Tutorial
    • How-to Guides
      How-to Guides
    • Reference
      Reference
    • Conceptual Guide
      Conceptual Guide
    • Quick Start
      Quick Start
    • v3

      • v4 (beta)

        v4 (beta)

      • v3

        v3

      • v2

        v2

      • v1

        v1

DocumentationHow-to Guides
Docs

Querying Data

Once data is pulled into Gatsby, your pages and components specify what data they access through GraphQL queries.

 Main Guides 4

Page queries→

Pages can specify exactly the data they require from sources via GraphQL queries.

Component queries→

Components can specify exactly the data they require from sources via GraphQL queries, though they cannot use variables in the query.

Explore data (GraphiQL)→

GraphiQL is a query IDE available in local development. It shows you the data that a GraphQL query returns alongside that query. Most Gatsby users compose their queries in GraphiQL and then cut-and-paste them into their Javascript files.

Gatsby without GraphQL→

If you find GraphQL confusing, or just want to simplify things, it’s possible to use an “unstructured data” approach -- no GraphQL required.

 Additional Guides 1

  • Query for data in a component with the StaticQuery component
  • Accessibility Statement
  • Code of Conduct
  • Logo & Assets
  • Privacy Policy
  Docs
  • How-to Guides
    • Overview
    • Overview
    • Page queries
    • Component queries
    • Explore data (GraphiQL)
    • Gatsby without GraphQL
    • Additional Guides 1