Perform PUT/PATCH request using mutation in vue-query

[bantawa04]

I have the following code in my 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>

My services/product.ts contains

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)
}

With the above code setup I'm getting the following errors:

Property 'id' does not exist on type 'void'.
Property 'data' does not exist on type 'void'.

Refereeing to the line:

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

And error message

Argument of type '{ id: string | number; data: { id: string | number; title: string; price: string | number; category: string; email: string; }; }' is not assignable to parameter of type 'void'.

Refereeing to line:

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

What would be the correct way to perform PUT/PATCH operation with "@tanstack/vue-query" ? Could somebody update the docs on this process ?

[DamianOsipiuk]

If you are using typescript, you should provide types for the mutationFn parameters.
Example:

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

[QNam]

@DamianOsipiuk i provided type for my mutationFn but still got this bug, vue-query 5.17.11

[DamianOsipiuk]

I do not see where TUpdateSuggestionParams is declared.
Please provide TS playground, or codesandbox link with problem reproduction.