Support conditional fetching in useSWRInfinite

[em]

I've tried passing null instead of a getKey function to useSWRInfinite. Also tried returning null from getKey.

In both cases, this results in a deadlock where no additional pages will be loaded when setSize is used to increase the size.

[wildfrontend]

@em maybe you can try
const loadMore = useCallback(() => setSize(state=> state +1),[setSize])

but another case is when fetch request error, useSWRInfinite will also return infinite loop

[em]

Thanks wildfrontend. I was able to workaround before I filed the issue by just restructuring things with wrapper components. Conditional fetching in useSWR is really just sugar anyway and the same thing can be accomplished by conditional rendering, it can just make your component IA not very nice. I filed the issue because it's a nice-to-have feature request for useSWRInfinite to have parity with useSWR.

As an aside - there are a lot of caveats with useSWRInfinite, some are addressed in the original PR, but not documented in the official docs. Would be really nice for those to be big disclaimers at the top.

[shuding]

FYI you can pass null as the first argument to useSWRInfinite and it will pause data fetching. Can you provide a reproduction?

[dev-smart-ui]

Hi I have same problem , if chat id undefined on first render , useSWRInfinite send requests on second render receive data from API , but const {data }=undefined even if i see data in network tab google chrome

  const { data, error, isLoading, isValidating, mutate:mutateCurrentChat, size, setSize } =
    useSWRInfinite<IConversation>(
      (pageIndex, previousPageData) => { 
        if (previousPageData && !previousPageData.length) return null; // reached the end
        if (!chatId) return null;
        return `${API.singleChat(chatId)}?page=${pageIndex + 1}&page_size=20`;
      },
      fetcher,
      {
        focusThrottleInterval: 8000,
        refreshInterval: 150000,
      }
    );