README
gatsby-source-cms
This plugin links your gatsby site with VTEX's CMS datalayer.
Installation
To install @vtex/gatsby-source-cms
in your project, just open your gatsby-config.js and add:
module.exports = {
plugins: [
{
resolve: '@vtex/gatsby-source-cms',
options: {
tenant,
workspace,
builder, // optional
},
},
],
}
where tenant
is your store's account name and workspace
is the VTEX IO workspace being used. Usually you will want to set this option to master
. You can use builder
to specify a different source of data on the CMS
An example config, using storecomponents account, would be:
module.exports = {
plugins: [
{
resolve: '@vtex/gatsby-source-cms',
options: {
workspace: 'master',
tenant: 'storecomponents',
},
},
],
}
Querying data
After creating contents in the CMS, you will be able to query them into the Gatsby GraphQL layer. Each content type will have a corresponding type on the Gatsby GraphQL layer.
For instace, let's supose you are defining the content type for your home page. In your home page you have a banner, and you have some information about the SEO of this page, like title and description tags. The following contentType definition is a valid solution:
{
homePage: {
blocks: {
banner: {
type: 'object',
properties: {
imageUrl: {
type: "string",
}
}
}
},
extraBlocks: {
seo: {
tags: {
type: 'object'
properties: {
title: {
type: 'string'
},
description: {
type: 'string'
}
}
}
}
},
}
}
This, in turn, would generate types in your Gatsby GraphQL layer. To query these data you can do the follwing query:
query HomePageQuery {
cmsHomePage {
sections: {
name
props
}
seo {
tags {
title
description
}
}
}
}
which would return the follwing json:
{
data: {
sections: {
name: 'banner'
props: {
imageUrl: 'https://path/to/image/url'
}
},
seo: {
tags: {
title: 'Page Title',
description: 'Page Description'
}
}
}
}
Or, if you have a collection of pages you can query by all the pages.
query MyQuery {
# all PLP pages
allCmsPlp(limit: 10) {
edges {
node {
id
name
}
}
}
# single document
cmsPlp(id: { eq: "7202148c-71b2-5224-8b23-7fda3539a826" }) {
id
name
}
}