Pass query as a parameter to retry function

[shettayyy]

I have the following code to show a retry toast -

import { QueryCache, QueryClient } from '@tanstack/react-query';
import { hideToast, showToast } from 'features/notification/ToastContext';
import { getErrorMessage } from 'shared/utils/error';

let currentRetryToastId: string | undefined;

const handleHideRetryToast = () => {
    if (currentRetryToastId) {
        hideToast(currentRetryToastId);
        currentRetryToastId = undefined;
    }
};

/**
 * The global React Query client.
 */
export const queryClient = new QueryClient({
    queryCache: new QueryCache({
        onError: (error, query) => {
            handleHideRetryToast();

            if (query.meta?.errorMessage || query.meta?.showToast) {
                const { errorMessage } = query.meta;
                const message =
                    typeof errorMessage === 'string'
                        ? errorMessage
                        : getErrorMessage(error);

                showToast({ type: 'error', title: message });
            }
        },
        onSuccess: (_, query) => {
            handleHideRetryToast();

            if (
                query.meta?.successMessage &&
                typeof query.meta.successMessage === 'string'
            ) {
                showToast({
                    type: 'success',
                    title: query.meta.successMessage,
                });
            }
        },
    }),
    defaultOptions: {
        queries: {
            refetchOnWindowFocus: false,
            retry(failureCount) {
                if (failureCount === 1) {
                    handleHideRetryToast();

                    currentRetryToastId = showToast({
                        type: 'error',
                        title: "It's taking longer than expected. Please wait while we are retrying...",
                        timeoutMs: 10000,
                    });
                }

                return failureCount < 4;
            },
        },
    },
});

Unfortunately, I cannot identify the query key for which the retry progresses. I'd like to show a descriptive message to let the user know via toast as to retry for which fetch is in progress. Yes, we can individually do this for every query but it would be great to handle this via defaultOptions.

At present, I am also clearing toasts without knowing for which fetch is it being showing. So, I end up showing one retry but it would be great to only clear it on the basis of the query key. So, let's say if queryKey1 resolved, we still show retrying for queryKey2 if it's running. At present, I am not sure how to achieve that under defaultOptions. I could have created a map of query keys if the query param was available through the retry handler.

Let me know if this can be done via defaultOptions and if I am missing something.

The solution would be to have a query as a third parameter of the retry handler like onSuccess and onError. Something like - retry(failureCount, error, query)

[TkDodo]

One way would be to get the queryKey as a property on the error to get access to it. Generally, the retry function isn't made for side-effects like that.

I would rather make a subscription to the query cache and look at the updated event with the action.type being 'failed':

queryClient.getQueryCache().subscribe(event => {
  if (event.type === 'updated' && event.action.type === 'failed') {
    // show toast depending on event.query
  }
})

put that in a useEffect and you're good to go