How to set fallback with useSWRInfinite?

[ramirezsandin]

Hi everybody, I hope that someone can help me here.

I'm using Next with SSR and SSG, and for the normal useSWR hook I set all the initial data returning the props with the fallback object like this:

return {
  props: {
    fallback: {
      [unstable_serialize(key)]: data
  }
}

And then, in the _app file, I wrap the page components with the SWRConfig provider so the fallback data is set for every page, like this:

const {fallback, ...restProps} = pageProps

<SWRConfig
  value={{
    fallback: fallback ?? {},
  }}
>
  <Component {...restProps} />
</SWRConfig>

This is working and I have no problem at all.

But I'm using now this useSWRInfinite hook, and the initial data is not getting loaded.

I've tried returning the fallback like this:
[unstable_serialize(key)]: data
or like an array:
[unstable_serialize(key)]: [data]

and neither of them work.

The keys are the same, so it should get the initial data.
Is there maybe another SWRConfig provider for the infinite hook?. I've been looking in the documentation but it didn't find anything.

[luigi-derson]

I'm also having the same issue.

unstable_serialize should be imported from swr/infinite I think, which means it accepts a getKey function as parameter:

[unstable_serialize((size, prevData) => ['your', 'key', size ] )]: data or [data] ? Docs are not clear for swr/infinite case

But this is not working for me neither

UPDATE:
@ramirezsandin FYI

I did work now, my issue was that I was overriding the SWR config.

This is what it worked for me:

[unstable_serialize((size) => ['your', 'key', size ] )]: [data]

And in my useSWRInfinite file:

const swr = useSWRInfinite((key) => ['your', 'key', size ], fetcher, config)

[ramirezsandin]

Sorry for the late response! 🤗🤗

Thank you for the answer, I didn't know that unstable_serialize should be imported from swr/infinite.

Then basically the 'key' parameter must be a function with the page number as an argument.

[petedegraw]

@luigi-derson's answer worked for me as well. 👍

However, in the event that the key is an object, which was my case, it needs to be converted to a string in the same format that SWR uses. Here is how to do that for the fallback:

...
import { stableHash } from 'swr/_internal';
...

const keyObject = {...}

[unstable_serialize((size, prevData) =>  stableHash(keyObject))]: data