GraphQL & Gatsby

When building with Gatsby, you access your data through a query language named GraphQL. GraphQL allows you to declaratively express your data needs. This is done with queries, queries are the representation of the data you need. A query looks like this:

Which returns this:

Notice how the query signature exactly matches the returned JSON signature. This is possible because in GraphQL, you query against a schema that is the representation of your available data. Don’t worry about where the schema comes from right now, Gatsby takes care of organizing all of your data for you and making it discoverable with a tool called GraphiQL. GraphiQL is a UI that lets you 1) run queries against your data in the browser, and 2) dig into the structure of data available to you through a data type explorer.

If you want to know more about GraphQL, you can read more about why Gatsby uses it and check out this conceptual guide on querying data with GraphQL.

In this section:

• Why Gatsby Uses GraphQL
• GraphQL Query Options Reference
• Running Queries with the GraphiQL UI
• Creating & Modifying Pages
• Querying Data in Pages with GraphQL
• Querying Data in Components with StaticQuery
• Querying Data in Components with the useStaticQuery Hook
• Using GraphQL Fragments
• Creating Slugs for Pages
• Creating Pages from Data Programmatically
• Using Third-Party GraphQL APIs
• Adding Markdown Pages
• Adding a List of Markdown Blog Posts
• Using GraphQL Playground