DEV Community: Arisa Fukuzaki

Storyblok Gatsby SDK is free from axios✨

Arisa Fukuzaki — Mon, 23 Jan 2023 11:37:49 +0000

Happy new year! After the new year and holiday season, our Gatsby SDK (gatsby-source-storyblok) has now removed axios🎉

You can enjoy much lighter gatsby-source-storyblok as we removed 16.4 KB according to BundlePhobia.

To enjoy this benefit, install (gatsby-source-storyblok) newly or update it into v5.0.0.

We won't stop telling you another good news from this release. Our Gastsby SDK has Fetch API support.

You don't need to install extra isomorphic-fetch into your Storyblok & Gatsby applications.

You can enjoy using our Gatsby SDK regardless of having lower than Node 16 or higher.

Here is the documentation with more technical perspective and capabilities.

Gatsby SDK capabilities: https://github.com/storyblok/gatsby-source-storyblok#compatibility

Also, if you want to learn how to integrate Storyblok into your Gatsby project, you can follow our 5 minutes guide from Ultimate Tutorial series to implementing Gatsby with Storyblok.

Special thanks to Alex Jover and Facundo Giuliani for giving me many new knowledge.

We'd love to hear your experience and feedback. Feel free to share with us how's your experience with our SDKs and we're open to hear your ideas to keep improving our SDKs.

Happy coding!

Storyblok Gatsby SDK – now with TypeScript support 🎉

Arisa Fukuzaki — Fri, 29 Jul 2022 16:55:15 +0000

During this summer, we have been working on to support TypeScript in our SDK ecosystem.
We have TypeScript for @storyblok/js SDK, @storyblok/svelte SDK, @storyblok/vue & @storyblok/vue-2 SDK, @storyblok/react SDK... and finally, gatsby-source-storyblok (Gatsby SDK) also supports TypeScript👏

Now, you can add typing to your Gatsby projects, while having an even better developer experience connecting to Storyblok.

Can't wait to test it out? You can try it out from our Gatsby boilerplate repo!

If you install gatsby-source-storyblok newly or update it into v4.1.0, you'll be able to enjoy auto-completion, static typing and warnings in case something doesn’t add up, even if you are not using TypeScript🕵️‍♀️

If you'd like to know more details about Gatsby and TypeScript, Gatsby provides a full documentation how you can configure and use it from zero to hero.

Also, if you want to learn how to integrate Storyblok into your Gatsby project, you can follow our 5 minutes guide to implementing Gatsby with Storyblok.

As a wrap-up, I'd like to say a special thanks to Alex Jover for giving me many new knowledge as well as Josefine, Facundo and Manuel for working together in a SDK squad💪

Lastly, we'd love to hear your experience and feedback. Feel free to share with us how's your experience with our SDKs and we're open to hear your ideas to keep improving our SDKs.

Let's make our SDKs better together through community!

Announcing gatsby-source-storyblok V4

Arisa Fukuzaki — Tue, 07 Jun 2022 23:29:11 +0000

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.

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.

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 any more!

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
    }
  }
`

Link your components to Storyblok Visual Editor

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

TL;DR: Play with the Gatsby LIVE DEMO

Next Steps

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

Resource

gatsby-source-storyblok docs: https://www.npmjs.com/package/gatsby-source-storyblok
Storyblok Learning Hub: https://www.storyblok.com/docs
Storyblok website, announcement blog post: https://www.storyblok.com/mp/announcing-gatsby-sdk-v4

Announcing @storyblok/react

Arisa Fukuzaki — Mon, 07 Mar 2022 11:08:15 +0000

Starting from our brand new @storyblok/js, we announced @storyblok/svelte about 1 week and a few days ago.

Today, we'd like to announce another hot🔥 SDK - @storyblok/react 🥳

We reviewed how React & Storyblok projects are handled and took care of the pain points to deliver less complication.

Let us know how's your DX with our new @storyblok/react SDK!

Special thanks to Alex, Facundo and Josefine for their hard & awesome work 🙏

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

Usage

First things first, install @storyblok/react by running a command below.

npm install @storyblok/react
// yarn add @storyblok/react

Initialization

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

i.e. You can do that in pages/_app.js if you use @storyblok/react for your Next.js projects, or in index.js file in React apps.

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

import { storyblokInit, apiPlugin } from "@storyblok/react";
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 any more!

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 useStoryblok(slug, apiOptions) hook to get the story from the Storyblok CDN API, and automatically use Storyblok Bridge to listen for the Visual Editor live changes.

import { useStoryblok, StoryblokComponent } from "@storyblok/react";

export default Home() {
  const story = useStoryblok("react", { version: "draft" });

  if (!story.content) {
    return <div>Loading...</div>;
  }

  return <StoryblokComponent blok={story.content} />;
}

Link your components to Storyblok Visual Editor

// components/Feature.jsx
import { storyblokEditable } from "@storyblok/react";

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

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

Next.js example

TL;DR: Play with the Next.js LIVE DEMO

Since in Next.js you use the getStaticProps function to get the Page props, the useStoryblok hook has no use here.

But no worries, you can use a combination of useStoryblokApi and useStoryblokState to achieve the same on Next.js and Gatsby! This is how the previous example looks in Next.js:

import { useStoryblokState, useStoryblokApi, StoryblokComponent } from "@storyblok/react";

export default function Home({ story: initialStory }) {
  const story = useStoryblokState(initialStory);

  if (!story.content) {
    return <div>Loading...</div>;
  }

  return <StoryblokComponent blok={story.content} />;
}


export async function getStaticProps({ preview = false }) {
  const storyblokApi = useStoryblokApi()
  let { data } = await storyblokApi.get(`cdn/stories/react`, {
    version: "draft"
  });

  return {
    props: {
      story: data ? data.story : false,
      preview,
    },
    revalidate: 3600, // revalidate every hour
  };
}

Next Steps

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

Resource

@storyblok/react docs: https://www.npmjs.com/package/@storyblok/react
Storyblok Learning Hub: https://www.storyblok.com/docs
Storyblok website, announcement blog post: https://www.storyblok.com/mp/announcing-storyblok-react

[Gatsby] Solutions to "The result of this StaticQuery could not be fetched."

Arisa Fukuzaki — Tue, 25 May 2021 15:38:56 +0000

Hi there!

I'm Arisa, a DevRel from this June living in Germany🇩🇪 (A big announcement is coming this June😏)

I have a free online programming learning community called Lilac, with free hands-on Frontend e-books👩‍💻

Who is this article for?

Anyone who struggle with the error below

Error: The result of this StaticQuery could not be fetched.

This is likely a bug in Gatsby and if refreshing the page does not fix it, please open an issue in https://github.com/gatsbyjs/gatsby/issues

Why did this error appear?

It appeared when I finished to build featured blog posts in Home page in my Storyblok & Gatsby blog project.

To be honest, if I think now, it was almost like a coincidence that I didn't get this error earlier.

More specifically, I added useStaticQuery in one component.

Technically, that was the time my project started to have useStaticQuery in 2 components files and one was nested.

A nested file with useStaticQuery was the problem.

My environment

Directory architecture is important in this case.

I'll show only the most relevant one.

src
  - components
    - Layout.js
    - Header.js
pages
  - index.js

Here's my other environment.

  "dependencies": {
    "gatsby": "^3.5.1",
    "gatsby-plugin-dark-mode": "^1.1.2",
    "gatsby-plugin-gatsby-cloud": "^2.4.1",
    "gatsby-plugin-google-fonts": "^1.0.1",
    "gatsby-plugin-image": "^1.4.0",
    "gatsby-plugin-manifest": "^3.4.0",
    "gatsby-plugin-offline": "^4.4.0",
    "gatsby-plugin-postcss": "^4.5.0",
    "gatsby-plugin-react-helmet": "^4.4.0",
    "gatsby-plugin-sharp": "^3.4.1",
    "gatsby-source-filesystem": "^3.4.0",
    "gatsby-source-storyblok": "^3.0.1",
    "gatsby-transformer-sharp": "^3.4.0",
    "postcss": "^8.2.15",
    "prop-types": "^15.7.2",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-helmet": "^6.1.0",
    "react-syntax-highlighter": "^15.4.3",
    "storyblok-js-client": "^4.0.9",
    "storyblok-react": "^0.1.2",
    "storyblok-rich-text-react-renderer": "^2.3.1",
    "tailwindcss": "^2.1.2"
  },
  "devDependencies": {
    "prettier": "2.2.1"
  },

Step 1: Delete `useStaticQuery` from Layout.js

In the beginning, I had useStaticQuery in Layout.js file.

Before

import * as React from "react"
import PropTypes from "prop-types"
import { useStaticQuery, graphql } from "gatsby"

import Header from "./header"
import "./layout.css"

const Layout = ({ children }) => {
  const data = useStaticQuery(graphql`
    query SiteTitleQuery {
      site {
        siteMetadata {
          title
        }
      }
    }
  `)

  return (
    <div>
      <Header siteTitle={data.site.siteMetadata?.title || `Title`} />
      <div>
        <main>{children}</main>
        <footer>
          © Arisa Fukuzaki {new Date().getFullYear()}, Built with
          {` `}
          <a href="https://www.storyblok.com">Storyblok, Gatsby.js &amp; TailwindCSS</a>
        </footer>
      </div>
    </div>
  )
}

Layout.propTypes = {
  children: PropTypes.node.isRequired,
}

export default Layout

This Layout.js file was imported to pages/index.js file.

useStaticQuery is a custom hook from React.js.

It's not clearly written in Gatsby's documentation to recommend to use in a top level.

Yet, there's an information in their issue.

Error in function useStaticQuery
29416

Getting the idea from this, here is what I did.

Delete useStaticQuery from Layout.js
Instead, use StaticQuery in Header.js

Let's complete step 1.

Chage your Layout.js file into this 👇

After

import * as React from "react"
import PropTypes from "prop-types"
import "./layout.css"
import Header from './header'

const Layout = ({ children }) => {
  return (
    <div>
      <div>
        <Header />{/* 👈 don't forget to import */}
        <main>{children}</main>
        <footer>
          © Arisa Fukuzaki {new Date().getFullYear()}, Built with
          {` `}
          <a href="https://www.storyblok.com">Storyblok, Gatsby.js &amp; TailwindCSS</a>
        </footer>
      </div>
    </div>
  )
}

Layout.propTypes = {
  children: PropTypes.node.isRequired,
}

export default Layout

Step 2: Use `StaticQuery` in Header.js

Next up, we'll use StaticQuery in Header.js file.

At this moment, we deleted completely query related code from Layout.js file.

Instead, we include queries in Header.

Luckily, Gatsby prepared everything almost exactly the same in their documentation to use StaticQuery ✨

Querying Data in Components using StaticQuery

We'll use the technique they used.

Basically, here's what we'll do.

Import StaticQuery
Create a Header component with a data prop
Create a separated query component to use StaticQuery (has to be JSX)
propTypes

To compare the difference, let me show you my previous Header.js file before.

Before

import * as React from "react"
import PropTypes from "prop-types"
import { Link } from "gatsby"
import ThemeToggle from '../components/themeToggle'

const Header = ({ siteTitle }) => (
  <header>
    <div>
      <h1>
        <Link to="/">{siteTitle}</Link>
      </h1>
      <ul>
        <li><ThemeToggle /></li>
        <ul>
          <li>
            <Link to="/blog/">Blog</Link>
          </li>
          <li>
            <Link to="/talk/">Talk</Link>
          </li>
        </ul>
      </ul>
    </div>
  </header>
)

Header.propTypes = {
  siteTitle: PropTypes.string,
}

Header.defaultProps = {
  siteTitle: ``,
}

export default Header

We'll use StaticQuery in this file.

After

import * as React from "react"
import PropTypes from "prop-types"
import { Link } from "gatsby"
import ThemeToggle from '../components/themeToggle'
import { StaticQuery, graphql } from "gatsby"// 👈

// 👇 Declare just a Header JSX component
const Header = ({ data }) => (
  <header>
    <div>
      <h1>
        <Link to="/">
          {data.site.siteMetadata.title}
        </Link>
      </h1>
      <ul>
        <li><ThemeToggle /></li>
        <ul>
          <li>
            <Link to="/blog/">Blog</Link>
          </li>
          <li>
            <Link to="/talk/">Talk</Link>
          </li>
        </ul>
      </ul>
    </div>
  </header>
)

// 👇 Query component
export default function MyHeader(props) {
  return (
    <StaticQuery
      query={graphql`
        query SiteTitleQuery {
          site {
            siteMetadata {
              title
            }
          }
        }
      `}
      {/* 👇 Import Header component & pass props */}
      render={data => <Header data={ data } {...props} />}
    />
  )
}

Header.propTypes = {
  data: PropTypes.shape({
    site: PropTypes.shape({
      siteMetadata: PropTypes.shape({
        title: PropTypes.string.isRequired,
      }).isRequired,
    }).isRequired,
  }).isRequired,
}

And it works!👍

I tried to find the solution in "Error: The result of this StaticQuery could not be fetched. #24902", which looks like the most relevant issue I had.

It worked in the beginning by just running $ yarn clean but in my case, the same issue came back after a day.

I took a look at the browser console error log too.

Then found that it pointed out Layout.js file's useStaticQuery although Gatsby's error log showed it could be a bug.

So, I hope my blog post helps your case too🙏

[Storyblok, Gatsby] Create a blog overview page

Arisa Fukuzaki — Sun, 23 May 2021 15:47:07 +0000

Hi! I'm Arisa, a DevRel from this June living in Germany🇩🇪 (A big announcement is coming this June😏)

I have a free online programming learning community called Lilac, with free hands-on Frontend e-books👩‍💻

Who is this article for?

Anyone who wants to build a tech blog with Storyblok & Gatsby.js

Step 1: Create a root entry in a folder

Create a root entry in a folder which I expect you to already have a few blog entries.

Go to "Components" from the left hand side of the menu.

Click "blogOverview" component we just created.

Add "title" and "body" schemas.

The "title" schema can stay as it is.

As for the "body" schema, change a type into "blocks".

After that, set up the rest as below.

Tick "allow only specific components to be inserted"
Choose "grid", "teaser" and "featured-articles" from "Component whitelist" section
Set "allow maximum" section as 1000

At this point, you can't find yet the component called "featured-articles".

Let's move on to create that.

In a same "Components" page in a main dashboard, Click an option called "NEW" in the up right corner.

Define one schema with a name of "articles" and select a type as "blocks".

It should look like this.

There's one more component we need to create to add "component whitelist" into a "featured-articles".

We'll create a component called, "article-teaser" with "Link" type.

Step 2: Create a `pages/blog.js` page

Next up, we create a blog overview page in Gatsby.

If you are lost why I'm doing this, take a look at the Gatsby's documentation about page creation.

Gatsby: Define routes in src/pages

This time, we know that we only want just one blog overview page.

Which means, we won't create several same page templates like this in this case.

If so, we can save our time to create a page component file under the pages directory.

Create src/pages/blog.js file.

As an example, it'll be something like this.

import * as React from "react"
import { graphql } from 'gatsby'
import SbEditable from 'storyblok-react'

import Layout from "../components/Layout"
import Seo from "../components/seo"
import DynamicComponent from "../components/DynamicComponent"
import useStoryblok from "../lib/storyblok"

const BlogOverview = ({ data, location }) => {
  console.log(data)
  let story = data.storyblokEntry
  story = useStoryblok(story, location)

  const components = story.content.body.map(blok => {
    return (<DynamicComponent blok={blok} key={blok._uid} />)
  })

  return (
  <Layout>
    <SbEditable content={story.content}>
      <Seo title="Blog Posts" />
        <div>
          <div>
            <h1>{ story.content.title }</h1>
          </div>
        </div>
        { components }
    </SbEditable>
  </Layout>
)}

export default BlogOverview

export const query = graphql`
  query BlogPostsQuery {
    storyblokEntry(full_slug: {eq: "blog/"}) {
      content
      name
    }
  }
`

How do I know the path to fetch queries?

Gatsby provides us GraphiQL👍

Go to http://localhost:8000/___graphql in the browser.

This time, we want a entry page from Storyblok.

(Remember that our Overrview page was created as an entry?)

So, choose storyblockEntry and let's take a look at a draft JSON from Storyblok.

You can get access from the Storyblok main dashboard.

Our goal in here is to make a slug in this blog overview page to "/blog/" .

To do so, we need to check a value in full_slug from a draft JSON.

There it is💪

It shows us that we can set our eq variable as "blog/" .

These are the gems we need to generate a blog overview page💎

And that's why I already knew a path to fetch necessary data.

Step 3: Create Posts List in Blog Overview component.

Click "Add block".

In the list of the blocks, we can't find a block we want to use this time.

Instead, we add a new block.

Click an input section, and type our new block name as "posts-list".

It'll appear as a new block in a body schema.

When you click "Posts List", you'll see all the blog entry pages are prepared.

(Make sure you already created few blog posts.)

(If you can't find one yet, I recommend you to take a look at this blog post.)

[Storyblok, Gatsby] Programmatically create blog post pages from data

At this point, we can already see our blog overview page!

But not yet all the blog posts list by a Posts List field component.

Step 4: Resolving relations on multi-options field type

First, we'll edit our file which is dealing with the Storyblok Bridge and visual editor Events.

In my case, I created in a path of src/lib/storyblok.js .

But you can create with different names.

If you have already done Storyblok's blog post, "Add a headless CMS to Gatsby.js in 5 minutes", your arc/lib/storyblok.js file looks similar with this.

import { useEffect, useState } from "react"
import StoryblokClient from "storyblok-js-client";
import config from '../../gatsby-config'
const sbConfig = config.plugins.find((item) => item.resolve === 'gatsby-source-storyblok')

const Storyblok = new StoryblokClient({
  accessToken: sbConfig.options.accessToken,
  cache: {
    clear: "auto",
    type: "memory",
  },
});

export default function useStoryblok(originalStory, location) {
    let [story, setStory] = useState(originalStory)

    if(story && typeof story.content === "string"){
      story.content = JSON.parse(story.content)
    }

    // see https://www.storyblok.com/docs/Guides/storyblok-latest-js
    function initEventListeners() {
      const { StoryblokBridge } = window

      if (typeof StoryblokBridge !== 'undefined') {
        const storyblokInstance = new StoryblokBridge()

        storyblokInstance.on(['published', 'change'], (event) => {
          // reloade project on save an publish
          window.location.reload(true)
        })  

        storyblokInstance.on(['input'], (event) => {
          // live updates when editing
          if (event.story._uid === story._uid) {
            setStory(event.story)
          }
        }) 

        storyblokInstance.on(['enterEditmode'], (event) => {
          // loading the draft version on initial view of the page
          Storyblok
            .get(`cdn/stories/${event.storyId}`, {
              version: 'draft',
            })
            .then(({ data }) => {
              if(data.story) {
                setStory(data.story)
              }
            })
            .catch((error) => {
              console.log(error);
            }) 
        }) 
      }
    }

    function addBridge(callback) {
        // check if the script is already present
        const existingScript = document.getElementById("storyblokBridge");
        if (!existingScript) {
          const script = document.createElement("script");
          script.src = `//app.storyblok.com/f/storyblok-v2-latest.js`;
          script.id = "storyblokBridge";
          document.body.appendChild(script);
          script.onload = () => {
            // call a function once the bridge is loaded
            callback()
          };
        } else {
            callback();
        }
    }

    useEffect(() => {
      // load bridge only inside the storyblok editor
      if(location.search.includes("_storyblok")) {
        // first load the bridge and then attach the events
        addBridge(initEventListeners)
      }
    }, []) // it's important to run the effect only once to avoid multiple event attachment

    return story;
}

We'll add the resolve_relations option of the Storyblok API in this file.

const storyblokInstance = new StoryblokBridge({
        resolveRelations: "posts-list.posts"
})

Storyblok
  .get(`cdn/stories/${event.storyId}`, {
    version: 'draft',
    resolve_relations: "posts-list.posts"
  })

If you got exhausted from what I just show you, no worries.

I didn't come up all these code by myself.

Storyblok has prepared over 90% of them in their hands-on blog tutorial.

The Complete Guide to Build a Full-Blown Multilanguage Website with Gatsby.js

Take a look at their GitHub repo of this project.

You'll find a lot of clues in there :)

Storyblok: gatsbyjs-multilanguage-website

We set up our src/lib/storyblok.js to resolve relations with multi-option field type.

But the trick to display all of our blog posts list can't be done by just this single file.

We'll go and take a look at their gatsby-source-storyblok README to complete the rest of the settings.

Storyblok, gatsby-source-storyblok README

At this point, we know that we'll need to deal with gatsby-node.js file and gatsby-config.js files.

But in our case, our blog posts list page doesn't have much chance to create same structured pages like blog entries.

It means, it might not be useful to create as a template.

In this case, we don't need to create a blog posts list template as well as configuring in gatsby-node.js file.

For a moment, we already know that we can add resolveRelations value in gatsby-config.js file.

Add your value something like this.

{
  resolve: 'gatsby-source-storyblok',
  options: {
    accessToken: 'YOUR_TOKEN',
    version: 'draft',
    resolveRelations: ['Post'],
    includeLinks: false
  }
}

In my case, I created my blog entry pages with Post content type.

It means, one single Post content type contains one single blog entry page.

If I could map them, technically, I can see all my blog posts list💡

Including the example of the value in resolveRelations , it's all in their documentation.

Take a look at the section of The options object in details.

Storyblok gatsby-source-storyblok README: "The options object in details"

Step 5: Create a PostsList component

We're almost done!

Next up, we'll create a src/components/PostsList.js file.

This component file will map contents for us.

In this case, the contents we want are our blog posts.

This component file is also based on what Storyblok wrote in their hands-on blog post and their GitHub repo.

Take a look at the section of "Resolving Relations on Multi-Options fields".

Storyblok, "Resolving Relations on Multi-Options fields"

You see the PostsList.js file example.

In my case, I don't need rewriteSlug function.

And I want to display my blog posted dates like "YYYY-MM-DD".

In that case, it'll look something like this.

import React from "react"
import SbEditable from "storyblok-react"
import { useStaticQuery, graphql } from "gatsby"

const PostsList = ({ blok }) => {
  console.log(blok)
  let filteredPosts = [];
  const isResolved = typeof blok.posts[0] !== 'string'

  const data = useStaticQuery(graphql`
    {
      posts: allStoryblokEntry(
        filter: {field_component: {eq: "Post"}}// 👈 change it to your content type
      ) {
        edges {
          node {
            id
            uuid
            name
            slug
            full_slug
            content
            created_at
          }
        }
      }
    }
  `)
  if(!isResolved) {
    filteredPosts = data.posts.edges
    .filter(p => blok.posts.indexOf(p.node.uuid) > -1);

    filteredPosts = filteredPosts.map((p, i) => {
      const content = p.node.content
      const newContent = typeof content === 'string' ? JSON.parse(content) : content
      p.node.content = newContent
      return p.node
    })
  }

  const arrayOfPosts = isResolved ? blok.posts : filteredPosts
  return (
    <SbEditable content={blok} key={blok._uid}>
      <div>
      <ul>
        {arrayOfPosts.map(post => {
          return (
            <li key={post.name}>
              <div>
                <span>
                  { post.created_at.slice(0, 10) }
                </span>
              </div>
              <div>
                <a href={`/${post.full_slug}`}>
                  {post.content.title}
                </a>
                <p>{post.content.intro}</p>
              </div>
              <div>
                <a href={`/${post.full_slug}`}>
                  Read more
                </a>
              </div>
            </li>
          )
        })}
      </ul>
      </div>
    </SbEditable>
  )
}

export default PostsList

Last thing but not least, import component into src/components/DynamicComponent.js file.

import SbEditable from 'storyblok-react'
import Teaser from './Teaser'
import Grid from './Grid'
import Feature from './Feature'
import PostsList from './PostsList'
import React from "react"

const Components = {
  'teaser': Teaser,
  'grid': Grid,
  'feature': Feature,
  'posts-list': PostsList
}

// the rest will continue

Congrats🎉🎉🎉

We've achieved our goal!

One last thing to fix a tiny thing.

If we take a look closer, you notice that the order of the blog posts are not ideal.

We want our blog posts to be ordered by posted date, which means that we want our newest post in top.

To do that, it's not that hard.

Just add order: DESC in src/templates/PostsList.js query part.

  const data = useStaticQuery(graphql`
    {
      posts: allStoryblokEntry(
        filter: {field_component: {eq: "Post"}}
        sort: {fields: [created_at], order: DESC} //👈
      ) {
        edges {
          node {
            id
            uuid
            name
            slug
            full_slug
            content
            created_at
          }
        }
      }
    }
  `)

Looks much better👍

Trouble shooting

If you encounter the error says "Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.", probably, it could be a case you forgot to create/load src/pages/blog.jsfile.

I accidentally commented out entire source code in this file while I was still figuring out.

And turned out that it just was that I forgot to load this file😅

Silly but you might also get into this rabbit hole.

React pointed this out too, if you'd like to take a look at what others were having this issue.

React.js, "Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object."

[Storyblok, Gatsby] Integrate syntax highlight in Storyblok rich text

Arisa Fukuzaki — Sat, 22 May 2021 00:05:44 +0000

Hi there!

I'm Arisa, a DevRel from this June living in Germany🇩🇪 (A big announcement is coming this June😏)

I have a free online programming learning community called Lilac, with free hands-on Frontend e-books👩‍💻

Who is this article for?

Anyone who wants to try out integrating syntax highlight in the Storyblok blog project
Anyone who wants to build a tech blog with Storyblok & Gatsby.js
Anyone who wants to know the syntax highlight integration in a Headless CMS with Gatsby.js

To help you understand the prep before integrating syntax highlight in rich text from Storyblok, here are some resources to read📖

Storyblok: The Complete Guide to Build a Full-Blown Multilanguage Website with Gatsby.js

Add a headless CMS to Gatsby.js in 5 minutes

[Gatsby, TailwindCSS] Integrate dark mode in 10 minutes

I highly recommend you to take a look at the blog post I wrote below.

This blog post requires you to have a basic understanding of the fetching rich text from Storyblok.

The blog post below helps you with hands-on source code :)

[Storyblok, Gatsby] Programmatically create blog post pages from data

Step 1: Fetch node resolvers, `NODE_CODEBLOCK` with `storyblok-rich-text-react-renderer`

At this point, I expect you that you completed to generate a blog entry page dynamically with using gatsby-node.js file.

If you feel I started to talk about unicorns, go grab my blog post I recommended you above🦄

First things first, install storyblok-rich-text-react-renderer if you didn't have yet from the blog post I recommende you to take a look at first.

$ yarn add storyblok-rich-text-react-renderer

Import render from storyblok-rich-text-react-renderer .

If you followed the blog I asked you to take a look at first, it'll look something like this.

import { render } from 'storyblok-rich-text-react-renderer'

export default function BlogEntry({ pageContext, location }) {
  let story = pageContext.story
  story = useStoryblok(story, location)

  return (
    <Layout>
      <p>{ story.content.intro }</p>
      <div>
        {/* 👇 render a rich text data */}
        { render(story.content.long_text) }
      </div>
    </Layout>
  )
}

Technically, we already can see code_block data content type in the browser without configuring the details of code_block data content type.

It's because long_text data content contains all rich text from Storyblok draft JSON.

code_block is a data content type to stow code blocks from Storyblok's main dashboard content input.

But it's not with styles if you see the results in the browser.

Looks treated exactly the same style as paragraph data content type.

We want our code_block data content type to be highlighted.

Step 2: Map node resolvers to custom React components

Don't be paranoid, I'll explain what's node resolvers are👍

The node resolvers are the optional second argument of the render function from storyblok-rich-text-react-renderer .

There're several values assigned from Storyblok.

render(document, {
    markResolvers: { ... }, // inline elements
    nodeResolvers: { ... }, // block elements
    blokResolvers: { ... }, // embedded components
    defaultBlokResolver: (name, props) => ( ... ),
    defaultStringResolver: (str) => ( ... ),
});

Storyblok: Storyblok Rich Text Renderer for React, README, advanced usage

We'll use nodeResolvers this time.

code_block data content type is a block element.

It's all written in the documentation.

Storyblok: Storyblok Rich Text Renderer for React, README, node resolvers

We can use below for code_block data content type.

NODE_CODEBLOCK — (children, { class }) => { ... }

Let's take a look at the example first.

import MyImage from 'components/MyImage';
import { render, NODE_IMAGE } from 'storyblok-rich-text-react-renderer';

render(document, {
    nodeResolvers: {
        [NODE_IMAGE]: (children, props) => <MyImage {...props} />
    }
});

It's nothing different from the documentation.

Just the node resolver is an image in this case.

The only differences are below.

We don't create a separated component for code_block to render
Use NODE_CODEBLOCK

Based on that, we can write something like this.

import { render, NODE_CODEBLOCK } from 'storyblok-rich-text-react-renderer'

export default function BlogEntry({ pageContext, location }) {
  let story = pageContext.story
  story = useStoryblok(story, location)

  return (
    <Layout>
      <p>{ story.content.intro }</p>
      <div>
        {/* 👇 render a rich text data & code_block */}
       {
          render(story.content.long_text, {
            nodeResolvers: {
              [NODE_CODEBLOCK]: (children, story) => {
                  return (
                      <pre>
                        <code { ...story }>{ children }</code>
                      </pre>
                  )
                }
              }
            }
          )
        }
      </div>
    </Layout>
  )
}

Let me tell you the results already before you get disappointed.

It won't make any change in the browser😅

It's because we already fetched code_block when we rendered long_text data content.

If so, why we did all those work?

Trust me.

Soon later, you'll know how this way is much easier than if you try out integrating Prism.js or highlighter.js by yourself.

It's less packages to install, no babel config is required and our code is very short.

But how we'll add the syntax highlight?

We'll combine with React Syntax Highlighter.

Step 3: Apply React Syntax Highlighter

To do that, let's install it first.

$ yarn add react-syntax-highlighter

Import SyntaxHighlighter and a style theme.

import SyntaxHighlighter from "react-syntax-highlighter";
import { tomorrow } from 'react-syntax-highlighter/dist/esm/styles/prism';

You can choose your theme styles from their documentation.

React Syntax Highlighter, README

The example from their documentation shows like this.

import SyntaxHighlighter from 'react-syntax-highlighter';
import { docco } from 'react-syntax-highlighter/dist/esm/styles/hljs';

const Component = () => {
  const codeString = '(num) => num + 1';
  return (
    <SyntaxHighlighter language="javascript" style={docco}>
      {codeString}
    </SyntaxHighlighter>
  );
};

It means, as long as we wrap our code elements with SyntaxHighlighter component, it might work.

It'll be like this.

return (
      <div>
        {
          render(story.content.long_text, {
            nodeResolvers: {
              [NODE_CODEBLOCK]: (children, story) => {
                  return (
                      <pre>
                        <code { ...story }>
                          <SyntaxHighlighter language={ story } style={ tomorrow }>
                            { children }
                          </SyntaxHighlighter>
                        </code>
                      </pre>
                  )
                }
              }
            }
          )
        }
      </div>
)

I recommend you to debug children and story with console.log() .

You'll see the values we want is returned.

Also, the syntax highlight theme is on🔥

In fact, NODE_CODEBLOCK returns an opject property name, class.

It means, we should be able to see that the class attribute value of "language-javascript" must be added into our code snippet HTML elements.

You mihgt face some situations with the value of undefined if you forget to choose a language when you edit your content in a main dashboard.

As long as we choose the language from our main dashboar in Storyblok, this won't happen👍

Hope you found something relevant info for your project!

[Storyblok, Gatsby] Programmatically create blog post pages from data

Arisa Fukuzaki — Thu, 20 May 2021 13:56:47 +0000

Hi there!

I'm Arisa, a DevRel from this June living in Germany🇩🇪 (A big announcement is coming this June😏)

I have a free online programming learning community called Lilac, with free hands-on Frontend e-books👩‍💻

Who is this article for?

Anyone wants to have a super blazing fast blog app with headless CMS integrated in it😎
Anyone wants to build headless CMS integrated blog with the easiest way
Anyone wants to try out Storyblok with Gatsby.js
Anyone trying Storyblok's Gatsby multilanguage blog tutorial

Storyblok: The Complete Guide to Build a Full-Blown Multilanguage Website with Gatsby.js

This is also relevant tutorial blog post from them👇

Storyblok: Add a headless CMS to Gatsby.js in 5 minutes

Step 1: Create a post content type in Storyblok

Create a folder from Storyblok.

This folder will be a parent of each blog post.

If you already have a component created for a blog post, you can set up like the screenshot above.

If not, you can choose "Add new" and choose "Post".

Check the component type we chose or created before we go further.

It's always good to see the component data architecture in order to fetch later.

The best part is that as long as we choose "Post" content type, Storyblok automatically generates the blueprint for blog posts😎

Step 2: Create blog entry page in Storyblok

Let's move on to create a single blog post page.

Go to "Blog" content type folder, the one we just created.

Click "Entry" to create a blog post entry.

You'll be redirected to a single blog post visual editor screen.

Fill out something to test output for later.

One more prep before we go figure out routing.

Install storyblok-rich-text-react-renderer to render the rich text content.

Storyblok uses this to render rich text content.

$ yarn add storyblok-rich-text-react-renderer

Step 3: Programmatically create pages from data

Gatsby.js dynamically generates routes for you.

To do that, we can choose from 3 options.

Define routes in src/pages
Using the File System Route API
Using gatsby-node.js 👈 Recommended

We'll use the 3rd option because it dynamically generates pages as we create new blog posts in Storyblok main dashboard.

With this option, editors and writers don't have to ask us to create every single blog post, right?

Option 2 is also possible but still, it creates pages under the pages directory, same as option 1.

Gatsby.js: Using gatsby-node.js

Everything I set up in here is based on Gatsby.js's documentation.

If you're lost, their tutorial bog post is the best place to be back on track👍

Gatsby.js: Programmatically create pages from data

By using createPage action from Gatsby, we can create our blog post pages dynamically.

I recommend everyone to take a look at Gatsby's Routing documentation and Storyblok's gatsby-source-storyblok GitHub repo README.

Gatsby.js: Routing

storyblok/gatsby-source-storyblok

Especially, we'll use "Filtering on content type fields" section from Storyblok's gatsby-source-storyblok GitHub repo README.

storyblok/gatsby-source-storyblok: "Filtering on content type fields"

It's just an example, but it might help to see my case.

gatsby-node.js

const path = require('path')

exports.createPages = ({ graphql, actions }) => {
  const { createPage } = actions

  return new Promise((resolve, reject) => {
    const blogPostTemplate = path.resolve('./src/templates/blog-entry.js')

      resolve(
        graphql(
          `{
            posts: allStoryblokEntry(filter: {field_component: {eq: "Post"}}) {// 👈 the name of your component name
              edges {
                node {
                  id
                  name
                  slug
                  field_component
                  full_slug
                  content
                }
              }
            }
          }`
        ).then(result => {
          if (result.errors) {
            console.log(result.errors)
            reject(result.errors)
          }

          const allPosts = result.data.posts.edges

          allPosts.forEach((entry) => {
            // 👇 the name of content type
            if(entry.slug !== "blog") {
              const page = {
                  path: `/${entry.node.full_slug}`,
                  component: blogPostTemplate,
                  context: {
                    story: entry.node
                  }
              }
              createPage(page)
            }
          })
        })
      )
    })
}

To focus on blog post page, I only included blog post page generation code.

Personally, instead of just copy and paste the above, take a look at whether you succeeded to fetch data or not in GraphiQL from Gatsby.

Just a quick note.

If you copy and paste the data path from gatsby-node.js source code from above, it only returns an empty array.

It's just that the architecture to write in JS CLI and GraphiQL is different.

Make sure to run yarn develop again.

Step 4: Create a blog entry template

By default, Gatsby already provides us pages/index.js in their starter.

This file is a template for non-blog post pages, like Home, About etc...

For the blog post page, we'll use this trick with a bit of arrangement.

Create templates/blog-entry.js file.

If you're smart, you already recognized that we already imported this file in gatsby-node.js file.

That's the trick we'll be using 😎

Write your code something like this.

import React from 'react'
import Layout from '../components/Layout'
import Seo from '../components/seo'
import useStoryblok from '../lib/storyblok'

export default function BlogEntry({ pageContext, location }) {
  let story = pageContext.story
  story = useStoryblok(story, location)

  return (
    <Layout>
      <Seo title={`Blog | ${ story.content.title }`} />
      <div>
        <div>
          <h1>{ story.content.title }</h1>
        </div>
        <img
          src={`https://${ story.content.image }`}
          alt={ story.content.image }
        />
      </div>
    </Layout>
  )
}

This time, we'll test out to see the blog post title and an image.

How did I know the path to fetch data?

It's all in a draft JSON from Storyblok ✨

Go to the header menu -> down arrow -> "draft JSON".

It'll open a new browser page with a draft JSON with all the data path you need.

Done!✨

You'll see your very first blog post with a title and an image👏

If you see a 404 page from Gatsby, take a closer look.

You'll find a new page we just created on the page lists.

Click that, and you'll see a result like above.

We managed to route, so the URL of our very first blog post is following from what we named!

As long as we were able to get data for this blog post title and image, we're good to go to fetch rich text data.

In this case, our blog main contents.

Step 5: Fetch rich text data

In order to do so, we need 1 thing to prepare.

Remember we installed storyblok-rich-text-renderer ?

Now is the time to use this gem 💎

Import storyblok-rich-text-renderer in your templates/blog-entry.js file.

Also, use render to render a rich text data.

import React from 'react'
import Layout from '../components/Layout'
import Seo from '../components/seo'
import useStoryblok from '../lib/storyblok'
// 👇 Import  `storyblok-rich-text-renderer` 
import { render } from 'storyblok-rich-text-react-renderer'

export default function BlogEntry({ pageContext, location }) {
  let story = pageContext.story
  story = useStoryblok(story, location)

  return (
    <Layout>
      <Seo title={`Blog | ${ story.content.title }`} />
      <div>
        <div>
          <p>{ story.content.category }</p>
          <h1>
            { story.content.title }
          </h1>
          <p>{ story.content.intro }</p>
        </div>
        <img
          src={`https://${ story.content.image }`}
          alt={ story.content.image }
        />
      </div>
      <div>
        {/* render a rich text data */}
        { render(story.content.long_text) }
      </div>
    </Layout>
  )
}

Done!

We see our rich text data is displaying!

(🗒 I added category tag and intro. You can add contents as you wish like this.)

Hope this blog post helps with what you were looking for!

[Gatsby, TailwindCSS] Integrate dark mode in 10 minutes

Arisa Fukuzaki — Fri, 14 May 2021 22:04:44 +0000

Hi there!

I'm Arisa, a DevRel from this June living in Germany🇩🇪 (A big announcement is coming this June😏)

I have a free online programming learning community called Lilac, with free hands-on Frontend e-books👩‍💻

Who is this article for?

Anyone wants to integrate dark mode🌘
Anyone wants to integrate multiple themes

Step 1: Install TailwindCSS

$ yarn add tailwindcss

If you want to generate tailwind.config.js file, run this👇

$ npx tailwindcss init

Step 2: Install `gatsby-plugin-postcss`

$ yarn add postcss gatsby-plugin-postcss

Make sure to add in gatsby-config.js file too.

plugins: [`gatsby-plugin-postcss`]

Gatsby.js: gatsby-plugin-postcss

Step 3: Create a `postcss.config.js` file

Create a postcss.config.js file in a root directory.

Add the configuration like below.

module.exports = () => ({
  plugins: [require("tailwindcss")],
})

TailwindCSS: Using PostCSS as your preprocessor

Step 4: Edit global styles, `src/components/layout.css`

Swap default styles to these 3 lines.

@tailwind base;
@tailwind components;
@tailwind utilities;

These are Tailwind directives to enable Tailwind styles.

Also, we can already add a dark theme and light theme at this point in the same file.

@tailwind base;
@tailwind components;
@tailwind utilities;

body.dark {
  --primary: #111827;
  --text-main: white;
}

body.light {
  --primary: white;
  --text-main: #111827;
}

We'll use those variables in tailwind.config.js file.

module.exports = {
  purge: [],
  darkMode: 'class',
  theme: {
      extend: {
        colors: {
          primary: 'var(--primary)',
          'text-main': 'var(--text-main)',
        }
      },
  },
  variants: {
      extend: {},
  },
  plugins: [],
}

If your variable name contains a hyphen like ablve, make sure to set it as a string when you call it in a config file.

Camel case doesn't work in here.

Step 5: Test dark mode first

At this point, we don't have anything like a button or checkbox to trigger the change of the theme styles.

But not so fast.

We need to make sure first whether TailwindCSS is integrated or not by applying some styles.

Go to TailwindCSS documentation.

Let's apply something dark gray from what we can choose from their documentation.

TailwindCSS: Background color

import * as React from "react"
import PropTypes from "prop-types"
import { useStaticQuery, graphql } from "gatsby"

import Header from "./header"
import "./layout.css"

const Layout = ({ children }) => {
  const data = useStaticQuery(graphql`
    query SiteTitleQuery {
      site {
        siteMetadata {
          title
        }
      }
    }
  `)

  return (
    <div className="bg-gray-900 text-white">
      <Header siteTitle={data.site.siteMetadata?.title || `Title`} />
      <div
        style={{
          margin: `0 auto`,
          maxWidth: 960,
          padding: `0 1.0875rem 1.45rem`,
        }}
      >
        <main>{children}</main>
        <footer
          style={{
            marginTop: `2rem`,
          }}
        >
          © {new Date().getFullYear()}, Built with
          {` `}
          <a href="https://www.gatsbyjs.com">Gatsby</a>
        </footer>
      </div>
    </div>
  )
}

Layout.propTypes = {
  children: PropTypes.node.isRequired,
}

export default Layout

We can check in the browser by running the development mode.

$ yarn develop

We can confirm that TailwindCSS is working fine in our project💃

Let's rock more 😎

Step 6: Create a dark mode theme

Add a config in tailwind.config.js

module.exports = {
  purge: [],
  darkMode: 'class',// 👈 he's your guest
  theme: {},
  variants: {
      extend: {},
  },
  plugins: [],
}

We're toggling a dark mode manually.

Here is what I followed from the documentation.

TailwindCSS: Toggling dark mode manually

Step 7: Update class attribute in `layout.js`

We created a dark theme and a light theme.

Also, we configured that we'll manually toggle dark mode.

At this point, we can already apply the variables we prepared.

Open your layout.js file.

You can only swap the class attribute values when we tested the dark theme to see TailwindCSS is enabled.

// same as previous code

 return (
    {/* 👇 use variables in here */}
    <div className="theme-dark bg-primary text-text-main">
      <Header siteTitle={data.site.siteMetadata?.title || `Title`} />
      <div
        style={{
          margin: `0 auto`,
          maxWidth: 960,
          padding: `0 1.0875rem 1.45rem`,
        }}
      >
        <main>{children}</main>
        <footer
          style={{
            marginTop: `2rem`,
          }}
        >
          © {new Date().getFullYear()}, Built with
          {` `}
          <a href="https://www.gatsbyjs.com">Gatsby</a>
        </footer>
      </div>
    </div>
  )
// same as previous code

Wondered where all these theme, bg- and text- came from?

Those are all from tailwind.config.js.

It's like a path to fetch data.

Step 8: Install `gatsby-plugin-dark-mode`

Gatsby made our life so much easier.

Simply, just install this plugin first.

$ yarn add gatsby-plugin-dark-mode

Of course, include it in gatsby-config.js file as any other plugins.

plugins: [`gatsby-plugin-dark-mode`]

Step 9: Create a `src/components/themeToggle.js` file

Create a themeToggle.js in under the directory of src/components.

Actually, all we need to do in here is just use the example from Gatsby's documentation.

Gatsby.js: gatsby-plugin-dark-mode

import React from 'react'
import { ThemeToggler } from 'gatsby-plugin-dark-mode'

export default function ThemeToggle() {
  return(
    <ThemeToggler>
      {({ theme, toggleTheme }) => {
        if (theme == null) return null
        return(
          <label>
            <input
              type="checkbox"
              onChange={e => toggleTheme(e.target.checked ? 'dark' : 'light')}
              checked={theme === 'dark'}
            />{' '}
            <span></span>
          </label>
        )}
      }
    </ThemeToggler>
  )
}

💡 A note: gatsby-plugin-dark-mode had an issue that can't switch from dark mode to light mode in the first load of the page until clicking 3 times. Above is from the latest commit from this plugin but not yet in a latest release.

Theme toggle requires 2-3 clicks before changing theme #13

Then we'll import themeToggle component into the page or component we want to enable.

This time, I want to have in my header navigation menu.

Let's import in a header component.

import * as React from "react"
import PropTypes from "prop-types"
import { Link } from "gatsby"
import ThemeToggle from '../components/themeToggle'// 👈

const Header = ({ siteTitle }) => (
  <header
    style={{
      marginBottom: `1.45rem`,
    }}
  >
    <div
      style={{
        margin: `0 auto`,
        maxWidth: 960,
        padding: `1.45rem 1.0875rem`,
      }}
      className="flex justify-between"
    >
      <h1 style={{ margin: 0 }}>
        <Link
          className="text-2xl font-black"
          to="/"
        >
          {siteTitle}
        </Link>
      </h1>
      <ul className="grid grid-cols-2 gap-4">
　　　　　{/* 👇 */}
        <li>
          <ThemeToggle />
        </li>
        <li>
          <Link to="/" className="text-base font-semibold text-gray-400">
            Blog
          </Link>
        </li>
        <li>
          <Link to="/" className="text-base font-semibold text-gray-400">
            Talk
          </Link>
        </li>
      </ul>
    </div>
  </header>
)

Header.propTypes = {
  siteTitle: PropTypes.string,
}

Header.defaultProps = {
  siteTitle: ``,
}

export default Header

It works like a magic🧙‍♂️

dark mode disabled

dark mode checked

Hope you found something useful from this blog post!

These sources were helpful too🙌

Create a dark mode theme switch with Gatsby and TailwindCSS

Create a CSS Theme Switcher Using Gatsby and TailwindCSS

[Storyblok, Gatsby] ERROR #98124 WEBPACK Generating SSR bundle failed Can't resolve 'prop-types'

Arisa Fukuzaki — Thu, 13 May 2021 17:26:20 +0000

Hi there!

I'm Arisa, a DevRel from this June living in Germany🇩🇪 (Big announcement is coming this June, stay tuned😎)

I have a free online programming learning community called Lilac, with free hands-on Frontend e-books👩‍💻

Who is this article for?

Anyone got the error - "ERROR #98124 WEBPACK Generating SSR bundle failed Can't resolve 'prop-types'"
Anyone uses Gatsby.js project with npm
Anyone who enjoys Storyblok: "Add a headless CMS to Gatsby.js in 5 minutes" hands-on tutorial blog post

Storyblok: "Add a headless CMS to Gatsby.js in 5 minutes" hands-on tutorial blog post

What was the error?

Well, actually, it looks very similar to my previous blog post.

[Gatsby, Storyblok] "Can't resolve 'fs' in x"

No no no, it's not😅

This time is "prop-types" instead of fs.

 ERROR #98124  WEBPACK

Generating development SSR bundle failed

Can't resolve 'prop-types' in '/Users/.../gatsby-storyblok-project/node_modules/gatsby-react-router-scroll'

If you're trying to use a package make sure that 'prop-types' is installed. If you're trying to use a
 local file make sure that the path is correct.

My environment is here👇

npm: 6.14.11
Node.js: 14.16.0

  "dependencies": {
    "gatsby": "^3.4.1",
    "gatsby-plugin-gatsby-cloud": "^2.4.1",
    "gatsby-plugin-image": "^1.4.0",
    "gatsby-plugin-manifest": "^3.4.0",
    "gatsby-plugin-offline": "^4.4.0",
    "gatsby-plugin-react-helmet": "^4.4.0",
    "gatsby-plugin-sharp": "^3.4.1",
    "gatsby-source-filesystem": "^3.4.0",
    "gatsby-source-storyblok": "^3.0.1",
    "gatsby-transformer-sharp": "^3.4.0",
    "prop-types": "^15.7.2",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-helmet": "^6.1.0",
    "storyblok-js-client": "^4.0.9",
    "storyblok-react": "^0.1.2"
  },
  "devDependencies": {
    "prettier": "2.2.1"
  },

How this error occurred?

Installed by npm was the gotcha in this case.

I didn't realize that until I saw the solutions below.

A solution

It was dead simple.

Install with yarn instead of npm as Gatsby suggested in these sources.

It works totally fine as you find in Gatsby GitHub issue below👍

ERROR #98124 WEBPACK Generating SSR bundle failed Can't resolve 'prop-types' in 'C:\Users\MYNAME\node_modules\react-typography\dist'

Error: Cannot find module 'react' - after installing Plugin

Hope you found some relevant info from what you're looking for!

[Gatsby, Storyblok] "Can't resolve 'fs' in x"

Arisa Fukuzaki — Thu, 22 Apr 2021 22:04:29 +0000

Hi there!

I'm Arisa, a freelance Full Stack Developer living in Germany🇩🇪

I'm developing Lilac, an online school with hands-on Frontend e-books and tutoring👩‍💻

Who is this article for?

Anyone who got the error says "Can't resolve 'fs' in x" from your Gatsby projects
Anyone who is trying out to arrange things from Storyblok's Gatsby multilingual blog hands-on tutorial

What was the error?

Here's the bossy one you'll need to deal with👇

Oh, sorry.

Not this.

This one :)

 ERROR #98124  WEBPACK

Generating development JavaScript bundle failed

Can't resolve 'fs' in
'/Users/.../node_modules/dotenv/lib'

If you're trying to use a package make sure that 'fs' is installed. If you're trying to use a local
 file make sure that the path is correct.

File: node_modules/dotenv/lib/main.js

And here's my environment👇

  "dependencies": {
    "@emotion/core": "^11.0.0",
    "@emotion/react": "^11.1.1",
    "@emotion/styled": "^11.0.0",
    "gatsby": "^2.32.3",
    "gatsby-image": "^2.11.0",
    "gatsby-plugin-google-analytics": "^2.0.13",
    "gatsby-plugin-layout": "^1.0.11",
    "gatsby-plugin-manifest": "^2.2.23",
    "gatsby-plugin-offline": "^3.0.16",
    "gatsby-plugin-react-helmet": "^3.1.13",
    "gatsby-plugin-root-import": "^2.0.6",
    "gatsby-plugin-sharp": "^2.14.1",
    "gatsby-source-filesystem": "^2.11.0",
    "gatsby-source-shopify": "^3.10.0",
    "gatsby-source-storyblok": "^2.0.0",
    "gatsby-transformer-sharp": "^2.12.0",
    "isomorphic-fetch": "^3.0.0",
    "js-yaml": "^3.13.1",
    "lodash": "^4.17.19",
    "prop-types": "^15.7.2",
    "querystringify": "^2.0.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-helmet": "^6.1.0",
    "set-value": "^3.0.2",
    "shopify-buy": "^2.11.0",
    "storyblok-react": "^0.1.2"
  },
  "devDependencies": {
    "prettier": "^2.2.1"
  },

If I say my wish, I'm hoping that soon Gatsby team will update this starter to v3🙏

How this error occurred?

Well, I was at the section of "Add the Storyblok Bridge and Cache Version" in Storyblok's hands-on tutorial.

https://www.storyblok.com/tp/gatsby-multilanguage-website-tutorial#add-the-storyblok-bridge-and-cache-version

I built a blog once as this tutorial blog post describes.

And this time is to play around to build Gatsby x Shopify e-commerce.

I was in the layouts/index.js file.

And adding Helmet components as Storyblok described linking Storyblok visual editor with my gatsby-shopify-starter.

Then this error popped up.

Here's what I added.

import React from 'react'
import PropTypes from 'prop-types'
import { StaticQuery, graphql } from 'gatsby'
import styled from '@emotion/styled'

import ContextProvider from '~/provider/ContextProvider'

import { GlobalStyle } from '~/utils/styles'
import Navigation from '~/components/Navigation'

import { Helmet } from 'react-helmet'
import StoryblokService from '../utils/storyblok-service'

const Wrapper = styled.div`
  margin: 0 auto;
  max-width: 960px;
  padding: 0px 1.0875rem 1.45rem;
`

const Layout = ({ children }) => {
  return (
    <ContextProvider>
      {/* 👇 added Helmet components */}
      <Helmet
        script={[
          {"src": `//app.storyblok.com/f/storyblok-latest.js?t=${StoryblokService.token}`,
          "type": "text/javascript"}
        ]}
      />
      <Helmet
          script={[
            {
            "innerHTML": `var StoryblokCacheVersion = '${StoryblokService.getCacheVersion()}';`,
            "type": "text/javascript"
            }
          ]}
      />
      <GlobalStyle />
      <StaticQuery
        query={graphql`
          query SiteTitleQuery {
            site {
              siteMetadata {
                title
              }
            }
          }
        `}
        render={data => (
          <>
            <Navigation siteTitle={data.site.siteMetadata.title} />
            <Wrapper>
              {children}
              <footer>
                © {new Date().getFullYear()}, Built with
                {` `}
                <a href="https://www.gatsbyjs.org">Gatsby</a>
              </footer>
            </Wrapper>
          </>
        )}
      />
    </ContextProvider>
  )
}

Layout.propTypes = {
  children: PropTypes.node.isRequired,
}

export default Layout

Basically, if we're attempting to use fs inside a React component, then it shows.

When you face to this error, it's most likely the problem is in a top level Cannot resolve module 'fs', or just part of a webpack error.

A solution

It wasn't that complicated, so chill, my friends☕️

You'll see the cases from Angler to React etc.

But luckily, Gatsby already prepared a solution even in their documentation.

Issues with 'fs' resolution: Gatsby

All you need to do is just follow what it's written.

Simply, add this code into gatsby-node.js

exports.onCreateWebpackConfig = ({ actions }) => {
  actions.setWebpackConfig({
    node: {
      fs: "empty",
    },
  })
}

After that, you're all good to go👍

Hope you found some relevant info from what you're looking for!

[Storyblok & Gatsby]A Solution to "ERROR #98124 WEBPACK. Generating development SSR bundle failed"

Arisa Fukuzaki — Mon, 19 Apr 2021 23:38:49 +0000

Hi there!

I'm Arisa, a freelance Full Stack Developer living in Germany🇩🇪

I'm developing Lilac, an online school with hands-on Frontend e-books and tutoring👩‍💻

Who is this article for?

Anyone got stuck when you were trying Storyblok with Gatsby
Anyone who got the same error in the blog post title
Anyone who follows the tutorial from Storyblok to use Gatsby

What was the error?

Here is the actual error log I got.

 ERROR #98124  WEBPACK

Generating development SSR bundle failed

Can't resolve 'prop-types' in '/Users/.../gatsbyjs-multilanguage-website/.cache'

If you're trying to use a package make sure that 'prop-types' is installed. If you're trying to use a local
file make sure that the path is correct.

File: .cache/gatsby-browser-entry.js:2:0

It was actually dead simple, so no worries!

And here's my environment👇

{
  "dependencies": {
    "gatsby": "^3.2.1",
    "gatsby-plugin-gatsby-cloud": "^2.2.0",
    "gatsby-plugin-image": "^1.2.1",
    "gatsby-plugin-manifest": "^3.2.0",
    "gatsby-plugin-offline": "^4.2.0",
    "gatsby-plugin-react-helmet": "^4.2.0",
    "gatsby-plugin-sharp": "^3.2.1",
    "gatsby-source-filesystem": "^3.2.0",
    "gatsby-source-storyblok": "^2.0.0",
    "gatsby-transformer-sharp": "^3.2.0",
    "prop-types": "^15.7.2",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-helmet": "^6.1.0",
    "storyblok-react": "^0.1.2"
  },
  "devDependencies": {
    "prettier": "2.2.1"
  }
}

Simply, I just got this error in the step of "Connect Storyblok" in Storyblok's official documentation to build Gatsby multilingual blog demo.

A solution

As I said, it was dead simple.

Just follow what the error says, install prop-types.

$ npm i prop-types --save

https://www.npmjs.com/package/prop-types

Well, of course, you need to configure right to link Storyblok with your Gatsby project by writing this config into your gatsby-config.js

module.exports = {
  siteMetadata: {
    title: 'Gatsby Default Starter',
  },
  plugins: [
    {
      resolve: 'gatsby-source-storyblok',
      options: {
        accessToken: 'YOUR_PREVIEW_TOKEN',
        homeSlug: 'home',
        version: process.env.NODE_ENV === 'production' ? 'published' : 'draft'
      }
    },
    ...
  ]
}

Run $ gatsby develop

It won't fail👍

Hope this blog post was something you were looking for!

DEV Community: Arisa Fukuzaki

Storyblok Gatsby SDK is free from axios✨

Storyblok Gatsby SDK – now with TypeScript support 🎉

Announcing gatsby-source-storyblok V4

Usage

Initialization

Query Storyblok API and listen for Visual Editor changes

Link your components to Storyblok Visual Editor

Example

Next Steps

Resource

Announcing @storyblok/react

Usage

Initialization

Query Storyblok API and listen for Visual Editor changes

Link your components to Storyblok Visual Editor

Next.js example

Next Steps

Resource

[Gatsby] Solutions to "The result of this StaticQuery could not be fetched."

Who is this article for?

Why did this error appear?

My environment

Step 1: Delete useStaticQuery from Layout.js

Step 2: Use StaticQuery in Header.js

[Storyblok, Gatsby] Create a blog overview page

Who is this article for?

Step 1: Create a root entry in a folder

Step 2: Create a pages/blog.js page

Step 3: Create Posts List in Blog Overview component.

Step 4: Resolving relations on multi-options field type

Step 5: Create a PostsList component

Trouble shooting

[Storyblok, Gatsby] Integrate syntax highlight in Storyblok rich text

Who is this article for?

Step 1: Fetch node resolvers, NODE_CODEBLOCK with storyblok-rich-text-react-renderer

Step 2: Map node resolvers to custom React components

Step 3: Apply React Syntax Highlighter

[Storyblok, Gatsby] Programmatically create blog post pages from data

Who is this article for?

Step 1: Create a post content type in Storyblok

Step 2: Create blog entry page in Storyblok

Step 3: Programmatically create pages from data

Step 4: Create a blog entry template

Step 5: Fetch rich text data

[Gatsby, TailwindCSS] Integrate dark mode in 10 minutes

Who is this article for?

Step 1: Install TailwindCSS

Step 2: Install gatsby-plugin-postcss

Step 3: Create a postcss.config.js file

Step 4: Edit global styles, src/components/layout.css

Step 5: Test dark mode first

Step 6: Create a dark mode theme

Step 7: Update class attribute in layout.js

Step 8: Install gatsby-plugin-dark-mode

Step 9: Create a src/components/themeToggle.js file

[Storyblok, Gatsby] ERROR #98124 WEBPACK Generating SSR bundle failed Can't resolve 'prop-types'

Who is this article for?

What was the error?

How this error occurred?

A solution

[Gatsby, Storyblok] "Can't resolve 'fs' in x"

Who is this article for?

What was the error?

How this error occurred?

A solution

[Storyblok & Gatsby]A Solution to "ERROR #98124 WEBPACK. Generating development SSR bundle failed"

Who is this article for?

What was the error?

A solution

Sources:

Step 1: Delete `useStaticQuery` from Layout.js

Step 2: Use `StaticQuery` in Header.js

Step 2: Create a `pages/blog.js` page

Step 1: Fetch node resolvers, `NODE_CODEBLOCK` with `storyblok-rich-text-react-renderer`

Step 2: Install `gatsby-plugin-postcss`

Step 3: Create a `postcss.config.js` file

Step 4: Edit global styles, `src/components/layout.css`

Step 7: Update class attribute in `layout.js`

Step 8: Install `gatsby-plugin-dark-mode`

Step 9: Create a `src/components/themeToggle.js` file