useSWRInfinite loses initialData

Hi, with the deprecated useSWRPages I were able to set initialData (from my Next.js static props) and load only the next pages. I’d like to do the same with the new useSWRInfinite but if I set the initialData, this is lost after the next load; here an example:

https://codesandbox.io/s/swr-infinite-initial-data-00qk4

I tried also to set initialSize: 0 but with no luck :\

In the meantime I’m chaining the initialData with the result data

Thanks

[shuding]

initialData was renamed to fallbackData in SWR 1.0 to avoid confusion. With useSWRInfinite, if there’s no fetched result yet the fallback will be returned:

const { data } = useSWRInfinite(getKey, fetcher, { fallbackData: [1, 2, 3] })

It should return the following data when rendering:

[1, 2, 3] // still fetching, fallback returned
[page1] // fetched page 1

And when loading the next page,

[page1, page2]

There will not be a [page1, 2] state.

[koba04]

According to https://github.com/vercel/swr/pull/894#issuecomment-759645838, it is expected that SWR doesn’t store initialData into the cache.

But I also understand that there are developers who expect that initialData is stored into the cache. The following is a test case that is based on #894, but it avoids sending a request for the first page. This returns initialData from the fetcher function if the request is for the first page.

  it('should re-use initialData and store it in the cache', async () => {
    const dummyResponses = {
      '/api?page=1': ['page-1-1', 'page-1-2'],
      '/api?page=2': ['page-2-1', 'page-2-2']
    }
    let requests = []
    const initialData = [dummyResponses[`/api?page=1`]]

    function Page() {
      const { data, size, setSize } = useSWRInfinite<string[], string>(
        index => {
          return [`page-test-11`, `/api?page=${index + 1}`]
        },
        async (_, index) => {
          const isInitialPage = index === `/api?page=1`;
          await new Promise(res => setTimeout(res, 100))
          if (isInitialPage) {
            return initialData[0]
          }
          requests.push(index)
          return dummyResponses[index]
        },
        {
          initialData,
        }
      )
      return (
        <div
          onClick={() => {
            // load next page
            setSize(size + 1)
          }}
        >
          {(data ? [].concat(...data) : []).join(', ')}
        </div>
      )
    }

    const { container } = render(<Page />)

    // render with the initialData
    expect(container.textContent).toMatchInlineSnapshot(`"page-1-1, page-1-2"`)
    expect(requests).toEqual([]) // should use the initial data
    fireEvent.click(container.firstElementChild)

    await screen.findByText('page-1-1, page-1-2, page-2-1, page-2-2')
    // The response for `page=1` should be reused from the cached data
    expect(requests).toEqual(['/api?page=2'])
  })

It would be nice if this is helpful for you.