Community Plugin
View plugin on GitHubGatsby 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