[storyblok/react] storyblokInit behaves like a singleton and breaks draft mode when initialized with wrong token

[kelkes]

Hey folks,

I’ve been debugging a really odd issue with draft mode in my Next.js + Storyblok setup. Everything works fine at first, but after some time I start getting 401 errors from Storyblok. After digging through the source code, I discovered that storyblokInit in the React package actually returns a singleton instance of the API client.

That means if the API was initialized earlier (for example in metadata generation or anywhere outside of the preview route) with the public token, it keeps that reference and later ignores the preview token. This completely breaks draft mode in Next.js when following the official examples.

Interestingly, this behavior only exists in the React package. The plain storyblok-js-client does not use a singleton, so the issue doesn’t occur there.

This behavior is very unexpected and should probably be mentioned clearly in the documentation, since it can lead to confusing 401 errors and wrong content versions being fetched.

Is there a valid reason for this singleton behavior?
And if so, is the correct approach to avoid using getStoryblokApi or storyblokInit in static generation contexts (metadata, sitemap, etc.) and instead rely on plain fetch for those?

Would love to understand the reasoning behind this design choice and what the recommended pattern is for projects that rely on both static generation and preview mode.

Thanks!

[kelkes]

Any kind of response would be nice :)

Can't be the only one having this issue, right?