Quartz 🪬

Mutations in React Query

1 min read

Tương tự với RTK Query, các request thực hiện thay đổi dữ liệu ở trong React Query cũng được gọi là các mutation. Sau đây là một số option hữu ích khi làm việc với mutation của React Query:

On Mutate

Là một callback có đối số là variables và được gọi thực thi trước mutation function. Giá trị trả về của nó là đối số truyền vào context của onSuccess và onError.

Ví dụ:

const updateProductPriceMutation = useMutation({
  // ...
  onMutate: (variables) => {
    return { message: `Updating the price to ${variables}...` }
  },
})

On Success

Nếu mutation có kết quả là thành công, callback onSuccess sẽ được thực thi.

Callback này nhận vào ba đối số:

  • data: là kết quả trả về của mutation request.
  • variables: là đối số truyền vào phương thức mutate.
  • context: là giá trị trả về từ onMutate.

Ví dụ:

const updateProductPriceMutation = useMutation({
  onSuccess: (data, variables, context) => {
    console.log(context.message)
    console.log("Updated price: ", data.price)
  },
})

On Error

Cũng tương tự với onSuccess nhưng đối số đầu tiên lại là một error thay vì data.

Resources

Backlinks