Migrate to Netlify Today

Netlify announces the next evolution of Gatsby Cloud. Learn more

ContactSign Up
Community Plugin
View plugin on GitHub

Gatsby Source Statamic

A Gatsby source plugin for Statamic 3 which will allow you to pull data from Statamic’s Content API into your Gatsby site.


  npm i gatsby-source-statamic -S

How to use

Sample Config

// In your gatsby-config.js
plugins: [
  resolve: `gatsby-source-statamic`,
  options: {
    * The rest api route prefix that your Statamic site is using.
    * If not set, it uses the default of 'api'
    * https://statamic.dev/rest-api#customizing-the-api-url
    restApiRoutePrefix: 'api',
     * The base URL of the Statamic site without the trailing slash. This is required.
     * Example : 'http://statamic-docs.test'
    baseUrl: `http://statamic-docs.test`,
     * Custom URL's to make use of Statamic's built in filtering, sorting, pagination, etc.
     * The key is used as the name for the node in GraphQl
     * https://statamic.dev/rest-api#filtering
     * https://statamic.dev/rest-api#sorting
     * https://statamic.dev/rest-api#selecting-fields
     * https://statamic.dev/rest-api#pagination
    customUrls: {
    * Statamic Collections
    * https://statamic.dev/rest-api#entries
    collections: [
    * Statamic Taxonomies
    * https://statamic.dev/rest-api#taxonomy-terms
    taxonomies: ['tags', 'types'],
    * If true, adds Statamic Globals
    * https://statamic.dev/rest-api#globals
    globals: true,
    * If true, adds Statamic Users
    * https://statamic.dev/rest-api#users
    users: true,
    * Statamic Assets
    * https://statamic.dev/rest-api#assets
    assets: ['main'],

Config options

Key Value Required
apiUrl String: the API URL Yes
baseUrl String: the base URL of your Statamic site Yes
customUrls Object: Allows you to add custom URL’s to take advantage of Statamtic’s filtering, sorting, etc. No
collections Array[String]: names of your Statamic Collections No
taxonomies Array[String]: names of your Statamic Taxonomies No
globals Boolean: if true, adds Statamic Globals No
users Boolean: if true, adds Statamic Users No
assets Array[String]: names of your Statamic Assets No

How to query

Get all of the titles from the ‘docs’ collection sorted in ASC order

query MyQuery {
  allCollectionDocs(sort: {fields: [title], order: ASC}) {
    edges {
      node {

GraphQL Naming

The naming conventions for various Statamic resources within GraphQL are as follows (using the example config above):

Statamic Resource GraphQL Name
customURLS the key of the customURLS object: ie allFieldtypesTitlesSortedReverse
collections allCollectionDocs, allCollectionKnowledgeBase, etc.
taxonomies allTaxonomyTags, allTaxonomyTypes
globals allGlobals
users allUsers
assets allAssetsMain
© 2023 Gatsby, Inc.