This is a Gatsby source plugin for building websites using the Storyblok headless CMS with true visual preview as a data source.
npm install --save gatsby-source-storyblok
module.exports = {
plugins: [
{
resolve: 'gatsby-source-storyblok',
options: {
accessToken: 'YOUR_TOKEN',
homeSlug: 'home',
version: 'draft'
}
}
]
}
accessToken
: Your Storyblok draft tokenhomeSlug
: The slug of the "home" story. Used to get the content at the root level /version
: 'draft' or 'published'timeout
: Optionally provide a timeout for the api requestresolveLinks
: This will automatically resolve internal links of the multilink field type. If the value isstory
the whole story object will be included. If the value isurl
only uuid, id, name, path, slug and url (url is a computed property which returns the "Real path" if defined to use it for navigation links) will be included.resolveRelations
: Resolve relationships to other Stories (in the first level of nesting) of a multi-option or single-option field-type. Provide the field key(s) as array to resolve specific fields. Example: ['article.related_articles', 'article.author'].includeLinks
: If 'true' you can query links by allStoryblokLinkEntry. The links query lets you create a dynamic navigation tree as it includes also content folders.
To get all entries unfiltered you can do the following query:
{
allStoryblokEntry {
edges {
node {
id
name
created_at
published_at
uuid
slug
full_slug
content
is_startpage
parent_id
group_id
}
}
}
}
The following example shows a filter to get all items from a news folder:
{
allStoryblokEntry(filter: {full_slug: {regex: "/^news\//"}}) {
edges {
node {
name
full_slug
}
}
}
}
If you use field level translations you can filter for a specific language using following query:
{
allStoryblokEntry(filter: {lang: {eq: "de"}}) {
edges {
node {
name
full_slug
}
}
}
}
Every field of your content types is available via the prefix field_
.
This lets you for example to query for a specific component:
{
allStoryblokEntry(filter: {field_component: {eq: "page"}}) {
edges {
node {
name
full_slug
}
}
}
}
{
storyblokEntry(slug: { eq: "global-navi" }) {
content
}
}
allStoryblokDataSourceEntry {
edges {
node {
id
name
value
data_source
}
}
}
Use the links api to create a dynamic navigation tree. To use this query you need to add includeLinks: true
in the plugin options.
allStoryblokLinkEntry {
edges {
node {
id
uuid
slug
parent_id
name
is_folder
published
is_startpage
position
}
}
}