infinite (beta): data becomes empty when using setSize and initialData

[hazae41]

Bug report

Description / Observed Behavior

useSWRInfinite behaves weirdly when there is some initialData and when I use setSize()

• it refetches the first page
• it sets data to an empty array

Expected Behavior

It should not

Repro Steps / Code Example

Here is my code:

function getKey(page: number, previous: Data | null){
  console.log("getKey", "page", page, "previous", previous)
  console.log("url", "/api/data?page=" + page)
  return "/api/data?page=" + page
}

const pages = useSWR<Data>(getKey,
  url => {
    console.log("fetching", url)
    return fetcher(url) 
  }, 
  { initialData: props.pages })

console.log("data", pages.data, "size", pages.size)

function loadMore(){
  console.log("loading more")
  pages.setSize(size => size + 1)
}

return <>
  ...
  <button onClick={loadMore}>
    load more
  </button>
</>

(props.pages is given by Next.js SSR and never changes between renders)

I get the following logs:

getKey page 0 previous null
url /api/data?page=0
data [{...}] size 1

... then after I click "load more"

loading more
getKey page 0 previous null
url /api/data?page=0
getKey page 0 previous null
url /api/data?page=0
fetching /api/data?page=0      <---------- this is the first issue
getKey page 0 previous null
url /api/data?page=0
data [] size 2                 <---------- this is the second issue
getKey page 1 previous {...}
url /api/data?page=1
fetching /api/data?page=1
getKey page 0 previous null
url /api/data?page=0
data [{…}, {…}] size 2

As you can see, data becomes an empty array for a short moment
This is a problem because the UI doesn't show anything within that moment

Additional Context

I use [email protected]

[shuding]

it refetches the first page

This is expected behavior. SWR infinite revalidates the first page when setting size, to ensure the entire list is fresh.

it sets data to an empty array

Possibly caused by #1343.

[huozhi]

@hazae41 Could you provide more details about your fetcher and how's the initialData look like? Will be nice to have a minial repro in codesanbox

[hazae41]

My fetcher is just fetch(url).then(res => res.json())

My initialData is an array with one element

[hazae41]

I did some tests and found the issue happens since 1.0.0-beta.11, everything is ok on 1.0.0-beta.10

[huozhi]

@hazae41 Could you help create a codesandbox or share a repo link? 🙏

[shuding]

I opened #1379 to fix this.

[hazae41]

I did some tests and found the bug happens when:

• using setSize two times (clicking load more two times)
• using setSize too fast after the first render (putting loadMore in a useEffect)

https://codesandbox.io/s/crimson-darkness-gyjtc?file=/pages/index.tsx