Perform PUT/PATCH request with @tanstack/vue-query

Question

Currently I'm using vue-query by tanstack in my vue 3 app with the following code structure.

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" ?

mutationFn seem to have only 1 param

Estus Flask
– Estus Flask

2022-12-29 09:57:51 +00:00
Commented Dec 29, 2022 at 9:57 — Estus Flask
– Estus Flask, Commented Dec 29, 2022 at 9:57

Stijn_d · Accepted Answer · 2023-03-24 14:23:14Z

I got the same kind of error when trying this kind of situation. what helped removing this error was typeing the argument of the mutation function so in my example it was like this:

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

But when i updated it to this:

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

the error was gone & the function was running as expected. Hope this helps

Collectives™ on Stack Overflow

Perform PUT/PATCH request with @tanstack/vue-query

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related