0

I'm using t3stack for my project (tailwind - typescipt- tRPC) to use an api. in this app you do this for Example :

const apiResult = api.story.generateStory.useMutation();

no need to pass any function or key.

and to trigger this mutation:

apiResult.mutate(passedData)

today for project, after clicking a button that triggers mutate(), I needed to wait mutation to check if it returns 401 error, it shows up a modal. tried searching and most of answers were old or with useEffect. keep in mind I don't want to use useEffect. how can I wait for useMutation status and then show up a modal onClick (imagine modal is showed up by using elementRef.showModal())

IsoW
  • 129
  • 2
  • 15

1 Answers1

1

this solution worked for me! first keep in mind that we have mutateAsync which works asynchronous. then we can use try, catch to open modal on error after clicking :

const handleClick = async () => {
  try {
   // Trigger the mutation
   await apiResult.mutateAsync(passedData);

   // Mutation was successful, do something
   console.log('Mutation success');
  } catch (error) {
   // Mutation failed, show error modal
   console.log('Mutation error:', error);
   modalRef.current.showModal();
 }
};
IsoW
  • 129
  • 2
  • 15