Gatsby Source for Cosmic JS

Source plugin for fetching data into Gatsby from Cosmic JS. Cosmic JS offers a Headless CMS for your Gatsby website.

Install

npm install --save gatsby-source-cosmicjs

How to use

Log into your Cosmic JS account to get your bucketSlug and apiAcecss keys.

// In your gatsby-config.js
plugins: [
  {
    resolve: `gatsby-source-cosmicjs`,
    options: {
      bucketSlug: ``, // Get this value in Bucket > Settings
      objectTypes: [`posts`],
      // If you have enabled read_key to fetch data (optional).
      apiAccess: {
        read_key: ``, // Get this value in Bucket > Settings
      }
    }
  },
]

How to query and filter (Not Localized)

You can query the nodes created from Cosmic JS with the following:

{
  allCosmicjsPosts {
    edges {
      node {
        id
        slug
        title
      }
    }
  }
}

and you can filter specific node using this:

{
  cosmicjsPosts(slug: {eq: ''}) {
    id
    slug
    title
  }
}

How to query (Localized)

{
  allCosmicjsPosts(filter: {locale: {eq: "en"}}, sort: {fields: [published_at], order: DESC}) {
    edges {
      node {
        id
        slug
        title
        locale
      }
    }
  }
}

Starters

Install the Cosmic JS Gatsby starter:

npm i cosmicjs -g
cosmic init gatsby-starter
cd gatsby-starter
cosmic start

Install the Cosmic JS Gatsby localization starter:

npm i cosmicjs -g
cosmic init gatsby-starter
cd gatsby-localization-starter
cosmic start