gatsby-source-cosmicjs

Gatsby Source for Cosmic

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

Install

npm install --save gatsby-source-cosmicjs

How to use

Log into your Cosmic 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
      },
      localMedia: true, // Download media locally for gatsby image (optional)
      limit: 1000, // The number of Objects to fetch on each request (optional)
    }
  },
]

How to query and filter (Not Localized)

You can query the nodes created from Cosmic 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 use Gatsby Image

if localMedia=true in plugin config, you can use Gatsby Image.

Note: gatsby-image and gatsby-source-filesystem plugins are required.

{
  allCosmicjsPosts {
    edges {
      node {
        slug
        metadata{
          hero {
            local {
              childImageSharp {
                fluid(quality: 90, maxWidth: 1920) {
                  ...GatsbyImageSharpFluid_withWebp
                }
              }
            }
          }
        }
      }
    }
  }
}

Read gatsby-image documentation here here.

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 Gatsby starter:

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

Install the Cosmic Gatsby localization starter:

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