Clemens Posts - Answer Overflow

Clemens

•Created by Clemens on 2/27/2025 in #questions

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;

4 replies

TTCTheo's Typesafe Cult

•Created by Clemens on 1/29/2024 in #questions

Setting queryHash with t3 useQuery good practice?

I have the following problem: I'm fetching data from an external API that expects a time range with a from and a to value. Because I want to show the user the total amount of posts (let's say for today) I set the following parameters on useQuery: from = getBeginningOfTodayDate() and to = getNowDate() Since getNow obviously changes with every useQuery call, the queryKey is also different every time. This in turn causes the useQuery to return undefined which causes the frontend to show the fallback value if the data is undefined. Instead I would like the useQuery to return cached data until fresh data is available to avoid the flickering. Now, I think I could simply set the queryHash to some custom value for that specific query, like so:

const queryResult = api.router.getTotalPosts.useQuery(
    {
      from,
      to,
    },
    {
      queryHash: "getTotalPostAmount",
      refetchInterval: 60000,
    }
  );
  return queryResult.data?.data;

const queryResult = api.router.getTotalPosts.useQuery(
    {
      from,
      to,
    },
    {
      queryHash: "getTotalPostAmount",
      refetchInterval: 60000,
    }
  );
  return queryResult.data?.data;

Is that good practice or can that cause some issues in the future? Or would it be better to set the queryKey or queryKeyHashFn?

7 replies

Gaming

Programming