useSWRInfinite with first page as initial data

[horgen]

Bug report

Description / Observed Behavior

Let's say I have an API that returns multiple feeds. The response looks like this:

[
  {
    self_uri: '/api/feed/1',
    page: 1,
    items: ['item', 'item', 'item'],
  }, {
    self_uri: '/api/feed/2',
    page: 1,
    items: ['item', 'item', 'item'],
  }
]

As you can see, this contains the initial data for the first page of each feed.

I am trying to find out if there is an official way to add the first page as the initial data. This is the closest I have gotten so far:

const { ... } = useSWRInfinite(getKey, fetcher, {
    fallbackData: [initialData],
    revalidateOnMount: false,
  }
);

revalidateOnMount: false will disable the first page call when the component mounts. But when it fetches the next page, it will also refetch the first page that is already set in fallbackData. I want this to happen when I trigger a revalidate (e.g. on mutate), but not when setSize() is triggered.

I know this may be connected to why you renamed initialData to fallbackData in an earlier version.

Expected Behavior

Initial data added to useSWRInfinite should be added to the cache(?) so it doesn't trigger unnecessary API calls.

Repro Steps / Code Example

I've set up an example of this use case on CodeSandbox

Open the console to get more details about the "API" calls.

Additional Context

I'm not really sure if this is a bug, a use case you are not supporting by design or if it's me that don't understand how to solve this.

[VladimirMikulic]

This should definitely be implemented. It's a very common scenario where we e.g. via getServerSideProps provide initial data (page 1) for the feed/gallery/any infinite scroll feature. Page 1 should not be refetched given it's already cached.