docs: update docs

Author: DamianOsipiuk

examples/2.x-basic/package.json

@@ -9,12 +9,12 @@
   "dependencies": {
     "@vue/composition-api": "1.4.4",
     "vue": "2.6.14",
-    "vue-query": ">=1.0.0",
+    "vue-query": "2.0.0-beta.7",
     "vue-template-compiler": "2.6.14"
   },
   "devDependencies": {
-    "typescript": "4.5.5",
-    "vite": "2.6.14",
-    "vite-plugin-vue2": "1.9.2"
+    "typescript": "4.8.3",
+    "vite": "3.1.0",
+    "vite-plugin-vue2": "2.0.2"
   }
 }

examples/2.x-basic/src/Post.vue

@@ -10,7 +10,7 @@ const fetcher = async (id: number): Promise<Post> =>
   );
 
 export default defineComponent({
-  name: "Post",
+  name: "PostDetails",
   props: {
     postId: {
       type: Number,

examples/2.x-basic/src/Posts.vue

@@ -2,15 +2,15 @@
 import { defineComponent } from "@vue/composition-api";
 import { useQuery } from "vue-query";
 
-import { Post } from "./types";
+import type { Post } from "./types";
 
 const fetcher = async (): Promise<Post[]> =>
   await fetch("https://jsonplaceholder.typicode.com/posts").then((response) =>
     response.json()
   );
 
 export default defineComponent({
-  name: "Posts",
+  name: "PostsList",
   props: {
     isVisited: {
       type: Function,
@@ -20,7 +20,7 @@ export default defineComponent({
   emits: ["setPostId"],
   setup() {
     const { isLoading, isError, isFetching, data, error, refetch } = useQuery(
-      "posts",
+      ["posts"],
       fetcher
     );
 

examples/2.x-basic/vite.config.ts

@@ -5,5 +5,8 @@ import { createVuePlugin } from "vite-plugin-vue2";
 export default defineConfig({
   plugins: [createVuePlugin()],
   // For dev purpose, when using `npm link`. This breaks codesandbox somehow.
-  // optimizeDeps: { exclude: ["vue-query", "vue-demi"] },
+  optimizeDeps: {
+    // include: ["remove-accents"],
+    // exclude: ["vue-query", "vue-demi"],
+  },
 });

examples/basic/package.json

@@ -7,12 +7,12 @@
     "serve": "vite preview"
   },
   "dependencies": {
-    "vue": "3.2.27",
-    "vue-query": ">=1.0.0"
+    "vue": "3.2.39",
+    "vue-query": "2.0.0-beta.7"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "2.0.1",
-    "typescript": "4.5.5",
-    "vite": "2.7.13"
+    "@vitejs/plugin-vue": "3.1.0",
+    "typescript": "4.8.3",
+    "vite": "3.1.0"
   }
 }

examples/basic/src/Post.vue

@@ -10,7 +10,7 @@ const fetcher = async (id: number): Promise<Post> =>
   );
 
 export default defineComponent({
-  name: "Post",
+  name: "PostDetails",
   props: {
     postId: {
       type: Number,

examples/basic/src/Posts.vue

@@ -10,7 +10,7 @@ const fetcher = async (): Promise<Post[]> =>
   );
 
 export default defineComponent({
-  name: "Posts",
+  name: "PostsList",
   props: {
     isVisited: {
       type: Function,
@@ -20,7 +20,7 @@ export default defineComponent({
   emits: ["setPostId"],
   setup() {
     const { isLoading, isError, isFetching, data, error, refetch } = useQuery(
-      "posts",
+      ["posts"],
       fetcher
     );
 

examples/basic/vite.config.ts

@@ -5,5 +5,8 @@ import vue from "@vitejs/plugin-vue";
 export default defineConfig({
   plugins: [vue()],
   // For dev purpose, when using `npm link`. This breaks codesandbox somehow.
-  // optimizeDeps: { exclude: ["vue-query", "vue-demi"] },
+  optimizeDeps: {
+    // include: ["remove-accents"],
+    // exclude: ["vue-query", "vue-demi"],
+  },
 });

examples/multi-page/package.json

@@ -7,12 +7,12 @@
     "serve": "vite preview"
   },
   "dependencies": {
-    "vue": "3.2.27",
-    "vue-query": ">=1.0.0"
+    "vue": "3.2.39",
+    "vue-query": "2.0.0-beta.7"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "2.0.1",
-    "typescript": "4.5.5",
-    "vite": "2.7.13"
+    "@vitejs/plugin-vue": "3.1.0",
+    "typescript": "4.8.3",
+    "vite": "3.1.0"
   }
 }

examples/multi-page/src/Page.vue

@@ -15,14 +15,14 @@ const todoFetcher = async (): Promise<Todo[]> =>
   );
 
 export default defineComponent({
-  name: "Page",
+  name: "PageList",
 
   props: {
     title: String,
   },
   setup() {
     const { isLoading, isError, isFetching, data, error, refetch } = useQuery(
-      "todos",
+      ["todos"],
       todoFetcher,
       {
         retry: 0,

examples/multi-page/vite.config.ts

@@ -5,5 +5,8 @@ import vue from "@vitejs/plugin-vue";
 export default defineConfig({
   plugins: [vue()],
   // For dev purpose, when using `npm link`. This breaks codesandbox somehow.
-  // optimizeDeps: { exclude: ["vue-query", "vue-demi"] },
+  optimizeDeps: {
+    // include: ["remove-accents"],
+    // exclude: ["vue-query", "vue-demi"],
+  },
 });

examples/simple/package.json

@@ -7,12 +7,12 @@
     "serve": "vite preview"
   },
   "dependencies": {
-    "vue": "3.2.27",
-    "vue-query": ">=1.0.0"
+    "vue": "3.2.39",
+    "vue-query": "2.0.0-beta.7"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "2.0.1",
-    "typescript": "4.5.5",
-    "vite": "2.7.13"
+    "@vitejs/plugin-vue": "3.1.0",
+    "typescript": "4.8.3",
+    "vite": "3.1.0"
   }
 }

examples/simple/src/Todos.vue

@@ -15,10 +15,10 @@ const fetcher = async (): Promise<Todo[]> =>
   );
 
 export default defineComponent({
-  name: "Todos",
+  name: "TodoList",
   setup() {
     const { isLoading, isError, isFetching, data, error, refetch } = useQuery(
-      "todos",
+      ["todos"],
       fetcher
     );
 

examples/simple/vite.config.ts

@@ -5,5 +5,8 @@ import vue from "@vitejs/plugin-vue";
 export default defineConfig({
   plugins: [vue()],
   // For dev purpose, when using `npm link`. This breaks codesandbox somehow.
-  // optimizeDeps: { exclude: ["vue-query", "vue-demi"] },
+  optimizeDeps: {
+    // include: ["remove-accents"],
+    // exclude: ["vue-query", "vue-demi"],
+  },
 });

examples/suspense/package.json

@@ -7,12 +7,12 @@
     "serve": "vite preview"
   },
   "dependencies": {
-    "vue": "3.2.27",
-    "vue-query": ">=1.0.0"
+    "vue": "3.2.39",
+    "vue-query": "2.0.0-beta.7"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "2.0.1",
-    "typescript": "4.5.5",
-    "vite": "2.7.13"
+    "@vitejs/plugin-vue": "3.1.0",
+    "typescript": "4.8.3",
+    "vite": "3.1.0"
   }
 }

examples/suspense/src/App.vue

@@ -1,11 +1,11 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 
-import Content from "./Content.vue";
+import ContentList from "./Content.vue";
 
 export default defineComponent({
   name: "App",
-  components: { Content },
+  components: { ContentList },
 });
 </script>
 
@@ -17,7 +17,7 @@ export default defineComponent({
   </p>
   <Suspense>
     <template #default>
-      <Content />
+      <ContentList />
     </template>
     <template #fallback>
       <div>Loading...</div>

examples/suspense/src/Content.vue

@@ -15,12 +15,12 @@ const todoFetcher = async (): Promise<Todo[]> =>
   );
 
 export default defineComponent({
-  name: "Content",
+  name: "ContentList",
   async setup() {
     const { isLoading, isError, isFetching, data, error, refetch, suspense } =
-      useQuery("todos", todoFetcher);
-    useQuery("todos2", todoFetcher);
-    useQuery("todos3", todoFetcher);
+      useQuery(["todos"], todoFetcher);
+    useQuery(["todos2"], todoFetcher);
+    useQuery(["todos3"], todoFetcher);
 
     await suspense();
 

examples/suspense/vite.config.ts

@@ -5,5 +5,8 @@ import vue from "@vitejs/plugin-vue";
 export default defineConfig({
   plugins: [vue()],
   // For dev purpose, when using `npm link`. This breaks codesandbox somehow.
-  // optimizeDeps: { exclude: ["vue-query", "vue-demi"] },
+  optimizeDeps: {
+    // include: ["remove-accents"],
+    // exclude: ["vue-query", "vue-demi"],
+  },
 });