T
TanStack•3y ago
xenogeneic-maroon

react query useMutation does not retry with updated state

Quick question, useMutation when it is retrying doesnt update the state, see below: 
// type MyQueryVariables always has accessToken
type MyQueryVariables = Record<string, unknown> & { accessToken?: string };

const useAuthenticatedMutation = <
  TData = unknown,
  TError = unknown,
  TVariables = MyQueryVariables,
  TContext = unknown
>(
  options: UseMutationOptions<TData, TError, TVariables, TContext>
) => {
  const { accessToken, fetchAccessToken } = useAuth();

  return useMutation<TData, TError, TVariables, TContext>({
    ...options,
    mutationFn: async (variables) => {
      // Attach access token to variables
      const myVariables = { ...variables, accessToken } as TVariables;

      console.log("Access token of length", accessToken?.length, "attached to variables");

      return (
        options && options.mutationFn && (options.mutationFn(myVariables as TVariables) as any)
      );
    },
    retry: (failureCount, error) => {
      if (failureCount > 2) {
        return false;
      }

      if (!(error instanceof AxiosError)) {
        return false;
      }

      if (error.response?.status != 401) {
        return false;
      }

      if (error.response?.data?.message === "EXPIRED_TOKEN") {
        console.log("Access token expired, fetching new access token...");
        fetchAccessToken();
        return true;
      }

      return false;
    },
  });
};

export default useAuthenticatedMutation;
// type MyQueryVariables always has accessToken
type MyQueryVariables = Record<string, unknown> & { accessToken?: string };

const useAuthenticatedMutation = <
  TData = unknown,
  TError = unknown,
  TVariables = MyQueryVariables,
  TContext = unknown
>(
  options: UseMutationOptions<TData, TError, TVariables, TContext>
) => {
  const { accessToken, fetchAccessToken } = useAuth();

  return useMutation<TData, TError, TVariables, TContext>({
    ...options,
    mutationFn: async (variables) => {
      // Attach access token to variables
      const myVariables = { ...variables, accessToken } as TVariables;

      console.log("Access token of length", accessToken?.length, "attached to variables");

      return (
        options && options.mutationFn && (options.mutationFn(myVariables as TVariables) as any)
      );
    },
    retry: (failureCount, error) => {
      if (failureCount > 2) {
        return false;
      }

      if (!(error instanceof AxiosError)) {
        return false;
      }

      if (error.response?.status != 401) {
        return false;
      }

      if (error.response?.data?.message === "EXPIRED_TOKEN") {
        console.log("Access token expired, fetching new access token...");
        fetchAccessToken();
        return true;
      }

      return false;
    },
  });
};

export default useAuthenticatedMutation;
As in, the accessToken updates in the state before the retry, but the query retries using the original state (and original access token), therefore permanently being unauthorized. How can i make it run the retry with the UPDATED access token/
3 Replies
fascinating-indigo
fascinating-indigo•3y ago
As far as I know a retry will retry the same request. If you want to make a mutation with different variables (a different access token) then I think it’d be considered a new mutation. Did you look at using request interceptors out of interest?
xenogeneic-maroon
xenogeneic-maroonOP•3y ago
yep thats the road im probably gonna go down just figured itd be easier to not rewrite a bunch of stuff if i didnt have to but its been a pain tryna take the easy route
fascinating-indigo
fascinating-indigo•3y ago
I think it’d be simpler Let us know if you get stuck :reactquery:

Did you find this page helpful?