TanStackT
TanStack•15mo ago
skinny-azure

onSuccess, onError, onSettled all calling after mutation...

Hey there 👋 I've run into a strange issue where all my mutation callbacks are executing after a successful mutation call. I am using tRPC, but I don't expect that this should be related to the issue. Any help figuring this issue out is greatly appreciated.

Procedure definition:
createPostComment: authedProcedure
  .input(createCommentInputSchema)
  .mutation(async ({ input }) => {
    // Do mutation...
    return { success: true } // Simplified return for demonstration
  })

Mutate function:
const { mutate: createComment } = trpc.post.createPostComment.useMutation();

Mutation call w/callbacks:
createComment(
  { postId, commenterId, content },
  {
    onSuccess: () => {
      toast.success("Comment created :partying_face:", { richColors: true });
      trpc.useUtils().post.getPostPageComments.invalidate();
    },
    onError: (error) => {
      toast.error(error.message, { richColors: true });
      // toast.error("Comment failed :cry:", { richColors: true });
    },
    onSettled: () => {
      console.log("Settled");
      if (!inputRef.current) return;
      setContent("");
      inputRef.current.value = "";
    },
  },
);

Edit: I forgot to add the error message 🤦

Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 1. You might have mismatching versions of React and the renderer (such as React DOM) 2. You might be breaking the Rules of Hooks 3. You might have more than one copy of React in the same app See https://react.dev/link/invalid-hook-call for tips about how to debug and fix this problem.


This is an odd error to receive since the useMutation() hook is called inside a function component...

"use client";

export function CommentInput({ postId, commenterId }: CommentInputType) {
  const {
    // ...
  } = trpc.post.createPostComment.useMutation();

  return (
    // ...
  );
}
Was this page helpful?