Storyblok Raises $80M Series C - Read News

What’s the True Total Price of Enterprise CMS? Find out here.

Skip to main content

Announcing gatsby-source-storyblok V4

Developers
Arisa Fukuzaki
Try Storyblok

Storyblok is the first headless CMS that works for developers & marketers alike.


We'd like to announce gatsby-source-storyblok V4 has been released to improve your Storyblok x Gatsby DX🥳

We reviewed how Gatsby & Storyblok projects are handled differently from our @storyblok/react SDK and took care of the pain points to deliver less complication.

Let us know how's your DX with our gatsby-source-storyblok V4 SDK!

Special thanks to Alex for his hard & awesome collaboration work 🙏

You'll need TL;DR? You can jump directly to the LIVE DEMO in CodeSandbox right away.

Usage

First things first, install gatsby-source-storyblok by running the command below.

        
      npm install gatsby-source-storyblok
// yarn add gatsby-source-storyblok
    

Initialization

Next step, register the plugin on your application and add the access token from your Storyblok space.

HINT::

i.e. You can initialize just once in components/layout.jsx if you use gatsby-source-storyblok for your Gatsby projects.

If you would like to use the Storyblok API Client, you can add apiPlugin.

components/layout.jsx
        
      import { storyblokInit, apiPlugin } from "gatsby-source-storyblok";
import Page from "./components/Page.jsx";
import Teaser from "./components/Teaser.jsx";

storyblokInit({
  accessToken: "YOUR_ACCESS_TOKEN",
  // bridge: true,
  use: [apiPlugin],
  components: {
    page: Page,
    teaser: Teaser,
  },
});
    

Did you realize something?😎

You don't have to handle conditionally returning components by yourself anymore!

We took care of all and you just need to add all your components to the components object in the storyblokInit function, and that's it!

Query Storyblok API and listen for Visual Editor changes

You can use the convenient useStoryblokState(originalStory, bridgeOptions) hook to get the story from the Storyblok CDN API, and automatically use Storyblok Bridge to listen for the Visual Editor live changes.

pages/index.jsx
        
      import { useStoryblokState } from "gatsby-source-storyblok"

import Layout from "../components/layout"

const IndexPage = ({ data }) => {
  let story = data.storyblokEntry
  story = useStoryblokState(story)

  return (
    <Layout>
      <h1>{story.name}</h1>
    </Layout>
  )
}

export default IndexPage

export const query = graphql`
  query HomeQuery {
    storyblokEntry(full_slug: { eq: "home" }) {
      name
      full_slug
    }
  }
`
    

For every React component, you want to link to its corresponding Storyblok component, you can use storyblokEditable function with the blok content where blok is the actual blok data coming from Storyblok's Content Delivery API

components/Feature.jsx
        
      import { storyblokEditable } from "gatsby-source-storyblok";

const Feature = ({ blok }) => {
  return (
    <div {...storyblokEditable(blok)} key={blok._uid}>
      <div>{blok.name}</div>
      <p>{blok.description}</p>
    </div>
  );
};

export default Feature;
    

Then the <StoryblokComponent blok={blok} /> will take care of loading them for you 😉.

Example:

hint:

TL;DR: Play with the Gatsby demo

Next Steps

Want to contribute? You can create an issue or PR on the Gatsby SDK repo or get in touch.

ResourceLink
gatsby-source-storyblok docshttps://www.npmjs.com/package/@storyblok/react
Storyblok Learning Hubhttps://www.storyblok.com/docs
DEV.to announcement blog posthttps://dev.to/storyblok/announcing-gatsby-source-storyblok-v4