Source plugin for fetching data into Gatsby from Cosmic. Cosmic offers a Headless CMS for your Gatsby website.
npm install --save gatsby-source-cosmicjs
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)
}
},
]
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
}
}
if localMedia=true
in plugin config, you can use Gatsby Image.
{
allCosmicjsPosts {
edges {
node {
slug
metadata{
hero {
local {
childImageSharp {
fluid(quality: 90, maxWidth: 1920) {
...GatsbyImageSharpFluid_withWebp
}
}
}
}
}
}
}
}
}
Read gatsby-image
documentation here here.
{
allCosmicjsPosts(filter: {locale: {eq: "en"}}, sort: {fields: [published_at], order: DESC}) {
edges {
node {
id
slug
title
locale
}
}
}
}
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