See what's launched

The next gen Gatsby is here Performance, developer velocity, and scaling to meet Enterprise needs - See what’s launched

Sign Up for Free
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
      }
    }
  }
}
© 2022 Gatsby, Inc.