How do I make useSWRInfinite work with global fallback

[andreiv-shap]

Hi there!

I'm trying to use useSWRInfinite in a NextJS app. There I'm loading some data on the server, that I put inside the global config. The data is correctly picked up by useSWR but I'm not able to use it with useSWRInfinite. Setting the data in fallbackData, inside the hook call works, but I want to have a central place for setting up the prefetched/SSR data.

Here's an example built on the example found in the docs: https://codesandbox.io/s/swr-infinite-forked-6hbfsl.

I am adding some dummy data and putting it in the fallback of the global config:

<SWRConfig
  value={{
    fallback: {
      "https://api.github.com/repos/reactjs/react-a11y/issues?per_page=6&page=1": initialData
    }
  }}
>
  <App />
</SWRConfig>

To take advantage of this data and not automatically revalidate, I'm turning of some revalidation options on the useSWRInfinite call (this also helps visualise the issue):

{
  revalidateOnMount: false,
  revalidateOnFocus: false
}

Wha I see is that the data provided in the global fallback is not loaded/used by useSWRInfinite. If I change useSWRInfinite with useSWR (and change the key function, of course, with the corresponding string for the first page), the data in the global fallback is correctly used/displayed.

What am I missing here? What am I doing wrong and how should I go about using SS fetched data set on the global fallback when using useSWRInfinite?

(The codesandbox example is using 2.0..0-beta-7 but it behaves the same even on 1.3.0)

[koba04]

@andreiv-shap
useSWRInfinite uses a special format of key to store cache data, which means you have to use the key in fallback. You can get the key through an unstable API like the following.

import { unstable_serialize } from "swr/infinite";

<SWRConfig
  value={{
    fallback: {
      [unstable_serialize(page => `https://api.github.com/repos/reactjs/react-a11y/issues?per_page=6&page=${page + 1}`)]: initialData

    }
  }}
>
  <App />
</SWRConfig>

[andreiv-shap]

Hey @koba04,

Thanks a lot for your response. I need to find time to squeeze these changes in the next sprints and after that I'll update here and mark the answer.

I have a follow-up question though: why is the first page still being fetched, even though I specify the data for that key? When the "load more" button is pressed, 2 requests are being made: for the first page (unexpected, since I provide the data for that key) and for the second page (as expected).

https://codesandbox.io/s/swr-infinite-forked-dnixqo?file=/src/App.js

[lorenzomigliorero]

Same issue. To prevent the extra call for page 1, I've temporarily mutated the global cache with the fallback data from the server (note that unstable_serialize is not needed here):

useEffect(() => {
  mutate("/api/page/1", data);
}, [mutate]);

[JeongGeun]

Thank you, @lorenzomigliorero. Thanks to your comment, I was able to prevent additional calls for page 1. Additionally, I created a hook that gets fallback data corresponding to the infinite key from the global fallback and mutates it when the return type of getKey in useSWRInfinite is an object or array. I hope this helps those using complex keys with useSWRInfinite.

Article.jsx

import useSWRInfinite, {
  unstable_serialize as infinite_unstable_serialize
} from 'swr/infinite'
import { useSWRConfig, unstable_serialize } from 'swr'

function useSetInfiniteSwrInitialCache(getKey) {
  const { mutate, fallback } = useSWRConfig()

  useEffect(() => {
    const [fallbackData] = fallback[infinite_unstable_serialize(getKey)]
    mutate(unstable_serialize(getKey(0)), fallbackData, {
      revalidate: false
    })
  }, [mutate, fallback])
}

const getKey = index => {
  return {
    url: 'https://jsonplaceholder.typicode.com/posts',
    page: index + 1
  }
}

export default function Article() {
  const { data, error, size, setSize, isValidating } = useSWRInfinite(
    getKey,
    ({ url, page }) => fetch(`${url}/?_page=${page}&_limit=1`),
    {
      revalidateFirstPage: false
    }
  )
   useSetInfiniteSwrInitialCache(getKey)
   return <>...</>
}

page.js

import { unstable_serialize } from 'swr/infinite'
import { SWRConfig } from 'swr'

export const getServerSideProps = async () => {
  // Fetch data from external API
  const res = await fetch(
    `https://jsonplaceholder.typicode.com/posts?_page=1&_limit=1`
  )
  return {
    props: {
      fallback: {
        [unstable_serialize(index => {
          return {
            url: 'https://jsonplaceholder.typicode.com/posts',
            page: index + 1
          }
        })]: [res]
      }
    }
  }
}

export default function App({ fallback }) {
  return (
    <SWRConfig value={{ fallback }}>
      <Article />
    </SWRConfig>
  )
}