docs: update examples (#24)

DamianOsipiuk · web-flow · commit d62849dba71f · 2021-05-15T20:20:52.000+02:00
* docs: simple example

* docs: base example
diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json
@@ -1,5 +1,5 @@
 {
   "packages": ["./"],
-  "sandboxes": ["/examples/multi-page", "/examples/basic-vue-2.x"],
+  "sandboxes": ["/examples/base", "/examples/basic-vue-2.x"],
   "node": "14"
 }
diff --git a/docs/_sidebar.md b/docs/_sidebar.md
@@ -7,7 +7,8 @@
 
 - Examples
 
-  - [Basic](examples/basic.md)
+  - [Simple](examples/simple.md)
+  - [Basic](examples/base.md)
   - [Multi Page](examples/multi-page.md)
   - [Suspense](examples/suspense.md)
   - [Vue 2.x](examples/vue-2.x.md)
diff --git a/docs/examples/base.md b/docs/examples/base.md
@@ -0,0 +1,7 @@
+- [Open in Codesandbox](https://codesandbox.io/s/github/DamianOsipiuk/vue-query/tree/main/examples/base)
+- [View Source](https://github.com/DamianOsipiuk/vue-query/tree/main/examples/base)
+
+<iframe src="https://codesandbox.io/embed/github/DamianOsipiuk/vue-query/tree/main/examples/base?hidenavigation=1&view=preview&codemirror=1"
+  style="height:700px; border:0; overflow:hidden;"
+  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+></iframe>
diff --git a/docs/examples/basic.md b/docs/examples/basic.md
diff --git a/docs/examples/simple.md b/docs/examples/simple.md
@@ -0,0 +1,7 @@
+- [Open in Codesandbox](https://codesandbox.io/s/github/DamianOsipiuk/vue-query/tree/main/examples/simple)
+- [View Source](https://github.com/DamianOsipiuk/vue-query/tree/main/examples/simple)
+
+<iframe src="https://codesandbox.io/embed/github/DamianOsipiuk/vue-query/tree/main/examples/simple?hidenavigation=1&view=preview&codemirror=1"
+  style="height:700px; border:0; overflow:hidden;"
+  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+></iframe>
diff --git a/examples/base/.gitignore b/examples/base/.gitignore
@@ -3,3 +3,4 @@ node_modules
 dist
 dist-ssr
 *.local
+package-lock.json
diff --git a/examples/base/README.md b/examples/base/README.md
diff --git a/examples/base/index.html b/examples/base/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vue-query example</title>
+    <title>Vue Query Example</title>
   </head>
   <body>
     <div id="app"></div>
diff --git a/examples/base/package.json b/examples/base/package.json
diff --git a/examples/base/src/App.vue b/examples/base/src/App.vue
@@ -0,0 +1,54 @@
+<script lang="ts">
+import { ref } from "vue";
+import { defineComponent } from "vue";
+import { useQueryProvider } from "vue-query";
+import { VueQueryDevTools } from "vue-query/devtools";
+
+import Posts from "./Posts.vue";
+import Post from "./Post.vue";
+
+export default defineComponent({
+  name: "App",
+  components: { Posts, Post, VueQueryDevTools },
+  setup() {
+    useQueryProvider();
+
+    const visitedPosts = ref(new Set());
+    const isVisited = (id: number) => visitedPosts.value.has(id);
+
+    const postId = ref(-1);
+    const setPostId = (id: number) => {
+      visitedPosts.value.add(id);
+      postId.value = id;
+    };
+
+    return {
+      isVisited,
+      postId,
+      setPostId,
+    };
+  },
+});
+</script>
+
+<template>
+  <h1>Vue Query - Basic</h1>
+  <p>
+    As you visit the posts below, you will notice them in a loading state the
+    first time you load them. However, after you return to this list and click
+    on any posts you have already visited again, you will see them load
+    instantly and background refresh right before your eyes!
+    <strong>
+      (You may need to throttle your network speed to simulate longer loading
+      sequences)
+    </strong>
+  </p>
+  <Post
+    v-if="postId > -1"
+    :postId="postId"
+    :style="{}"
+    @setPostId="setPostId"
+  />
+  <Posts v-else :isVisited="isVisited" @setPostId="setPostId" />
+  <VueQueryDevTools :initialIsOpen="true" />
+</template>
diff --git a/examples/base/src/Post.vue b/examples/base/src/Post.vue
@@ -0,0 +1,51 @@
+<script lang="ts">
+import { defineComponent } from "vue";
+import { useQuery } from "vue-query";
+
+import { Post } from "./types";
+
+const fetcher = async (id: number): Promise<Post> =>
+  await fetch(
+    `https://jsonplaceholder.typicode.com/posts/${id}`
+  ).then((response) => response.json());
+
+export default defineComponent({
+  name: "Post",
+  props: {
+    postId: {
+      type: Number,
+      required: true,
+    },
+  },
+  emits: ["setPostId"],
+  setup(props) {
+    const { isLoading, isError, isFetching, data, error } = useQuery(
+      ["post", props.postId],
+      () => fetcher(props.postId)
+    );
+
+    return { isLoading, isError, isFetching, data, error };
+  },
+});
+</script>
+
+<template>
+  <h1>Post {{ postId }}</h1>
+  <a @click="$emit('setPostId', -1)" href="#"> Back </a>
+  <div v-if="isLoading" class="update">Loading...</div>
+  <div v-else-if="isError">An error has occurred: {{ error }}</div>
+  <div v-else-if="data">
+    <h1>{{ data.title }}</h1>
+    <div>
+      <p>{{ data.body }}</p>
+    </div>
+    <div v-if="isFetching" class="update">Background Updating...</div>
+  </div>
+</template>
+
+<style scoped>
+.update {
+  font-weight: bold;
+  color: green;
+}
+</style>
diff --git a/examples/base/src/Posts.vue b/examples/base/src/Posts.vue
@@ -0,0 +1,55 @@
+<script lang="ts">
+import { defineComponent } from "vue";
+import { useQuery } from "vue-query";
+
+import { Post } from "./types";
+
+const fetcher = async (): Promise<Post[]> =>
+  await fetch("https://jsonplaceholder.typicode.com/posts").then((response) =>
+    response.json()
+  );
+
+export default defineComponent({
+  name: "Posts",
+  props: {
+    isVisited: {
+      type: Function,
+      required: true,
+    },
+  },
+  emits: ["setPostId"],
+  setup() {
+    const { isLoading, isError, isFetching, data, error, refetch } = useQuery(
+      "posts",
+      fetcher
+    );
+
+    return { isLoading, isError, isFetching, data, error, refetch };
+  },
+});
+</script>
+
+<template>
+  <h1>Posts</h1>
+  <div v-if="isLoading">Loading...</div>
+  <div v-else-if="isError">An error has occurred: {{ error }}</div>
+  <div v-else-if="data">
+    <ul>
+      <li v-for="item in data" :key="item.id">
+        <a
+          @click="$emit('setPostId', item.id)"
+          href="#"
+          :class="{ visited: isVisited(item.id) }"
+          >{{ item.title }}</a
+        >
+      </li>
+    </ul>
+  </div>
+</template>
+
+<style scoped>
+.visited {
+  font-weight: bold;
+  color: green;
+}
+</style>
diff --git a/examples/base/src/main.ts b/examples/base/src/main.ts
diff --git a/examples/base/src/shims-vue.d.ts b/examples/base/src/shims-vue.d.ts
diff --git a/examples/base/src/types.d.ts b/examples/base/src/types.d.ts
@@ -0,0 +1,6 @@
+export interface Post {
+  userId: number;
+  id: number;
+  title: string;
+  body: string;
+}
diff --git a/examples/base/tsconfig.json b/examples/base/tsconfig.json
diff --git a/examples/base/vite.config.ts b/examples/base/vite.config.ts
diff --git a/examples/simple/.gitignore b/examples/simple/.gitignore
@@ -0,0 +1,6 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
+package-lock.json
diff --git a/examples/simple/README.md b/examples/simple/README.md
@@ -0,0 +1,6 @@
+# Basic example
+
+To run this example:
+
+- `npm install` or `yarn`
+- `npm run dev` or `yarn dev`
diff --git a/examples/simple/index.html b/examples/simple/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vue Query Example</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/examples/simple/package.json b/examples/simple/package.json
@@ -0,0 +1,19 @@
+{
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "build:dev": "vite build -m development",
+    "serve": "vite preview"
+  },
+  "dependencies": {
+    "vue": "^3.0.5",
+    "vue-query": ">=1.0.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^1.1.5",
+    "@vue/compiler-sfc": "^3.0.5",
+    "typescript": "^4.1.3",
+    "vite": "^2.0.5"
+  }
+}
diff --git a/examples/simple/src/App.vue b/examples/simple/src/App.vue
@@ -0,0 +1,21 @@
+<script lang="ts">
+import { defineComponent } from "vue";
+import { useQueryProvider } from "vue-query";
+import { VueQueryDevTools } from "vue-query/devtools";
+
+import Todos from "./Todos.vue";
+
+export default defineComponent({
+  name: "App",
+  components: { Todos, VueQueryDevTools },
+  setup() {
+    useQueryProvider();
+  },
+});
+</script>
+
+<template>
+  <h1>Vue Query - Simple</h1>
+  <Todos />
+  <VueQueryDevTools :initialIsOpen="true" />
+</template>
diff --git a/examples/simple/src/Todos.vue b/examples/simple/src/Todos.vue
@@ -1,7 +1,6 @@
 <script lang="ts">
 import { defineComponent } from "vue";
-import { useQuery, useQueryProvider } from "vue-query";
-import { VueQueryDevTools } from "vue-query/devtools";
+import { useQuery } from "vue-query";
 
 interface Todo {
   userId: number;
@@ -10,32 +9,26 @@ interface Todo {
   completed: boolean;
 }
 
-const todoFetcher = async (): Promise<Todo[]> =>
-  await fetch("https://jsonplaceholder.cypress.io/todos").then((response) =>
+const fetcher = async (): Promise<Todo[]> =>
+  await fetch("https://jsonplaceholder.typicode.com/todos").then((response) =>
     response.json()
   );
 
 export default defineComponent({
-  name: "App",
-  components: { VueQueryDevTools },
+  name: "Todos",
   setup() {
-    useQueryProvider();
-
     const { isLoading, isError, isFetching, data, error, refetch } = useQuery(
       "todos",
-      todoFetcher
+      fetcher
     );
-    useQuery("todos2", todoFetcher);
-    useQuery("todos3", todoFetcher);
 
     return { isLoading, isError, isFetching, data, error, refetch };
   },
 });
 </script>
 
 <template>
-  <h1>vue-query example</h1>
-  <p>Turn on <b>Slow 3G</b> or <b>Offline</b> in dev-tools and hit Refetch</p>
+  <p>Turn on <b>network throttling</b> in dev-tools and press Refetch</p>
   <button @click="refetch" :disabled="isFetching">
     {{ isFetching ? "Refetching..." : "Refetch" }}
   </button>
@@ -49,8 +42,6 @@ export default defineComponent({
       </li>
     </ul>
   </div>
-  <div v-else>Nothing to see here...</div>
-  <VueQueryDevTools :initialIsOpen="true" />
 </template>
 
 <style>
diff --git a/examples/simple/src/main.ts b/examples/simple/src/main.ts
@@ -0,0 +1,5 @@
+import { createApp } from "vue";
+
+import App from "./App.vue";
+
+createApp(App).mount("#app");
diff --git a/examples/simple/src/shims-vue.d.ts b/examples/simple/src/shims-vue.d.ts
@@ -0,0 +1,5 @@
+declare module "*.vue" {
+  import { DefineComponent } from "vue";
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}
diff --git a/examples/simple/tsconfig.json b/examples/simple/tsconfig.json
@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "strict": true,
+    "jsx": "preserve",
+    "sourceMap": true,
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "lib": ["esnext", "dom"],
+    "types": ["vite/client"]
+  },
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
+}
diff --git a/examples/simple/vite.config.ts b/examples/simple/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [vue()],
+});

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`	`1`	`{`
`2`	`2`	`"packages": ["./"],`
`3`		`- "sandboxes": ["/examples/multi-page", "/examples/basic-vue-2.x"],`
	`3`	`+ "sandboxes": ["/examples/base", "/examples/basic-vue-2.x"],`
`4`	`4`	`"node": "14"`
`5`	`5`	`}`