chore: update examples

Author: DamianOsipiuk

examples/nuxt-simple/package.json

@@ -11,7 +11,7 @@
   "dependencies": {
     "@nuxtjs/composition-api": "^0.28.0",
     "nuxt": "^2.0.0",
-    "vue-query": "^1.5.1"
+    "vue-query": ">=1.0.0"
   },
   "devDependencies": {
     "babel-eslint": "^10.0.1",

examples/nuxt-simple/pages/index.vue

@@ -27,7 +27,7 @@ export default defineComponent({
 
     const { refetch, data, suspense } = useQuery("todos", fetcher, {
       // If you do not want data to be refetched on the client, set a staleTime to high enough time
-      staleTime: 1000,
+      staleTime: 5000,
     });
 
     onServerPrefetch(async () => {

examples/nuxt-simple/plugins/vue-query.js

@@ -4,15 +4,15 @@ import { VueQueryPlugin, QueryClient, hydrate } from "vue-query";
 export default (context) => {
   // Modify your Vue Query global settings here
   const queryClient = new QueryClient({
-    defaultOptions: { queries: { staleTime: 1000 } },
+    defaultOptions: { queries: { staleTime: 5000 } },
   });
   const options = { queryClient };
 
   Vue.use(VueQueryPlugin, options);
 
   if (process.client) {
-    if (context.nuxtState && context.nuxtState["vue-query"]) {
-      hydrate(queryClient, context.nuxtState["vue-query"]);
+    if (context.nuxtState && context.nuxtState["vueQueryState"]) {
+      hydrate(queryClient, context.nuxtState["vueQueryState"]);
     }
   }
 };

examples/nuxt3-simple/app.vue

@@ -2,31 +2,15 @@
   <div>{{ data }}</div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { useQuery } from "vue-query";
-import { defineComponent, onServerPrefetch } from "vue";
 
-interface Post {
-  userId: number;
-  id: number;
-  title: string;
-  body: string;
-}
-
-const fetcher = async (): Promise<Post[]> =>
+const fetcher = async () =>
   await fetch("https://jsonplaceholder.typicode.com/posts").then((response) =>
     response.json()
   );
 
-export default defineComponent({
-  setup() {
-    const { data, suspense } = useQuery("test", fetcher);
-
-    onServerPrefetch(async () => {
-      await suspense();
-    });
+const { data, suspense } = useQuery("test", fetcher);
 
-    return { data };
-  },
-});
+await suspense();
 </script>

examples/nuxt3-simple/nuxt.config.ts

@@ -1,4 +1,4 @@
-import { defineNuxtConfig } from "nuxt3";
+import { defineNuxtConfig } from "nuxt";
 
 // https://v3.nuxtjs.org/docs/directory-structure/nuxt.config
 export default defineNuxtConfig({});

examples/nuxt3-simple/package.json

@@ -6,7 +6,7 @@
     "start": "node .output/server/index.mjs"
   },
   "devDependencies": {
-    "nuxt3": "latest"
+    "nuxt": "npm:nuxt3@latest"
   },
   "dependencies": {
     "vue-query": ">=1.0.0"

examples/nuxt3-simple/plugins/vue-query.ts

@@ -9,7 +9,7 @@ import {
 export default (nuxt) => {
   // Modify your Vue Query global settings here
   const queryClient = new QueryClient({
-    defaultOptions: { queries: { staleTime: 1000 } },
+    defaultOptions: { queries: { staleTime: 5000 } },
   });
   const options: VueQueryPluginOptions = { queryClient };