Introduction
This is a Gatsby source plugin for building websites using the Storyblok headless CMS with true visual preview as a data source.
Install
$ npm install --save gatsby-source-storyblok # or yarn add gatsby-source-storyblok
Usage
- You need to declare the plugin use and its options in
gatsby-config.js
module.exports = {
plugins: [
{
resolve: 'gatsby-source-storyblok',
options: {
accessToken: 'YOUR_TOKEN',
version: 'draft',
languages: ['de', 'at'] // Optional parameter. Omission will retrieve all languages by default.
}
}
]
}
- You need to create a template file to get the data from GraphQL
import React from 'react'
import { graphql } from 'gatsby'
export default function StoryblokEntry ({ data }) {
const story = data.storyblokEntry
return (
<div>{story.name}</div>
)
}
export const query = graphql`
query($slug: String!) {
storyblokEntry(slug: { eq: $slug }) {
id
name
full_slug
}
}
`
- After this, you need to create the pages for your application. For this, edit your
gatsby-node.js
.
const path = require('path')
exports.createPages = async ({ graphql, actions }) => {
const storyblokEntry = path.resolve('src/templates/storyblok-entry.js')
// querying the storyblok data from GraphQL data layer
const { data } = await graphql(
`query {
allStoryblokEntry {
edges {
node {
id
full_slug
}
}
}
}`
)
// creating pages using createPage function like described in the documentation
// https://www.gatsbyjs.org/docs/programmatically-create-pages-from-data/#creating-pages
data.allStoryblokEntry.edges.forEach(edge => {
const full_slug = edge.node.full_slug
actions.createPage({
path: full_slug,
component: storyblokEntry,
context: {
slug: full_slug
},
})
})
}
The options object in details
{
resolve: 'gatsby-source-storyblok',
options: {
accessToken: 'YOUR_TOKEN',
version: 'draft',
resolveRelations: [''],
includeLinks: false
}
}
accessToken
: Your Storyblok draft tokenversion
: ‘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.languages
: An array of strings that will be used in languages request instead of languages in space settings. Use it to only load the languages that you want to.
How to query?
All Content Entries
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
}
}
}
}
Filtering of content inside a folder
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
}
}
}
}
Filtering of languages
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
}
}
}
}
Filtering on content type fields
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
}
}
}
}
A Single Content Entry
{
storyblokEntry(slug: { eq: "global-navi" }) {
content
}
}
Datasources
allStoryblokDatasource {
edges {
node {
id
value
name
data_source
}
}
}
Datasource Entries
This will return all datasources, with or not dimensions values:
allStoryblokDatasourceEntry(filter: { data_source: { eq: "DATASOURCE_SLUG" } }) {
edges {
node {
id
name
value
data_source
data_source_dimension
}
}
}
If you want to filter by a specific dimension, you should use:
allStoryblokDatasourceEntry(filter: { data_source: { eq: "DATASOURCE_SLUG" }, data_source_dimension: { eq: "DATASOURCE_DIMENSION_VALUE" } }) {
edges {
node {
id
name
value
data_source
data_source_dimension
}
}
}
Links
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
}
}
}
Contribution
Fork me on Github.
This project use semantic-release for generate new versions by using commit messages and we use the Angular Convention to naming the commits. Check this question about it in semantic-release FAQ