fix: refactor the async composable to use native fetch and useState only

storyblok · May 3, 2023 · 0174f59 · 0174f59
1 parent f631382
commit 0174f59
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 16 deletions.
diff --git a/lib/src/runtime/composables/useAsyncStoryblok.ts b/lib/src/runtime/composables/useAsyncStoryblok.ts
@@ -1,14 +1,14 @@
 import { useStoryblokApi, useStoryblokBridge } from "@storyblok/vue";
-import type { ISbStoriesParams, StoryblokBridgeConfigV2, ISbStoryData, ISbError, ISbResult } from '@storyblok/vue';
-import { useAsyncData, useState, onMounted, createError } from "#imports";
+import type { ISbStoriesParams, StoryblokBridgeConfigV2, ISbStoryData } from '@storyblok/vue';
+import { useState, onMounted } from "#imports";
 
 export const useAsyncStoryblok = async (
   url: string,
   apiOptions: ISbStoriesParams = {},
   bridgeOptions: StoryblokBridgeConfigV2 = {}
 ) => {
   const uniqueKey = `${JSON.stringify(apiOptions)}${url}`;
-  const story = useState<ISbStoryData>(`${uniqueKey}-state`, () => ({} as ISbStoryData));
+  const story = useState<ISbStoryData>(`${uniqueKey}-state`);
   const storyblokApiInstance = useStoryblokApi();
 
   onMounted(() => {
@@ -21,16 +21,13 @@ export const useAsyncStoryblok = async (
     }
   });
 
-  const { data, error } = await useAsyncData<ISbResult, ISbError>(
-    `${uniqueKey}-asyncdata`,
-    () => storyblokApiInstance.get(`cdn/stories/${url}`, apiOptions),
-  );
-
-  if (error.value?.response && error.value?.response.status >= 400 && error.value?.response.status < 600) {
-    throw createError({ statusCode: error.value?.response.status, statusMessage: error.value?.message?.message || 'Something went wrong when fetching from storyblok.' });
-  }
-
-  story.value = data.value?.data.story;
+  if (!story.value) {
+    const { data } = await storyblokApiInstance.get(
+      `cdn/stories/${url}`,
+      apiOptions
+    );
+    story.value = data.story;
+  };
 
   return story;
 };
diff --git a/package-lock.json b/package-lock.json
diff --git a/playground/pages/[...slug].vue b/playground/pages/[...slug].vue
@@ -9,7 +9,7 @@ try {
     resolve_relations: ["popular-articles.articles"]
   });
 } catch (error) {
-  console.log(error);
+  story.value = error;
 }
 </script>
 

diff --git a/playground/pages/error.vue b/playground/pages/error.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts">
+const story = await useStoryblok("vue-test", { version: "draft" });
+</script>
+
+<template>
+  <StoryblokComponent v-if="story" :blok="story.content" />
+</template>
diff --git a/playground/pages/index.vue b/playground/pages/index.vue
@@ -9,6 +9,7 @@ const richText = computed(() => renderRichText(story.value.content.richText));
 
 <template>
   <div>
+    <NuxtLink to="vue">Vue</NuxtLink>
     <div v-html="richText"></div>
     <StoryblokComponent v-if="story" :blok="story.content" />
   </div>