snapshot of https://github.com/TanStack/query.git (main, 2026-09-16; blobs > 131072B omitted)

examples/vue/2.6-basic/src/App.vue

@@ -0,0 +1,45 @@
+<script lang="ts">
+import { defineComponent, ref } from '@vue/composition-api'
+
+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>
+  <div>
+    <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" />
+  </div>
+</template>

examples/vue/2.6-basic/src/Post.vue

@@ -0,0 +1,53 @@
+<script lang="ts">
+import { defineComponent, toRaw } from '@vue/composition-api'
+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 { isPending, isError, isFetching, data, error } = useQuery({
+      queryKey: ['post', () => props.postId],
+      queryFn: () => fetcher(props.postId),
+    })
+
+    return { isPending, isError, isFetching, data, error }
+  },
+})
+</script>
+
+<template>
+  <div>
+    <h1>Post {{ postId }}</h1>
+    <a @click="$emit('setPostId', -1)" href="#"> Back </a>
+    <div v-if="isPending" 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>
+  </div>
+</template>
+
+<style scoped>
+.update {
+  font-weight: bold;
+  color: green;
+}
+</style>

examples/vue/2.6-basic/src/Posts.vue

@@ -0,0 +1,57 @@
+<script lang="ts">
+import { defineComponent } from '@vue/composition-api'
+import { useQuery } from '@tanstack/vue-query'
+
+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: 'PostsList',
+  props: {
+    isVisited: {
+      type: Function,
+      required: true,
+    },
+  },
+  emits: ['setPostId'],
+  setup() {
+    const { isPending, isError, isFetching, data, error, refetch } = useQuery({
+      queryKey: ['posts'],
+      queryFn: fetcher,
+    })
+
+    return { isPending, isError, isFetching, data, error, refetch }
+  },
+})
+</script>
+
+<template>
+  <div>
+    <h1>Posts</h1>
+    <div v-if="isPending">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>
+  </div>
+</template>
+
+<style scoped>
+.visited {
+  font-weight: bold;
+  color: green;
+}
+</style>

examples/vue/2.6-basic/src/main.ts

@@ -0,0 +1,14 @@
+import Vue from 'vue'
+import VueCompositionApi, { createApp, h } from '@vue/composition-api'
+import { VueQueryPlugin } from '@tanstack/vue-query'
+
+import App from './App.vue'
+
+Vue.use(VueCompositionApi)
+Vue.use(VueQueryPlugin)
+
+createApp({
+  render() {
+    return h(App)
+  },
+}).mount('#app')

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

@@ -0,0 +1,4 @@
+declare module '*.vue' {
+  import Vue from 'vue'
+  export default Vue
+}

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

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