example: add todos to advanced example

Author: Hebilicious

playgrounds/advanced/app.vue

@@ -1,11 +1,25 @@
 <script setup lang="ts">
+import { useQuery } from "@tanstack/vue-query"
+
 const { $createHooks, $test } = useNuxtApp()
 $test.log("hello")
+
+const { data, isLoading } = useQuery({
+  queryKey: ["todos"],
+  queryFn: () => $fetch("/api/todos")
+})
 </script>
 
 <template>
-  HELLO WORLD
+  <h1>Advanced Example</h1>
   <pre>
     {{ typeof $createHooks }}
   </pre>
+  <div>
+    <h2>Todos</h2>
+    <p v-if="isLoading">
+      Loading
+    </p>
+    <pre>{{ data }}</pre>
+  </div>
 </template>

playgrounds/advanced/nuxt.config.ts

@@ -5,15 +5,15 @@ export default defineNuxtConfig({
     // "@hebilicious/vue-query-nuxt"
   ],
   vueQuery: {
-    stateKey: "advanced-key",
+    // stateKey: "advanced-key",
     queryClientOptions: {
       defaultOptions: {
         queries: { staleTime: 1000 }
       }
-    },
-    vueQueryPluginOptions: {
-      queryClientKey: "custom-key"
     }
+    // vueQueryPluginOptions: {
+    //   queryClientKey: "custom-key"
+    // }
   },
   devtools: {
     enabled: true

playgrounds/advanced/server/api/todos.ts

@@ -0,0 +1,5 @@
+export default defineEventHandler(() => {
+  // eslint-disable-next-line no-console
+  console.log("Fetching todos ...")
+  return [{ id: 1, todo: "Hello" }, { id: 2, todo: "World" }]
+})

playgrounds/advanced/vue-query.config.ts

@@ -1,5 +1,6 @@
 import { createHooks } from "@wundergraph/vue-query"
 
-export default defineVueQueryPluginCallback(() => {
+export default defineVueQueryPluginCallback(async ({ queryClient }) => {
+  queryClient.setQueryData(["todos"], [{ id: 1, todo: "Hello" }, { id: 2, todo: "World" }])
   return { provide: { createHooks, test: console } }
 })