#TanStackQuery在Vue3中的完全指南

<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'

const todos = ref([])
const loading = ref(false)
const error = ref(null)

const fetchTodos = async () => {
  loading.value = true
  error.value = null
  try {
    const res = await axios.get('/api/todos')
    todos.value = res.data
  } catch (e) {
    error.value = e.message
  } finally {
    loading.value = false
  }
}

onMounted(fetchTodos)
</script>

<!-- components/TodoList.vue -->
<script setup lang="ts">
import { useQuery } from '@tanstack/vue-query'
import { fetchTodos } from '../api/todos'

// useQuery 返回的对象包含所有你需要的状态
const {
  data: todos,        // 响应式数据，请求成功后自动更新
  isLoading,          // 是否正在**首次**加载
  isError,            // 是否发生错误
  error,              // 错误对象
  isSuccess,          // 是否成功
  refetch,            // 手动重新请求的函数
} = useQuery({
  queryKey: ['todos'],   // ❶ 唯一标识这个查询的键
  queryFn: fetchTodos,   // ❷ 返回 Promise 的函数
})
</script>

<template>
  <div class="todo-list">
    <h2>待办事项列表</h2>

    <!-- 首次加载状态 -->
    <div v-if="isLoading" class="loading">
      ⏳ 加载中...
    </div>

    <!-- 错误状态 -->
    <div v-else-if="isError" class="error">
      ❌ 加载失败: {{ error.message }}
      <button @click="refetch">重试</button>
    </div>

    <!-- 成功状态 -->
    <div v-else-if="isSuccess">
      <ul>
        <li
          v-for="todo in todos"
          :key="todo.id"
          :class="{ completed: todo.completed }"
        >
          {{ todo.title }}
        </li>
      </ul>
      <button @click="refetch" class="refresh-btn">
        🔄 刷新数据
      </button>
    </div>
  </div>
</template>

<style scoped>
.completed {
  text-decoration: line-through;
  color: #999;
}
</style>

<script setup lang="ts">
import { ref } from 'vue'
import { useQuery } from '@tanstack/vue-query'

const userId = ref(1)

const { data: user } = useQuery({
  // 查询键依赖 userId，userId 变化 => 查询键变化 => 自动重新请求
  queryKey: ['user', userId],
  queryFn: () => axios.get(`/api/users/${userId.value}`).then(res => res.data),
})
</script>

<template>
  <div>
    <button @click="userId = 1">用户1</button>
    <button @click="userId = 2">用户2</button>
    <button @click="userId = 3">用户3</button>
    <div v-if="user">{{ user.name }}</div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useMutation, useQueryClient } from '@tanstack/vue-query'
import axios from 'axios'

const queryClient = useQueryClient()

const addTodo = async (title: string) => {
  const response = await axios.post('/api/todos', { title, completed: false })
  return response.data
}

const {
  mutate,           // 调用此函数触发 mutation
  isPending,        // 是否正在提交
  isError,
  error,
} = useMutation({
  mutationFn: addTodo,
  // ❶ 请求成功后，让 ['todos'] 查询失效，列表自动重新获取
  onSuccess: () => {
    queryClient.invalidateQueries({ queryKey: ['todos'] })
  },
})

const newTitle = ref('')

const handleSubmit = () => {
  if (newTitle.value.trim()) {
    mutate(newTitle.value)
    newTitle.value = ''
  }
}
</script>

<template>
  <form @submit.prevent="handleSubmit">
    <input v-model="newTitle" placeholder="新待办" :disabled="isPending" />
    <button type="submit" :disabled="isPending">
      {{ isPending ? '添加中...' : '添加' }}
    </button>
    <p v-if="isError">添加失败：{{ error.message }}</p>
  </form>
</template>

<script setup lang="ts">
import { useQuery, useMutation, useQueryClient } from '@tanstack/vue-query'
import axios from 'axios'

interface Todo {
  id: number
  title: string
  completed: boolean
}

const queryClient = useQueryClient()

// 查询：获取待办列表
const { data: todos } = useQuery({
  queryKey: ['todos'],
  queryFn: async () => {
    const res = await axios.get<Todo[]>('/api/todos')
    return res.data
  },
})

// 变更：切换完成状态（乐观更新版）
const { mutate: toggleTodo } = useMutation({
  mutationFn: async ({ id, completed }: { id: number; completed: boolean }) => {
    await axios.patch(`/api/todos/${id}`, { completed })
    return { id, completed }
  },

  // ⚡ 1. onMutate：在 mutation 函数执行**之前**调用
  onMutate: async ({ id, completed }) => {
    // ① 取消任何正在进行的 ['todos'] 查询，避免它们覆盖我们的乐观更新
    await queryClient.cancelQueries({ queryKey: ['todos'] })

    // ② 获取当前缓存中的数据（快照）
    const previousTodos = queryClient.getQueryData<Todo[]>(['todos'])

    // ③ 乐观更新：立即修改缓存
    queryClient.setQueryData<Todo[]>(['todos'], (old) => {
      if (!old) return []
      return old.map((todo) =>
        todo.id === id ? { ...todo, completed } : todo
      )
    })

    // ④ 返回上下文，供 onError 使用
    return { previousTodos }
  },

  // ❌ 2. onError：请求失败时调用
  onError: (error, variables, context) => {
    // 使用之前保存的快照，将缓存回滚到原来的状态
    if (context?.previousTodos) {
      queryClient.setQueryData(['todos'], context.previousTodos)
    }
    console.error('更新失败', error)
  },

  // ✅ 3. onSettled：请求完成后（无论成功/失败）调用
  onSettled: () => {
    // 可选：重新获取最新数据，确保与服务器完全一致
    queryClient.invalidateQueries({ queryKey: ['todos'] })
  },
})
</script>

<template>
  <ul>
    <li v-for="todo in todos" :key="todo.id">
      <input
        type="checkbox"
        :checked="todo.completed"
        @change="toggleTodo({ id: todo.id, completed: !todo.completed })"
      />
      <span :class="{ completed: todo.completed }">{{ todo.title }}</span>
    </li>
  </ul>
</template>