Sourcing content from Storyblok with Arisa

An email sent by Queen Raae 👑 on November 19th, 2021

Hello there,

On yesterday's unauthorized and rum-fueled treasure hunts in the sharky waters around the Gatsby islands, Arisa Fukuzaki (@arisa_dev) from Storyblok climbed onboard.

Our tiny task was to source an about page!

Arisa, Ola, Paul and I on stream having a blast

This time we did not source it ourselves. We used Storyblok's official source plugin. Most of the Content Management Systems have official plugins for sourcin`g. You should use these official plugins, if you are not exploring for skill-building purposes of course 🤪

Content in Storyblok can take any form you'd like. You create the schema yourself like you do most Headless CMS. Giving you the flexibility to make the content model you need for your project.

What is sourced and added to your Storyblok nodes is a JSON object you'll find on storyblokEntry.content.

GraphQL Query Example

You'll grab that content on your page, parse it, loop over it, and render the bloks as you go along in a way that makes sense for each block. Or dump it out in a pre-tag to familiarize yourself like we did.

To connect a blok to a specific React component use its component field.

Dumping all the content as JSON on the node does not take advantage of Gatsby's Data Layer properly. For instance, your images will not be adequately sourced into Gatsby... Hopefully, they'll figure out a way to improve on this for future versions.

However, a fascinating thing happens when you take the time to connect Gatsby and Storyblok properly. You get a **live preview **of how the content will look on your Gatsby page inside the Storyblok editor.

To do so, follow the Gatsby + Storyblok tutorial, or take a peek at the Storybok + Gatsby Boilerplate (with a slightly updated approach).

All the best,
Queen Raae

PS: The code can be found on Github and if you wanna hang out with other Gatsby/Nattermob Pirates, check out the discussions in the same repo.

PPS: Next week is the last show of the season. Let us know what you would like us to explore in season 3: payment, more data layer, gated content, merch shop?

I send emails like this one to help you get the most out of Gatsby multiple times a week. Sign up to get them delivered to your inbox.