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.

Install

  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: {
      fieldtypesTitlesSortedReverse:
        'http://statamic-docs.test/api/collections/fieldtypes/entries?sort=-title',
    },
    /*
    * Statamic Collections
    *
    * https://statamic.dev/rest-api#entries
    */
    collections: [
      'docs',
      'fieldtypes',
      'knowledge-base',
      'modifiers',
      'tags',
      'variables',
    ],
    /*
    * 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 {
        title
      }
    }
  }
}

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 |