T
TanStack•3y ago
like-gold

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 onSuccesscallback 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 and the useNavigate hook (the latter from react-dom) and a custom hook for unified toast messages. My 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 callback?
3 Replies
other-emerald
other-emerald•3y ago
You can read more about the decision of removing onSucess and a couple extra callbacks from useQuery: https://tkdodo.eu/blog/breaking-react-querys-api-on-purpose As it's stated above, those callbacks will only be removed for the useQuery hook.
Breaking React Query's API on purpose
Why good API design matters, even if it means breaking existing APIs in the face of resistance.
optimistic-gold
optimistic-gold•3y ago
you're showing a mutation. Nothing changes for mutations.
like-gold
like-goldOP•3y ago
Thank you both, read the article it was really helpful & indeed the mutation doesn't has the onSuccess marked as deprecated, my bad! And btw. awesome library you guys did a great job

Did you find this page helpful?