setAbortableTimeout.ts

export function setAbortableTimeout(
  callback: (...args: any[]) => void,
  delayInMilliseconds: number,
  signal: AbortSignal,
  ...args: any[]
) {
  if (!signal) {
    return setTimeout(callback, delayInMilliseconds, ...args);
  }

  signal?.addEventListener('abort', handleAbort);

  // Setup our internal timer that we can clear-on-abort.
  const timeoutHandle = setTimeout(internalCallback, delayInMilliseconds, ...args);

  function internalCallback() {
    signal?.removeEventListener('abort', handleAbort);
    callback();
  }

  function handleAbort() {
    clearTimeout(timeoutHandle);
  }

  return timeoutHandle;
}

usage.ts

  useEffect(() => {
    const controller = new AbortController();

    const uniqueResponses = [...new Map(responses.map(response => [hashQueryKey(response[0]), response])).values()];

    uniqueResponses.forEach(([key, data, options = {}]) => {
      const { delay = -1 } = options;
      const setQueryData = () => queryClient.setQueryData(key, data);

      if (delay > 0) {
        setAbortableTimeout(() => queryClient.setQueryData(key, data), delay, controller.signal);
        return;
      }

      setQueryData();
    });

    return () => {
      controller.abort();
      queryClient.clear();
    };
  }, [queryClient, responses]);