Vue-query返回只读数据如何修改？最优方案是什么？

一、临时修改本地数据（仅适用于无需同步后端的场景） #

如果只是需要临时修改数据（比如本地预览、表单编辑），可以将vue-query返回的只读数据克隆为Vue的响应式本地副本：

import { useQuery } from "vue-query";
import { ref, watch } from 'vue';

const { isLoading, data, error, isError, refetch } = useQuery("todo", todo);

// 深拷贝原数据，创建可修改的响应式副本
const editableData = ref(data.value ? structuredClone(data.value) : null);

// 监听原查询数据的变化，同步更新本地副本（当查询重新触发时）
watch(data, (newData) => {
  if (newData) {
    editableData.value = structuredClone(newData);
  }
}, { immediate: true });

// 现在可以安全修改本地副本
const addTodo = (newTodo) => {
  editableData.value?.todoList.push(newTodo);
};

二、最佳实践：使用 Mutation 修改数据（同步后端） #

Vue Query 的核心设计是通过查询（Query）获取数据、变更（Mutation）修改数据，直接修改Query返回的缓存数据会破坏缓存一致性，导致本地与后端数据脱节。正确的流程是：

1. 调用后端接口完成数据更新
2. 让对应的Query失效，自动重新获取最新数据

代码示例：

import { useQuery, useMutation, useQueryClient } from "vue-query";

// 假设你的API请求方法
const fetchTodos = () => axios.get("/api/todos");
const addTodoApi = (newTodo) => axios.post("/api/todos", newTodo);

const queryClient = useQueryClient();

// 查询待办列表
const { isLoading, data: todoData } = useQuery("todo", fetchTodos);

// 定义添加待办的Mutation
const addTodoMutation = useMutation({
  mutationFn: addTodoApi,
  // 成功后使"todo"查询失效，触发自动重新获取
  onSuccess: () => {
    queryClient.invalidateQueries("todo");
  },
  // 可选：处理错误
  onError: (err) => {
    console.error("添加待办失败:", err);
  }
});

// 触发添加操作
const handleAddTodo = (newTodo) => {
  addTodoMutation.mutate(newTodo);
};

为什么这是最佳方式？ #

• 保证本地数据与后端数据一致，避免缓存脏数据
• 遵循Vue Query的设计模式，利用其缓存自动更新机制，减少手动同步的代码
• 支持Mutation的加载、错误状态管理，提升用户体验

内容的提问来源于stack exchange，提问作者Nicolas S.Xu