T
TanStack•11mo ago
foreign-sapphire

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
  })
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();
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 = "";
    },
  },
);
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.
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 (
    // ...
  );
}
"use client";

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

  return (
    // ...
  );
}
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?