Why useSWRInfinite call my backend twice for every request?

Question

I have a load more button, within a brand new Next.js 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?

score 7 · Answer 1 · answered Mar 02 '22 at 02:31

Its a feature given in useSWRInfinite to validate first page before the call of every next page. post 1.1.0 version you can disable by setting

revalidateFirstPage : false

https://github.com/vercel/swr/releases/tag/1.1.0

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

Why do we need such a behavior (revalidateFirstPage) ? – Heil Programmierung May 16 '23 at 13:59 — Heil Programmierung, May 16 '23 at 13:59

score 1 · Answer 2 · answered Nov 04 '21 at 14:45

1

I think in swr.vercel.app (link to documentation) did mentioned about the response being a multiple one as shown below.

Maybe if you could specify in your getKey function that you just want to make one request (which I think defeat the purposes of using the useSWRInfinite - for pagination) like shown below:-

answered Nov 04 '21 at 14:45

lala

1,309
9
21

But it is only making 2 calls. One to index 0 and one to the current index. – grabury Nov 04 '21 at 20:39

Why useSWRInfinite call my backend twice for every request?

2 Answers2