使用@tanstack/vue-query执行PUT/PATCH请求

Question

目前我在我的vue 3应用程序中使用tanstack的vue-query，代码结构如下:

我有以下代码在我的todo/edit.vue

<template>
<v-container>
<v-row cols="12">
<v-text-field label="Name" v-model="formData.title"></v-text-field>
</v-row>
<v-row cols="12">
<v-text-field label="Price" v-model="formData.price"></v-text-field>
</v-row>
<v-row cols="12">
<v-col md="6" offset="6">
<v-btn color="success" @click="submit">Submit</v-btn>
</v-col>
</v-row>
</v-container>
</template>
<script setup lang="ts">
import { useQuery, useMutation, useQueryClient } from "@tanstack/vue-query"
import { fetchProduct, update} from "../services/product"
import { reactive } from "vue"
import { useRoute, useRouter } from "vue-router"
import type { IProduct } from "@/interface"
const route = useRoute()
let formData = reactive<IProduct>({
id: "",
title: "",
price: "",
category: "",
email: "",
})
const {
isLoading,
isError,
data: loadedData,
error,
refetch,
} = useQuery({
queryKey: ["getOneProduct", route.params.id],
queryFn: fetchProduct,
select: (data: any) => (formData = data),
})
const mutation = useMutation({
mutationFn: ({id, data}) => {
return update(id, data)
}, 
onSuccess: () => {
alert("success")
},
})
const submit = () => {
mutation.mutate({id:formData.id, data:formData})
}
</script>

我的services/product.ts包含

import { API } from "../util/API"
import type { IProduct } from "../interface/IProduct"
export interface IProductsResponse {
products?: Array<IProduct>
total?: number
skip?: number
limit?: number
}
export const fetchProducts = async (): Promise<IProductsResponse> => {
return await API.get<IProductsResponse, any>(`/products?limit=10&select=id,title,price,category`)
}
export const fetchProduct = async (param: any): Promise<IProduct> => {
const id = param.queryKey[1]
const response = await API.get<IProduct, any>(`products/${id}`)
return response
// return await API.get<IProduct, any>(`/products/`)
}
export const update = async (id: any, data: any): Promise<IProduct> => {
return API.put(`/products/${id}`, data)
}

使用上述代码设置，我得到以下错误:

属性'id'在类型'void'上不存在。属性'data'在'void'类型上不存在。

参照行:

mutationFn: ({id, data}) => {
return update(id, data)
}, 

和错误信息

类型的参数{id: string | number;数据:{id:字符串|数字;标题:字符串;价格:串|数;类别:字符串;电子邮件:字符串;};}'不能赋值给'void'类型的形参。

参照行:

mutation.mutate({id:formData.id, data:formData})

使用"@tanstack/vue-query"执行PUT/PATCH操作的正确方法是什么?

?

Answer 1

在尝试这种情况时，我得到了同样的错误。帮助消除这个错误的是输入突变函数的参数在我的例子中是这样的:

mutationFn: async (input) => {
return await fetch(props.apiPath, { method: "PUT", body: JSON.stringify(input) }).then((res) =>
res.json()
);

但是当我把它更新成这样:

mutationFn: async (input) => {
return await fetch(props.apiPath, { method: "PUT", body: JSON.stringify(input) }).then((res) =>
res.json()
);

错误消失&函数按预期运行。希望能有所帮助