Merge pull request #814 from storyblok/bugfix/769-storyblok-making-re…

…quests-clientside-on-full-static-site

fix: 769 storyblok making requests clientside on full static site

playground/error.vue

@@ -1,3 +1,12 @@
+<script setup>
+defineProps <
+  {
+    error: { statusCode: number, statusMessage: string }
+  } >
+  {};
+
+const handleError = () => clearError({ redirect: "/" });
+</script>
 <template>
   <div class="grid place-items-center h-screen text-center">
     <div class="flex flex-col gap-y-4">
@@ -12,11 +21,3 @@
     </div>
   </div>
 </template>
-
-<script setup>
-defineProps({
-  error: Object
-});
-
-const handleError = () => clearError({ redirect: "/" });
-</script>

playground/package.json

@@ -4,6 +4,7 @@
   "scripts": {
     "build": "nuxt build",
     "dev": "nuxt dev",
+    "dev:https": "NODE_TLS_REJECT_UNAUTHORIZED=0 nuxt dev --https",
     "demo-ssl": "NODE_TLS_REJECT_UNAUTHORIZED=0 nuxt dev --https",
     "generate": "nuxt generate",
     "preview": "nuxt preview",

playground/pages/articles/[slug].vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+const path = useRoute();
+const story = await useAsyncStoryblok(`vue/articles/${path.params.slug}`, {
+  version: "draft",
+  language: "en"
+});
+</script>
+
+<template>
+  <main v-editable class="container mx-auto pt-24">
+    <h2>{{ story.content.title }}</h2>
+  </main>
+</template>

playground/pages/articles/index.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+const storyblokApi = useStoryblokApi();
+
+const { data: articles } = await storyblokApi.get("cdn/stories/", {
+  version: "draft",
+  starts_with: "vue/articles",
+  is_startpage: false
+});
+/* const storyblokApi = useStoryblokApi()
+
+const { data: articles } = await storyblokApi.get('cdn/stories/vue', {
+  version: 'draft',
+  starts_with: 'articles',
+  is_startpage: false,
+})
+
+console.count('Articles Fetch') */
+</script>
+
+<template>
+  <div class="container mx-auto">
+    <h1>Articles</h1>
+    <p>Here are some articles</p>
+    <div class="pt-24">
+      <NuxtLink
+        v-for="article in articles.stories"
+        :key="article.uuid"
+        :to="`/articles/${article.slug}`"
+      >
+        <h2>{{ article.name }}</h2>
+      </NuxtLink>
+    </div>
+  </div>
+</template>

playground/pages/index.vue

@@ -9,13 +9,11 @@ const story = await useAsyncStoryblok("vue", {
   resolve_relations: "popular-articles.articles"
 });
 
-const richText = computed(() => renderRichText(story.value.content.richText));
+/* const richText = computed(() => renderRichText(story.value.content.richText)); */
 </script>
 
 <template>
   <div>
-    <NuxtLink to="vue"> Vue </NuxtLink>
-    <div v-html="richText" />
     <StoryblokComponent v-if="story" :blok="story.content" />
   </div>
 </template>

src/runtime/composables/useAsyncStoryblok.ts

@@ -7,9 +7,9 @@ export const useAsyncStoryblok = async (
   apiOptions: ISbStoriesParams = {},
   bridgeOptions: StoryblokBridgeConfigV2 = {}
 ) => {
+  const storyblokApiInstance = useStoryblokApi();
   const uniqueKey = `${JSON.stringify(apiOptions)}${url}`;
   const story = useState<ISbStoryData>(`${uniqueKey}-state`);
-  const storyblokApiInstance = useStoryblokApi();
 
   onMounted(() => {
     if (story.value && story.value.id) {
@@ -22,12 +22,15 @@ export const useAsyncStoryblok = async (
   });
 
   if (!story.value) {
-    const { data } = await storyblokApiInstance.get(
-      `cdn/stories/${url}`,
-      apiOptions
-    );
-    story.value = data.story;
-  };
-
-  return story;
+    const { data } = await useAsyncData('story', () => {
+      return storyblokApiInstance.get(
+        `cdn/stories/${url}`,
+        apiOptions
+      );
+    })
+    if(data) {
+      story.value = data.value?.data.story
+    }
+  }
+  return story
 };