Mutate multiple call results

[kelleyvanevert]

I'd like to be able to mutate the cached results for a variable number of call results. Essentially, what I'm after is a mutate function not with the current signature:

mutate(
  key,
  data,
  shouldRevalidate?
): void

..but rather with a signature something like this:

mutateMany(
  select: (key) => boolean,
  update: (result: R) => R
): void

or this:

type updater = (result: R) => R
mutateMany(
  selectivelyUpdate: (key) => void | updater
): void

In PR #245 (Improve mutate function) I found a clever trick (the "bound mutator") to relatively easy work around the current non-existence of this feature. I made a little userland proof-of-concept out of the idea, which looks something like this:

import useSWR, { mutate as swrMutate } from "swr";

const BOUND_MUTATORS: Array<{ key, boundMutator }> = [];

export function useWrappedSWR(key, ...) {
  const swr = useSWR(key, ...);

  useIsomorphicLayoutEffect(() => {
    if (key) {
      const entry = {
        key,
        boundMutator(update: (result: any) => any) {
          if (swr.data) {
            swrMutate(key, update(swr.data));
          }
        }
      };

      BOUND_MUTATORS.push(entry);

      return () => {
        const i = BOUND_MUTATORS.indexOf(entry);
        if (i >= 0) {
          BOUND_MUTATORS.splice(i, 1);
        }
      };
    }
  }, [key]);

  return swr;
}

export function mutateMany(selectivelyUpdate: (key: any) => void | ((result: any) => any)) {
  BOUND_MUTATORS.forEach(({ key, boundMutator }) => {
    const update = selectivelyUpdate(key);
    if (update) {
      boundMutator(update);
    }
  });
}

👉 Is this kind of feature something you are looking into, or willing to think about/support?

I'd be very very happy, am looking forward to using this library but currently rely on this kind of (self-written) cache updating logic in a project of mine with a relatively large codebase :)

[shuding]

I think this is more like a cache related feature: you want to get all the current key-data pairs and selectively mutate them.

We are going to add more support for cache. So ideally we will have a cleaner API design: cache access and better mutation (landed in #245). And you can combine them to have the mutateMany functionality.

[sergiodxa]

This is now possible with the exposed cache in v0.2.0 (beta at the moment), you could do something like this:

import { cache, mutate } from "swr";

type mutateMany = (
  select: (key: string) => boolean, // select which keys to update
  update: any | (data: any) => any, // update the dat
  // define if it should revalidate that key
  shouldRevalidate: boolean | (key: string) => boolean
) => void;

function mutateMany(select, update, shouldRevalidate = true) {
  cache
    .keys()
    .filter(select)
    .forEach(key => {
      const newData = update(cache.get(key));
      mutate(
        key,
        newData,
        typeof shouldRevalidate === "function"
          ? shouldRevalidate(key)
          : shouldRevalidate
      );
    });
}

mutateMany(
  key => key.startsWith("/api/users"), // let's revalidate all /api/users keys
  data => undefined, // this will run a trigger
);

Something like that

[sergiodxa]

Maybe this could be added to SWR, @QuietShu what do you think? Maybe we need to think more about the API of this function too

[shuding]

It's now possible with SWR 1.0, please check this example: Mutate Multiple Keys from RegEx :)