TTC
Theo's Typesafe Cult•4d ago
Clemens

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;
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:
https://github.com/trojanowski/react-apollo-hooks/issues/205#issuecomment-1032336686 found a solution here. sneaky one...
GitHub
Calling a mutation within React.useEffect causes infinite loop · Is...
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...
Jump to solution
1 Reply
Solution
Clemens
Clemens•4d ago
https://github.com/trojanowski/react-apollo-hooks/issues/205#issuecomment-1032336686 found a solution here. sneaky one
GitHub
Calling a mutation within React.useEffect causes infinite loop · Is...
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...

Did you find this page helpful?