Why does useSWRInfinite make 2 calls to the backend for every request?

[grantspilsbury]

I have a load more button, within a brand new nextjs app, that uses useSWRInfinite. Every time I click it it makes 2 calls to my backend. The first call is with index 0 and the second is with the incremented index.

Here is my component:

function Home() {
  const { data, size, setSize } = useSWRInfinite(
    (index) => `/api/user?page=${index}&per_page=2`,
    (url) => fetch(url).then((r) => r.json()),
    { initialSize: 1 }
  )
  return <button onClick={() => setSize(size + 1)}>{'load more'}</button>
}

And here is my endpoint

export default (req, res) => {
  console.log('calling the backend with', req.query)
  res.send(200)
}

These are the logs after I've clicked the button 3 times:

calling the backend with { page: '0', per_page: '2' }
calling the backend with { page: '1', per_page: '2' }
calling the backend with { page: '0', per_page: '2' }
calling the backend with { page: '2', per_page: '2' }
calling the backend with { page: '0', per_page: '2' }
calling the backend with { page: '3', per_page: '2' }

Why does it call the backend with page / index 0 and then again with the correct incremented index?

[gfohl]

I have the same issue

[VewMet]

Mate, having the same issue. Its likely an swr bug. Made an infinite scroller and console logged pageIndex, and url from the fetcher function. If you see attached screenshots below (in order), you can easily spot the pattern. Needs to be reported.

[VewMet]

raised the issue:

#1638

[terminalqo]

#1552

[shuding]

The behavior is explained in #1401, there is also a new option revalidateFirstPage in 1.1.0 that controls it.

[maria-noaptes]

Hello! I also have this problem, I don't want to refetch the first page for every new page because it implies too big of a loading time for new data in my website.
For useInfiniteSwr I also have a refreshInterval of 10 seconds, but once I put revalidateFirstPage on false it doesn't update anymore in an interval.
Is there any way to have live updates but not revalidation for the first page at load more?