Dependent useSWRInfinite

[jackocnr]

Similar to Dependent fetching with useSWR, can you have a useSWRInfinite which depends on the data returned from another useSWRInfinite?

It doesn't seem to work for me - in the getKey function for the second useSWRInfinite, if I try and access the data from the first useSWRInfinite, it always seems to be out-of-date.

I forked the CodeSandbox for the useSWRInfinite example and added a simple second useSWRInfinite call which uses the data from the first, with a console.log statement in the getKey function to see what it's getting. If you open the console, and click the "Load more" button to load page 2 of results, in this case we'd expect the getKey function to be called with index=1 and we should have access to the second page of data, so we should see data.length=2, but unfortunately that never happens.

The workaround I've found is to use a ref (useRef) to store the data first, and then in getKey if I use ref.current to access the data, it works - I get the latest data (it gets called with index=1 and data.length=2), so it seems like a closure problem, but then I wonder why that doesn't affect the useSWR example, linked above? And I wonder if this is a safe workaround, or if this feature is just not supported and should be avoided.

Thanks so much for any thoughts.

[shuding]

I checked your sandbox and think that's expected. Because when the data of the first useSWRInfinite hook updates, the first page of the second useSWRInfinite still returns the same key and data, so SWR skips fetching the second page.

That's an optimization for most infinite scrolling scenarios like FB or Twitter. If the first page doesn't change, we don't revalidate the second one.

To make that dependent work, you can simply return the dependency as a part of the key (make it an array):

return [`https://api.github.com/repos/${repo}/issues?per_page=${PAGE_SIZE}&page=${
      index + 1
    }&first_issue_for_current_page=${data[index][0]}`, data.length]

But you don't need to use it, just take the first argument for fetcher:

url => fetcher(url)

Here's an example, hope that helps: https://codesandbox.io/s/swr-infinite-forked-c7uut

[jackocnr]

@shuding thanks so much for your reply. You're right, adding the data.length to the key fixed the issue in that CodeSandbox, BUT strangely if you upgrade the version of SWR used in package.json from 0.3.0-beta.6 to the latest (0.3.9) then it stops working again! In fact if you upgrade it just to 0.3.0 it breaks. Any thoughts there?

By the way, in case it's useful, here's a fork with a slightly more realistic use case, where in the second useSWRInfinite I'm fetching the issue details for the issue fetched in the first useSWRInfinite (with PAGE_SIZE=1 to keep things simple), and then I'm displaying the fetched data in the page - I'm showing the created_at date next to the issue title, so you get visual feedback of if it's working or not.