From 8ddc9b42e1037c751c544b2f55cfccb68c50f9f3 Mon Sep 17 00:00:00 2001
From: Eduardo San Martin Morote <posva13@gmail.com>
Date: Sun, 15 Mar 2020 20:05:20 +0100
Subject: [PATCH] docs: data fetching with suspense

---
 playground/App.vue                     |  9 +++++++-
 playground/api/index.ts                | 11 ++++++++++
 playground/views/ComponentWithData.vue | 30 ++++++++++++++++----------
 3 files changed, 38 insertions(+), 12 deletions(-)
 create mode 100644 playground/api/index.ts

diff --git a/playground/App.vue b/playground/App.vue
index d3c51661..2c63a485 100644
--- a/playground/App.vue
+++ b/playground/App.vue
@@ -114,7 +114,14 @@
       @before-enter="flushWaiter"
       @before-leave="setupWaiter"
     > -->
-    <router-view></router-view>
+    <Suspense>
+      <template #default>
+        <router-view></router-view>
+      </template>
+      <template #fallback>
+        Loading...
+      </template>
+    </Suspense>
     <!-- </transition> -->
   </div>
 </template>
diff --git a/playground/api/index.ts b/playground/api/index.ts
new file mode 100644
index 00000000..628521c9
--- /dev/null
+++ b/playground/api/index.ts
@@ -0,0 +1,11 @@
+export let delay = (t: number = 100) =>
+  new Promise(resolve => setTimeout(resolve, t))
+
+export async function getData() {
+  await delay(500)
+
+  return {
+    message: 'Hello',
+    time: Date.now(),
+  }
+}
diff --git a/playground/views/ComponentWithData.vue b/playground/views/ComponentWithData.vue
index 0d32d830..857018b0 100644
--- a/playground/views/ComponentWithData.vue
+++ b/playground/views/ComponentWithData.vue
@@ -1,23 +1,31 @@
 <template>
   <div>
-    <p>Here is the data: {{ data }}</p>
+    <p>Here is the data: {{ fromApi }}</p>
+    other {{ other }}
   </div>
 </template>
 
 <script>
-import { defineComponent } from 'vue'
+import { defineComponent, toRefs, reactive, inject } from 'vue'
+import { getData, delay } from '../api'
 
 export default defineComponent({
   name: 'ComponentWithData',
-  data: () => ({ data: 'nope' }),
-  beforeRouteEnter(to, from, next) {
-    // console.log('this in beforeRouteEnter', this)
-    // setTimeout(() => {
-    // next(vm => {
-    //   // console.log('got vm', vm)
-    //   vm.data = 'Hola'
-    // })
-    // }, 300)
+  async setup() {
+    const data = reactive({ other: null })
+    data.fromApi = await getData()
+
+    return {
+      ...toRefs(data),
+    }
+  },
+  async beforeRouteEnter(to, from, next) {
+    console.log('this in beforeRouteEnter', this)
+    await delay(300)
+    next(vm => {
+      console.log('got vm', vm)
+      vm.other = 'Hola'
+    })
   },
 })
 </script>
-- 
2.47.3