Migrate to Netlify Today

Netlify announces the next evolution of Gatsby Cloud. Learn more

ContactSign Up
Community Plugin
View plugin on GitHub

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.

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

Install

npm install --save gatsby-source-cosmicjs

How to use

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

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
      }
    }
  }
}
© 2023 Gatsby, Inc.