feat(vue-query): client persister

examples/vue/basic/src/App.vue

@@ -1,29 +1,29 @@
 <script lang="ts">
-import { defineComponent, ref } from "vue";
+import { defineComponent, ref } from 'vue'
 
-import Posts from "./Posts.vue";
-import Post from "./Post.vue";
+import Posts from './Posts.vue'
+import Post from './Post.vue'
 
 export default defineComponent({
-  name: "App",
+  name: 'App',
   components: { Posts, Post },
   setup() {
-    const visitedPosts = ref(new Set());
-    const isVisited = (id: number) => visitedPosts.value.has(id);
+    const visitedPosts = ref(new Set())
+    const isVisited = (id: number) => visitedPosts.value.has(id)
 
-    const postId = ref(-1);
+    const postId = ref(-1)
     const setPostId = (id: number) => {
-      visitedPosts.value.add(id);
-      postId.value = id;
-    };
+      visitedPosts.value.add(id)
+      postId.value = id
+    }
 
     return {
       isVisited,
       postId,
       setPostId,
-    };
+    }
   },
-});
+})
 </script>
 
 <template>

examples/vue/basic/src/Post.vue

@@ -1,32 +1,32 @@
 <script lang="ts">
-import { defineComponent } from "vue";
-import { useQuery } from "@tanstack/vue-query";
+import { defineComponent } from 'vue'
+import { useQuery } from '@tanstack/vue-query'
 
-import { Post } from "./types";
+import { Post } from './types'
 
 const fetcher = async (id: number): Promise<Post> =>
   await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`).then(
-    (response) => response.json()
-  );
+    (response) => response.json(),
+  )
 
 export default defineComponent({
-  name: "PostDetails",
+  name: 'PostDetails',
   props: {
     postId: {
       type: Number,
       required: true,
     },
   },
-  emits: ["setPostId"],
+  emits: ['setPostId'],
   setup(props) {
     const { isLoading, isError, isFetching, data, error } = useQuery(
-      ["post", props.postId],
-      () => fetcher(props.postId)
-    );
+      ['post', props.postId],
+      () => fetcher(props.postId),
+    )
 
-    return { isLoading, isError, isFetching, data, error };
+    return { isLoading, isError, isFetching, data, error }
   },
-});
+})
 </script>
 
 <template>

examples/vue/basic/src/Posts.vue

@@ -1,32 +1,32 @@
 <script lang="ts">
-import { defineComponent } from "vue";
-import { useQuery } from "@tanstack/vue-query";
+import { defineComponent } from 'vue'
+import { useQuery } from '@tanstack/vue-query'
 
-import type { Post } from "./types";
+import type { Post } from './types'
 
 const fetcher = async (): Promise<Post[]> =>
-  await fetch("https://jsonplaceholder.typicode.com/posts").then((response) =>
-    response.json()
-  );
+  await fetch('https://jsonplaceholder.typicode.com/posts').then((response) =>
+    response.json(),
+  )
 
 export default defineComponent({
-  name: "PostsList",
+  name: 'PostsList',
   props: {
     isVisited: {
       type: Function,
       required: true,
     },
   },
-  emits: ["setPostId"],
+  emits: ['setPostId'],
   setup() {
     const { isLoading, isError, isFetching, data, error, refetch } = useQuery(
-      ["posts"],
-      fetcher
-    );
+      ['posts'],
+      fetcher,
+    )
 
-    return { isLoading, isError, isFetching, data, error, refetch };
+    return { isLoading, isError, isFetching, data, error, refetch }
   },
-});
+})
 </script>
 
 <template>

examples/vue/basic/src/main.ts

@@ -1,6 +1,6 @@
-import { createApp } from "vue";
-import { VueQueryPlugin } from "@tanstack/vue-query";
+import { createApp } from 'vue'
+import { VueQueryPlugin } from '@tanstack/vue-query'
 
-import App from "./App.vue";
+import App from './App.vue'
 
-createApp(App).use(VueQueryPlugin).mount("#app");
+createApp(App).use(VueQueryPlugin).mount('#app')

examples/vue/basic/src/shims-vue.d.ts

@@ -1,5 +1,5 @@
-declare module "*.vue" {
-  import { DefineComponent } from "vue";
-  const component: DefineComponent<{}, {}, any>;
-  export default component;
+declare module '*.vue' {
+  import { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
 }

examples/vue/basic/src/types.d.ts

@@ -1,6 +1,6 @@
 export interface Post {
-  userId: number;
-  id: number;
-  title: string;
-  body: string;
+  userId: number
+  id: number
+  title: string
+  body: string
 }

examples/vue/persister/.gitignore

@@ -0,0 +1,6 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
+package-lock.json

examples/vue/persister/README.md

@@ -0,0 +1,6 @@
+# Basic example
+
+To run this example:
+
+- `npm install` or `yarn`
+- `npm run dev` or `yarn dev`

examples/vue/persister/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>

examples/vue/persister/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "@tanstack/query-example-vue-basic",
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "build:dev": "vite build -m development",
+    "serve": "vite preview"
+  },
+  "dependencies": {
+    "vue": "3.2.41",
+    "@tanstack/vue-query": "^4.14.1",
+    "@tanstack/query-persist-client-core": "^4.14.1",
+    "@tanstack/query-sync-storage-persister": "^4.14.1"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "3.2.0",
+    "typescript": "4.8.4",
+    "vite": "3.2.2"
+  }
+}

examples/vue/persister/src/App.vue

@@ -0,0 +1,43 @@
+<script lang="ts">
+import { defineComponent, ref } from 'vue'
+
+import Posts from './Posts.vue'
+import Post from './Post.vue'
+
+export default defineComponent({
+  name: 'App',
+  components: { Posts, Post },
+  setup() {
+    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" @setPostId="setPostId" />
+  <Posts v-else :isVisited="isVisited" @setPostId="setPostId" />
+</template>

examples/vue/persister/src/Post.vue

@@ -0,0 +1,51 @@
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { useQuery } from '@tanstack/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: 'PostDetails',
+  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>

examples/vue/persister/src/Posts.vue

@@ -0,0 +1,55 @@
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { useQuery } from '@tanstack/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: 'PostsList',
+  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>

examples/vue/persister/src/main.ts

@@ -0,0 +1,25 @@
+import { createApp } from 'vue'
+import { VueQueryPlugin, type VueQueryPluginOptions } from '@tanstack/vue-query'
+import { persistQueryClient } from '@tanstack/query-persist-client-core'
+import { createSyncStoragePersister } from '@tanstack/query-sync-storage-persister'
+
+import App from './App.vue'
+
+const vueQueryOptions: VueQueryPluginOptions = {
+  queryClientConfig: {
+    defaultOptions: {
+      queries: {
+        cacheTime: 1000 * 60 * 60 * 24,
+        staleTime: 1000 * 60 * 60 * 24,
+      },
+    },
+  },
+  clientPersister: (queryClient) => {
+    return persistQueryClient({
+      queryClient,
+      persister: createSyncStoragePersister({ storage: localStorage }),
+    })
+  },
+}
+
+createApp(App).use(VueQueryPlugin, vueQueryOptions).mount('#app')

examples/vue/persister/src/shims-vue.d.ts

@@ -0,0 +1,5 @@
+declare module '*.vue' {
+  import { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}