useStoryblok not working with Astro Server Islands

[dylanalizon]

---

Expected Behavior

Trying to make an API request from a server islands result in an error storyblokApiInstance has not been initialized correctly.

Current Behavior

The server islands was not rendered an error was throw.

Steps to Reproduce

1. Create a project with Astro and Storyblok plugin.
2. Enable the experimental feature "Server islands".
3. Try to use useStoryblok function inside a component which is a "Server Island" (use server:defer on the component)
4. Deploy with "hybrid" mode.

[JakiChen]

hello, @dylanalizon

You may want to delay initialization,

Instead of putting const storyblokApi = useStoryblokApi() in the outermost definition, each custom function is called (but called when used)

// utils/storyblok.ts
import { useStoryblokApi } from '@storyblok/astro';
import type { ISbStory, ISbStories, ISbStoryParams, ISbStoriesParams, ISbCustomFetch, ISbResult } from 'storyblok-js-client';

const version = import.meta.env.DEV ? 'draft' : 'published';

export async function get(slug: string, params?: ISbStoriesParams, fetchOptions?: ISbCustomFetch): Promise<ISbResult> {
    const storyblokApi = useStoryblokApi(); // Delayed initialization
    const data = await storyblokApi.get(slug, {
        version: version,
        ...params
    }, fetchOptions);
    return data;
}

export async function getAll(slug: string, params: ISbStoriesParams, entity?: string, fetchOptions?: ISbCustomFetch): Promise<any[]> {
    const storyblokApi = useStoryblokApi(); // Delayed initialization
    const data = await storyblokApi.getAll(slug, {
        version: version,
        ...params,
    }, entity, fetchOptions);
    return data;
}

export async function getStory(slug: string, params: ISbStoryParams, fetchOptions?: ISbCustomFetch): Promise<ISbStory> {
    const storyblokApi = useStoryblokApi(); // Delayed initialization
    const data = await storyblokApi.getStory(slug, {
        version: version,
        ...params,
    }, fetchOptions);

    return data;
}

export async function getStories(params: ISbStoriesParams, fetchOptions?: ISbCustomFetch): Promise<ISbStories> {
    const storyblokApi = useStoryblokApi(); // Delayed initialization
    const data = await storyblokApi.getStories({
        version: version,
        ...params
    }, fetchOptions);
    return data;
}

[manuelschroederdev]

Hey @dylanalizon, thank you very much for opening this discussion. Thank you, @JakiChen, for looking into this.

useStoryblok will be deprecated in favor of getLiveStory, as is described here: https://github.com/storyblok/storyblok-astro/tree/alpha?tab=readme-ov-file#enabling-live-preview-for-storybloks-visual-editor

@dipankarmaikap and I are currently working on a new major version of @storyblok/astro to introduce stable support for the (currently still experimental) live preview feature.

Thank you very much for your patience and understanding. 🙂