useSWRInfinite getting global cache keys

[Develliot]

Caveat, I might be using useSWRInfinite and filtered lists in the wrong way so any pointers would be awesome.

I'm using useSWRInfinite for a feed list.
This feed list has filters like: All feed items, only posts, only activities.
Under the hood I think useSWRInfinite makes a new paginated cache for each filtered list.
An item might be in one or more of those cached list, so if I delete a feed item in one of the lists I want to update the data in all the other caches without having to call the API again and again for each cache.

I want to do something like:

     // on feed item deleted 

     const feedItemTypes = [
       'feeditems',
       'donations',
       'posts',
       'milestones',
     ];
   
    // mutate all filtered feed item caches for the split second before revalidation

    feedItemTypes.forEach((feedItemType) => {
      const { mutate } = useSWRInfinite(
        // I'm not passing index here because I believe useSWRInfinite just needs the index of the first page
        () => {
          return createFeedItemsUrl({
            pageId,
            currentPage: 1,
            itemsPerPage,
            type: feedItemType,
          });
        },
        fetcher,
        ops
      );
      mutate((oldData) => myDeleteTransformFunction(oldData, deletedItem), false );
    });

1. Because everything is using bound hooks you can't loop though hooks so this wouldn't work, so I would have to write out loads of hooks in a really verbose way which isn't very elegant and the more feed types I have the more the code will grow. is there a more elegant way to do this?
2. I am also thinking that each time I run useSWRInfinite, is it calling the API every single time?

May be I could import {mutate} I'm assuming this is not a hook and I can update global caches with a loop like this:

     import {mutate} from 'swr'

     const feedItemTypes= [
       'feeditems',
       'donations',
       'posts',
       'milestones',
     ];

    feedItemTypes.forEach((feedItemType) => {
    const key = createFeedItemsUrl({
            pageId,
            currentPage: 1,
            itemsPerPage,
            type: feedItemType,
          });
    mutate(key, (oldData) => myDeleteTransformFunction(oldData, deletedItem), false );
    });

However, this doesn't work because:
3) I don't know what the key for the useSWRInfinite caches would be, I'm assuming it's the first page
4) I don't know if I am updating the paginated cache from useSWRInfinite correctly. The cache I get back from the useSWRInfinite bound mutate seemed to return an array and the cache I get back from the unbound mutate seems to be an object.

Any pointers would be massively appreciated, I would imagine that updating multiple caches for overlapping filtered infinite loading lists would be a fairly common use case.

[Develliot]

@shuding this is probably one for you, massive kudos for your work on useSWRInfinite it's awesome.

[em]

I've dealt with a simular issue by mutating with useEffect and passing the mutator functions to all the "filtered lists"

Essentially:

let useOptimistic = (mutate, mutators) => {
   mutators.map(fn => { React.useEffect(() => mutate(fn), fn) })
}

let FilteredList = ({mutators}) => {
  let {data, mutate} = useSWRInfinite(...)
  useOptimistic(mutate, mutators)
}

let ManyFilteredLists = () => {
   let [globalMutations, setGlobalMutations] = React.useState()
   let [globalMutations, setSpecificMutations] = React.useState()
   
   setGlobalMutations(() => {}) ... optimistic mutator fn
   
   <FilteredList mutators=[globalMutations, specificMutations] />
   <FilteredList mutators=[specificMutations] />
}

[Develliot]

Hoping he discussion on #1156 will eventually lead to a documented solution, for now I'm having to use an undocumented solution which might break with future updates

something like this:

    // TODO cache.serializeKey is an undocumented SWR method 😬.
    const [swrInfiniteKey] = cache.serializeKey(["inf", initialKey]);
    const otherTabCache = cache.get(swrInfiniteKey);
    // only update other tab cache if it exists
    if (otherTabCache) {
      mutate(
        swrInfiniteKey,
        removeItemFromCache(deletedItem, otherTabCache),
        false
      );
    }
    ```