useSWRInfinite with revalidateAll: true revalidates all pages when loading next page

[samnoyes]

This is a reopen of #590. I have added a repro in CodeSandbox. cc @shuding

Bug report

Description / Observed Behavior

I'm using useSWRInfinite with revalidateAll: true to revalidate all cached pages when component mounts or on focus. But it causes revalidation of all pages when loading next page.

const { size, setSize } = useSWRInfinite(
  (index) =`https://example.com/issues?page=${index + 1}`,
  fetcher,
  { revalidateAll: true }
);

return (
  <button onClick={() =setSize(size + 1)}>Load More</button
)

Clicking "Load more" button two times will cause 5 requests: https://example.com/issues?page=1 https://example.com/issues?page=2 https://example.com/issues?page=1 https://example.com/issues?page=2 https://example.com/issues?page=3

So loading N pages will cause N(N + 1)/2 requests.

Expected Behavior

I expect useSWRInfinite with revalidateAll: true not to revalidate all pages when loading next page but to revalidate all pages on focus, reconnect, mount etc (similar to useSWR hook).

Right now I can do something like this to achieve desirable behavior but it feels hacky:

const { size, setSize, mutate } = useSWRInfinite(
  (index) =`https://example.com/issues?page=${index + 1}`,
  fetcher
);

const latestMutate = useRef(mutate)
latestMutate.current = mutate

useEffect(() ={
  latestMutate.current()
}, [])

Additional Context

SWR v2.1.5

CodeSandbox Repro

Here is a repro of the issue. click load more with the network tab open and you will see N requests on each click

[BartoszTroszka]

Bumping that up as it is a needed feature! @shuding