How to fire mutation with url query param only once

I have a simple page that has a url like that:
/confirm-email?token=<token-value>


Now when the user visits that page I want to confirm the email with the token from the url with useMutation.

However the mutation is firing in a loop, how can I avoid this?

export interface ConfirmEmailChangeQuery extends ParsedUrlQuery {
  token: string;
}

const ConfirmEmailChange = () => {
  const router = useRouter();
  const query = router.query as ConfirmEmailChangeQuery;
  const confirmEmailChangeMutation = api.user.confirmEmailChange.useMutation();

  useEffect(() => {
    if (!query.token) {
      return;
    }
    void confirmEmailChangeMutation.mutate({
      token: query.token,
    });
  }, [confirmEmailChangeMutation, query.token]);

  return (
    <div>
      <Header title="Email is getting confirmed" />
    </div>
  );
};

export default ConfirmEmailChange;
Solution
GitHub
I'm attempting to perform a mutation when a specific route is hit in my application. When using useEffect and passing through a mutation method as a dependancy, it enters an infinite loop. cons...
Was this page helpful?