From 14464b566e0cce7a78f9664a7cd4366564bb69f9 Mon Sep 17 00:00:00 2001
From: Lucas Viana <lv201122@gmail.com>
Date: Sun, 27 Oct 2024 23:14:47 -0300
Subject: [PATCH] Introduce the `useAsyncData()` sample code (with API
 endpoint)

---
 pages/experiments/data-fetching/nuxt/index.vue      | 13 +++++++++++--
 server/api/data-fetching/nuxt/use-lazy-fetch.get.ts |  3 ++-
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/pages/experiments/data-fetching/nuxt/index.vue b/pages/experiments/data-fetching/nuxt/index.vue
index 293346a..a5c5369 100644
--- a/pages/experiments/data-fetching/nuxt/index.vue
+++ b/pages/experiments/data-fetching/nuxt/index.vue
@@ -29,7 +29,10 @@
         <p><code>useFetch()</code> = <code>{{ useLazyFetchResponse.data.value?.value ?? 0 }}</code></p>
       </WlExperimentCanvas>
       <h2 class="mt-3 text-lg"><code>useAsyncData()</code></h2>
-      <code>WIP</code>
+      <p>Allows loading data asynchronously and passing it from the server to the client:</p>
+      <WlExperimentCanvas>
+        <p><code>useAsyncData()</code> = <code>{{ useAsyncDataResponse.data.value }}</code></p>
+      </WlExperimentCanvas>
       <h2 class="mt-3 text-lg">Server-sent Events</h2>
       <p>Streaming data from the server using <code>EventSource</code> in the API routes:</p>
       <WlExperimentCanvas>
@@ -50,7 +53,7 @@
 <script lang="ts" setup>
 import { reactive } from 'vue'
 
-import { useFetch, useLazyFetch } from '#app'
+import { useAsyncData, useFetch, useLazyFetch } from '#app'
 import WlButton from '~/components/experiments/forms-input/buttons/WlButton.vue'
 import WlExperimentCanvas from '~/components/shared/experiments/WlExperimentCanvas.vue'
 import WlContainer from '~/components/shared/layout/WlContainer.vue'
@@ -62,6 +65,12 @@ const useFetchResponse = await useFetch('/api/data-fetching/nuxt/use-fetch')
 // Works when `await` is used, and it's a client-side navigation.
 const useLazyFetchResponse = await useLazyFetch('/api/data-fetching/nuxt/use-lazy-fetch')
 
+// Add timeout to simulate.
+const useAsyncDataResponse = await useAsyncData(
+    'use-async-data',
+    () => new Promise(resolve => setInterval(() => resolve(3), 0))
+)
+
 const data = reactive({
   sse: [] as string[]
 })
diff --git a/server/api/data-fetching/nuxt/use-lazy-fetch.get.ts b/server/api/data-fetching/nuxt/use-lazy-fetch.get.ts
index 914eee2..0c8361d 100644
--- a/server/api/data-fetching/nuxt/use-lazy-fetch.get.ts
+++ b/server/api/data-fetching/nuxt/use-lazy-fetch.get.ts
@@ -3,7 +3,8 @@ import { defineEventHandler } from 'h3'
 export default defineEventHandler(async () => {
   console.log(`[${new Date().toISOString()}] API - useLazyFetch`)
 
-  await new Promise(resolve => setTimeout(resolve, 2000))
+  // Add timeout to simulate.
+  await new Promise(resolve => setTimeout(resolve, 0))
 
   return {
     value: 2