Deep Dive

“The fastest auto dealership site in the world” Hundreds of hours of perf learnings, distilled

ContactSign 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.