Gatsby CMS Learn how to use Cosmic JS to power content for your Gatsby applications.

Gatsby CMS | Cosmic JS Headless CMS

Gatsby

Cosmic JS makes it easy to manage content for your Gatsby applications. Get a feel for Gatsby by taking a spin through our Gatsby Apps and check out the tutorials below.

Gatsby Quickstart

Install the Gatsby Source Plugin for Cosmic JS

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
      }
    }
  }
}

Starters

Install a Cosmic-powered Gatsby app in seconds πŸ”₯ 

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


Gatsby + Cosmic JS Videos


Using Cosmic JS as a Headless CMS with Gatsby

Build a Cosmic JS-powered blog using Gatsby

Webinar: Localization with Cosmic JS and Gatsby


Gatsby CMS Articles

Developer Community: Gatsby Articles
Build a Gatsby Blog using the Cosmic JS source plugin
Netlify + Gatsby + Cosmic JS + Automatic Builds with Webhooks

Gatsby CMS Resources

Gatsby Blog
Gatsby Source Plugin
Cosmic JS Docs

  Back to Knowledge Base

Was this article helpful?

Share this article with friends and colleagues.

  Share on Facebook   Share on Twitter   Email to a colleague

Cosmic JS is your Gatsby CMS solution

Use the Cosmic JS Headless CMS to power content for any website or app.

Trusted by leading digital teams all over the world