OnSuccess alternative

Hello, I just stared using the react-query library (completely new to JS) and I just saw that I am using a callback which will be removed from the library. I am using the

onSuccess

onSuccess

callback like this:

  const { isLoading, mutateAsync } = useMutation({
    mutationFn: CreateProduct,
    useErrorBoundary: true,
    onSuccess() {
      toast.defaultSuccess();
      queryClient.invalidateQueries(["products"]);
      navigate("/products");
    },
  });

  const { isLoading, mutateAsync } = useMutation({
    mutationFn: CreateProduct,
    useErrorBoundary: true,
    onSuccess() {
      toast.defaultSuccess();
      queryClient.invalidateQueries(["products"]);
      navigate("/products");
    },
  });

As you can see I am using the

useQueryClient

useQueryClient

and the

useNavigate

useNavigate

hook (the latter from react-dom) and a custom hook for unified toast messages. My

CreateProduct

CreateProduct

function is in a separated file and is its own function in order to be unit testable etc.. How would I achieve the same results without the

onSuccess

onSuccess

callback?

TanStack•3y ago•

3 replies

dry-scarlet

OnSuccess alternative

Hello, I just stared using the react-query library (completely new to JS) and I just saw that I am using a callback which will be removed from the library. I am using the

onSuccess

onSuccess

callback like this:

  const { isLoading, mutateAsync } = useMutation({
    mutationFn: CreateProduct,
    useErrorBoundary: true,
    onSuccess() {
      toast.defaultSuccess();
      queryClient.invalidateQueries(["products"]);
      navigate("/products");
    },
  });

  const { isLoading, mutateAsync } = useMutation({
    mutationFn: CreateProduct,
    useErrorBoundary: true,
    onSuccess() {
      toast.defaultSuccess();
      queryClient.invalidateQueries(["products"]);
      navigate("/products");
    },
  });

As you can see I am using the

useQueryClient

useQueryClient

and the

useNavigate

useNavigate

hook (the latter from react-dom) and a custom hook for unified toast messages. My

CreateProduct

CreateProduct

function is in a separated file and is its own function in order to be unit testable etc.. How would I achieve the same results without the

onSuccess

onSuccess

callback?

OnSuccess alternative

Similar Threads

OnSuccess alternative

Similar Threads

Similar Threads

Similar Threads