Cancel requests

[tiagofernandez]

There are often times in a web application where you need to send a request for the latest user interaction. We need a way to prevent subsequent (async) logic from running for all but the most recent request – something like Axios' cancel token or fetch()'s AbortController.

[shuding]

The hardest part about this is that every library has its own API. You can pass a controller to the fetch function but there’s no general way to do it inside SWR. And another question is when to cancel it (when unmounting a component?).

[sergiodxa]

I think it’s way easier to ignore the result than cancel it with the current state of fetching libraries

[shuding]

For now a custom hook can (partially) solve it:

function useCancelableSWR (key, opts) {
  const controller = new AbortController()
  return [useSWR(key, url => fetch(url, { signal: controller.signal }), opts), controller]
}

// to use it:
const [{ data }, controller] = useCancelableSWR('/api')
// ...
controller.abort()

(also mentioned in #159)

[AjaxSolutions]

You probably don't want to memoize the AbortController.

You can only abort a controller instance once, so a new request requires a new controller.

[strothj]

Another thing to note is that useMemo is a performance optimization with no hard guarantee that it won't be recalculated. React can choose to recalculate memoized values (https://reactjs.org/docs/hooks-reference.html#usememo).

[AjaxSolutions]

@strothj The issue is not whether the AbortController instance is properly cached or not. The abort controller should not be cached at all.

[ekrresa]

I did this with axios

function useCancellableSWR(key, swrOptions) {
  const source = axios.CancelToken.source();

    return [
	useSWR(key, (url) => axios.get(url, { cancelToken: source.token }).then(res => res.data), {
		...swrOptions,
	}),
	source,
    ];
}

// usage:
const [{ data }, cancelFn] = useCancellableSWR('/endpoint');

cancelFn.cancel()

[hazae41]

Production-ready solution

Note: An AbortController is created with each request

export function useSWRAbort<Data = any, Error = any>(
  key: keyInterface,
  fn?: fetcherFn<Data>,
  options?: ConfigInterface<Data, Error>
): responseInterface<Data, Error> & {
  abort: () => void
} {
  const aborter = useRef<AbortController>()
  const abort = () => aborter.current?.abort()

  const res = useSWR<Data, Error>(key, (...args) => {
    aborter.current = new AbortController()
    return fn?.(aborter.current.signal, ...args)
  }, options)

  return { ...res, abort }
}

Example

Your fetcher gets an extra param signal (AbortSignal) before everything else

You can then pass it to your actual fetcher, for example fetch

const { data, error, abort } = useSWRAbort<T>(url, (signal, url) => {
  return fetch(url, { signal }).then(res => res.json())
})

return <button onClick={abort}>
  ...
</button>

Or use it to invalidate data afterwards

const { data, error, abort } = useSWRAbort<T>(url, async (signal, url) => {
  const res = await fetch(url)
  if (signal.aborted) throw new Error("Aborted")
  return await res.json()
})

Test with a timeout

const { data, error, abort } = useSWRAbort<T>(url, async (signal, url) => {
  await new Promise(ok => setTimeout(ok, 5000))
  console.log("aborted?", signal.aborted)
  const res = await fetch(url, { signal })
  return await res.json()
})

[huozhi]

Does config.isPaused() work for your cases?

useSWR(key, fetcher, {
  isPaused() {
    return /* condition for dropped requests */
  }
})

[pke]

could this also be solved by a middleware @shuding?

[ezeikel]

I was able to solve this when using Axios and the middleware like @pke suggests:

https://swr.vercel.app/docs/middleware

  let cancelToken;

  const cancelMiddleware = (useSWRNext) => {
    return (key, fetcher, config) => {
      const extendedFetcher = (...args) => {
        if (typeof cancelToken !== "undefined") {
          cancelToken.cancel("Operation cancelled due to new request.");
        }

        cancelToken = axios.CancelToken.source();
        return fetcher(...args);
      };

      return useSWRNext(key, extendedFetcher, config);
    };
  };

[pke]

Not sure I understand how this works 😉
The cancel token is called immediately?

edit: Ok I get it now. However, shouldn't the cancelToken be defined inside the middleware? Otherwise you can always only have one request going and all others will be cancelled?

[garipov]

One more solution as a middleware that automatically aborts the request as soon as the key is changed or component is unmounted.

const abortableMiddleware: Middleware = (useSWRNext) => {
  return (key, fetcher, config) => {
    // for each key generate new AbortController
    // additionally the key might be serialised using unstable_serialize, depending on your usecases
    const abortController = useMemo(() => new AbortController(), [key]);

    // as soon as abortController is changed or component is unmounted, call abort
    useEffect(() => () => abortController.abort(), [abortController]);

    // pass signal to your fetcher in way you prefer
    const fetcherExtended: typeof fetcher = (url, params) =>
      fetcher(url, { ...params, signal: abortController.signal });

    return useSWRNext(key, fetcherExtended, config);
  };
};

It also possible to play with this in my sandbox.

[monolithed]

const fetcherExtended: BareFetcher<any> = ([url, params]) => {}

The params should be array

[shuding]

I have a new proposal here: #1933, feedback welcome!

[MyCupOfTeaOo]

One more solution as a middleware that automatically aborts the request as soon as the key is changed or component is unmounted.

const abortableMiddleware: Middleware = (useSWRNext) => {
  return (key, fetcher, config) => {
    // for each key generate new AbortController
    // additionally the key might be serialised using unstable_serialize, depending on your usecases
    const abortController = useMemo(() => new AbortController(), [key]);

    // as soon as abortController is changed or component is unmounted, call abort
    useEffect(() => () => abortController.abort(), [abortController]);

    // pass signal to your fetcher in way you prefer
    const fetcherExtended: typeof fetcher = (url, params) =>
      fetcher(url, { ...params, signal: abortController.signal });

    return useSWRNext(key, fetcherExtended, config);
  };
};

It also possible to play with this in my sandbox.

import { useEffect, useRef } from 'react';
import { Middleware, SWRHook, unstable_serialize } from 'swr';

export type CancellablePromise<T> = Promise<T> & {
  cancel: (str?: string) => void;
};

export const cancelMiddleware: Middleware =
  (useSWRNext: SWRHook) => (key, fetcher, config) => {
    const cancelRef = useRef<() => void>();
    const keyString = unstable_serialize(key);
    const extendsFetcher = fetcher
      ? (...rest: any) => {
          const request = fetcher(...rest) as CancellablePromise<any>;
          cancelRef.current = request.cancel;
          return request;
        }
      : fetcher;
    const swr = useSWRNext(key, extendsFetcher, config);

    useEffect(() => {
      return () => {
        cancelRef.current?.();
      };
    }, [keyString]);
    return swr;
  };

The key needs to be serialized

[koba04]

Let's discuss this on #2312

[ettoredn]

I want to thank everyone for your suggestions. Here are my two cents:

const widgetFetcher = (widgetUrl: string, init: RequestInit = {}) => fetch(...);

export const abortMiddleware: Middleware = (useSWRNext: SWRHook) => (key, fetcher, config) => {
  const ctrl = useRef<AbortController>();

  let extendsFetcher = fetcher;
  if (fetcher === widgetFetcher) {
    extendsFetcher = (url) => {
      ctrl.current?.abort('Refetching');
      ctrl.current = new AbortController();

      return fetcher(url, {signal: ctrl.current.signal} as RequestInit);
    }
  }

  useEffect(() => () => ctrl.current?.abort('Component unmounted'), []);

  return useSWRNext(key, extendsFetcher, config);
};

[kylemh]

I wanted to suggest the useCancellableSWR get a section in the docs. It gets confusing for people who search: "cancel", "cancellation", or "abort" in docs and get nothing.

[kaorun343]

Using AbortSignal.timeout() might help you.
https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal/timeout_static

[joshkel]

If I understand correctly, the implementations here will interact poorly with request deduplication. For example:

1. Component A mounts and initiates a cancellable SWR request for key foo.
2. Component B mounts and initiates a cancellable SWR request for key foo. Nothing is done - the request is deduped, because a request for foo is already in flight.
3. Component A unmounts, triggering the cancel-on-unmount effect.
4. Component B's request never finishes.

See #2275 for an implementation that uses reference counting to work even if requests are deduplicated.

[joshkel]

We're currently experimenting with the following middleware. Like #2275, it uses reference counting to ensure that it can handle deduplicated requests.

import { useCallback, useEffect, useRef, type RefObject } from 'react';
import { unstable_serialize, type Middleware } from 'swr';

const enableDebugging: RegExp | boolean = false;

/**
 * The sequence of events can be tricky here:
 *
 * - If a component is mounted then immediately unmounted, React may call the
 *   middleware, useEffect, then cleanup without ever invoking the fetcher.
 * - If component A is unmounted and immediately replaced with a new component B
 *   that makes the same SWR request, then React may call middleware for B,
 *   cleanup for A (which temporarily sets refcount to 0), useEffect for B,
 *   without ever invoking a's fetcher.
 * - A particular component may be rerendered with a new key, causing a single
 *   middleware instance to be used with multiple keys.
 *
 * We need to manage assigning and clearing the controller in a way that
 * accommodates all these.  Tracking individual instances via React ref is the
 * best approach I've found for doing this.
 *
 * We use an instance ID that increments on every invocation.  Instance IDs may
 * get quite large.  (Middleware can be called frequently.)  But 2^53 - 1 is a
 * very large number - if the middleware is called 10,000 times a second, it
 * would take 28,000 years to overflow.
 *
 * For each serialized SWR key, we track the active instances (the key of the
 * map) and whether an instance's fetcher has been invoked (the value of the
 * map).
 */
type InstanceMap = Record<string, Map<number, boolean>>;

function debug(
  instances: RefObject<InstanceMap>,
  caption: string,
  instanceId: RefObject<number>,
  nextInstanceId: RefObject<number>,
  serializedKey: string
) {
  if (
    (process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test') &&
    enableDebugging &&
    (enableDebugging === true || serializedKey.match(enableDebugging))
  ) {
    // eslint-disable-next-line no-console
    console.warn(
      '%cuseSwrCancellation',
      'color: green',
      caption,
      serializedKey,
      instanceId.current + '/' + nextInstanceId.current,
      instances.current?.[serializedKey]?.size
    );
  }
}

/**
 * Cancels SWR requests on unmount.
 *
 * This is a standard feature of React Query, and it's been proposed and
 * discussed for SWR, but it's not available, so we implement it via middleware.
 *
 * The current implementation assumes the fetcher provided to SWR can take a
 * `fetch`-style options argument as its last parameter with an AbortSignal
 * property.
 *
 * References:
 *
 * - https://github.com/vercel/swr/discussions/2330
 * - https://github.com/vercel/swr/discussions/2312
 * - https://github.com/vercel/swr/pull/2275
 *
 * To facilitate deployment via gradual rollout, this allows controlling via an
 * `enabled` parameter.  (Because of the rules of hooks, we can't simply
 * add/remove the middleware at runtime.)
 */
export function useSwrCancellation(enabled = true) {
  const instances = useRef<InstanceMap>({});
  const controllers = useRef<Record<string, AbortController>>({});
  const nextInstanceId = useRef(0);

  return useCallback<Middleware>(
    (swrNext) => (key, fetcher, config) => {
      const serializedKey = unstable_serialize(key);

      // eslint-disable-next-line react-hooks/rules-of-hooks
      const instanceId = useRef(nextInstanceId.current++);

      const fetcherWithAbort: typeof fetcher = !enabled
        ? fetcher
        : fetcher &&
          ((...args) => {
            debug(instances, 'fetcherWithAbort', instanceId, nextInstanceId, serializedKey);

            instances.current[serializedKey] ||= new Map();
            instances.current[serializedKey].set(instanceId.current, true);

            const { signal } = (controllers.current[serializedKey] ||= new AbortController());
            return fetcher(...args, { signal: !enabled ? undefined : signal });
          });

      debug(instances, 'middleware', instanceId, nextInstanceId, serializedKey);

      // eslint-disable-next-line react-hooks/rules-of-hooks
      useEffect(() => {
        if (!enabled || !serializedKey) {
          return;
        }

        const instance = instanceId.current;
        debug(instances, 'useEffect', instanceId, nextInstanceId, serializedKey);

        instances.current[serializedKey] ||= new Map();
        if (!instances.current[serializedKey].has(instance)) {
          instances.current[serializedKey].set(instance, false);
        }

        return () => {
          debug(instances, 'cleanup', instanceId, nextInstanceId, serializedKey);

          // needsCleanup may be false if this instance was unmounted too
          // quickly to invoke its fetcher.  In that case, we don't want to
          // accidentally cancel the next instance's fetcher.
          const needsCleanup = instances.current[serializedKey].get(instance);

          instances.current[serializedKey].delete(instance);
          if (instances.current[serializedKey].size) {
            return;
          }

          delete instances.current[serializedKey];
          if (needsCleanup) {
            controllers.current[serializedKey]?.abort();
          }
          delete controllers.current[serializedKey];
        };
      }, [serializedKey]);

      return swrNext(key, enabled ? fetcherWithAbort : fetcher, config);
    },
    [enabled]
  );
}