Use useSWRInfinite in multiple locations

[rinkstiekema]

I would like to use data coming from useSWRInfinite in multiple locations. The first location would be at a central hook which prefetches data. The second location is the page where the data is actually used.

The hook which allows prefetching. API is a function which exposes many different endpoints.

const usePrefetch = (id: string) => {
  const {Api} = useBackend();
  const {data, error, mutate, isValidating, revalidate} = Api.useData(id);
  
  useEffect(() => { 
    if (isValidating && id !== data?.id) setLoading(true);
    if (data && !isValidating) {
      setLoading(false);
    }
  }, [data, isValidating, id]);
  
  return {data, error, mutate, loading, revalidate}
}

API.useData looks like this:

useData: (id: string): SWRInfiniteResponseInterface => {
    const getKey = (index: number, previousPageData: any) => {
        if (previousPageData && previousPageData.hasMore === false) return null;
        if (id) {
            return ['dataEndpoint', id, index] as any[];
        } else {
            return null;
        }
    }

    return useSWRInfinite(getKey, (url, id, pageIndex) => fetcher(url, {
        id,
        pageIndex
    }), {revalidateOnFocus: false});
}

The second place where Api.useData(id) is used, is the actual page and is similar to the example found here.

The behavior I am experiencing is that now the index argument in the getKey function is always 0, even when I use setSize from useSWRInfinite to set the size to any other number.

Is this expected behavior? Am I missing something? Or is this a bug?

Thanks, hope anyone can help!

[koba04]

Does API. useData work fine without the prefetch?
The index of the example you mentioned in the comment seems to work fine. Is there any difference between the example and your application?

It would be helpful if you have a CodeSandbox project to reproduce it.

[rinkstiekema]

Thank you for your response. I understand that a CodeSandbox project would be best. I'll see if I have some time to create something like that.

The useData function works fine without prefetch indeed. The issue is caused by the index that is passed as argument to the getKey function. The index is always 0 when the function is used in more than one location simultaneously.

[rinkstiekema]

I'm afraid that the issue is caused by something different than it being called from two locations. I've tried to reproduce it in a CodeSandbox, but couldn't. Consider this false alarm.