En este artículo aprenderás:

1. Dos maneras de detonar 'onSuccess' y 'onError'
   a. Ejemplo 1 (useMutation)
   b. Ejemplo 2 (custom hook)

Dos maneras de detonar las funciones 'onSuccess' y 'onError' con Tanstack Query

Tanstack query nos permite ejecutar código automáticamente cuando se resuelve una mutación. Esto se logra a través de las funciones 'onSuccess' y 'onError'. Estas funciones se ejecutan cuando la mutación se resuelve con éxito o cuando se produce un error, respectivamente.

Decir que hay dos maneras es un poco exagerado, ya que en realidad hay una manera de hacerlo, pero hay dos lugares diferentes donde podemos colocar el código que queremos ejecutar.

Primera Manera

La primera manera es colocar el código dentro de la función 'onSuccess' o 'onError' que se pasa como argumento a la función 'useMutation' de la mutación. Esta manera es conveniene cuando usamos useMutation dentro del componente que utiliza la función ya que podemos personalizar el código que se ejecuta dependiendo del componente que estamos utilizando.

Segunda Manera

La segunda manera es colocar el código dentro de la función 'onSuccess' o 'onError' que se pasa como argumento a la función 'mutate' de la mutación. Esta manera conviene cuando usamos una abstracción (un custom hook por ejemplo) y reusamos la mutación en muchos componentes. En este caso, si usamos el mismo 'onSuccess' o 'onError', todos los componentes que usen la mutación tendrán el mismo comportamiento cuando se resuelve la promesa pero si queremos actualizar el estado local del componente necesitamos poder llamar una función unicamente para esa llamada.

Ejemplo 1 (useMutation)

Ejemplo 2 (custom hook)

En este ejemplo vamos a crear un custom hook que nos permita crear un usuario y que nos permita ejecutar código cuando se resuelve la mutación. El código que vamos a usar dentro de la función useMutation se va a ejecutar en todas las mutaciones, pero el codigo que usemos dentro de la función mutate se va a ejecutar solo para esa mutación.

Custom Hook

// src/hooks/useCreateUser.js
import {useMutation} from "@tanstack/react-query"; import {createUserFn} from "../api/users";
export const useCreateUser = () => {
  const { mutate: createUser } = useMutation(createUserFn, {
    onSuccess: (data) => {
      // Se ejecuta siempre que se resuelve correctamente la promesa en el hook
      console.log("User created successfully");
    },
    onError: (error) => {
      // Se ejecuta siempre que se rechaza la promesa en el hook
      console.log("Error creating user");
    },
  });
return { createUser };
};

Componente