Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

useAsyncStoryblok not fetching content in storyblok visual editor #841

Open
1 task done
Kiewiet1024 opened this issue May 29, 2024 · 0 comments
Open
1 task done
Labels
pending-author [Issue] Awaiting further information or action from the issue author pending-triage [Issue] Ticket is pending to be prioritised

Comments

@Kiewiet1024
Copy link

Describe the issue you're facing

It would appear that there is a race condition in src/runtime/composables/useAsyncStoryblok.ts when using the visual editor in storyblok that leads to no data being received in time and throwing an error: Cannot read properties of undefined (reading 'id') since story is returning null in the following snippet:

onMounted(() => {
    if (story.value && story.value.id) {
      useStoryblokBridge(
        story.value.id,
        evStory => (story.value = evStory),
        bridgeOptions,
      );
    }
  });

  if (!story.value) {
    const { data } = await useAsyncData(uniqueKey, () => {
      return storyblokApiInstance.get(
        `cdn/stories/${url}`,
        apiOptions
      );
    })
    if(data) {
      story.value = data.value?.data.story
    }
  }
  return story

Reverting the above snippet to the one below resolves this

onMounted(() => {
    if (story.value && story.value.id) {
      useStoryblokBridge(
        story.value.id,
        evStory => (story.value = evStory),
        bridgeOptions,
      );
    }
  });

if (!story.value) {
    const { data } = await storyblokApiInstance.get(
      `cdn/stories/${url}`,
      apiOptions
    );
    story.value = data.story;
  };

return story;

Not sure if there are other changes regarding this that is needed to make it work.

Reproduction

https://storyblok.com

Steps to reproduce

Using the visual editor in storyblok will result in the error being thrown. Please note that it has to be used with the serving of the build files and not using npm run dev or yarn dev.
Unfortunately I am not able to share the repository

System Info

System:
    OS: macOS 13.5
    CPU: (10) arm64 Apple M1 Pro
    Memory: 43.13 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.11.0 - ~/.nvm/versions/node/v20.11.0/bin/node
    Yarn: 1.22.19 - ~/dev/homebrew/bin/yarn
    npm: 10.5.1 - ~/.nvm/versions/node/v20.11.0/bin/npm
  Browsers:
    Chrome: 125.0.6422.112
    Safari: 16.6

Used Package Manager

yarn

Error logs (Optional)

No response

Validations

@Kiewiet1024 Kiewiet1024 added pending-author [Issue] Awaiting further information or action from the issue author pending-triage [Issue] Ticket is pending to be prioritised labels May 29, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
pending-author [Issue] Awaiting further information or action from the issue author pending-triage [Issue] Ticket is pending to be prioritised
Projects
None yet
Development

No branches or pull requests

1 participant