fix: data passed to refreshInterval function is not latest

[hong24]

fix: #2547

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit fc5f1b4:

Sandbox	Source
SWR-Basic	Configuration
SWR-States	Configuration
SWR-Infinite	Configuration
SWR-SSR	Configuration

[koba04]

@hong24 Thank you! Could you add a test for this?

[koba04]

I'd say this is a stale data problem, so I think this should be fixed by adding data into the dependency list of useIsomorphicLayoutEffect

[hong24]

There is an issue when data is a dependency: refreshInterval will be called twice
one time when data is changed,
the other time when revalidating successfully

[hong24]

I have other questions：

1. The first call to refreshInterval is with undefined. In my understanding, It's supposed to call refreshinterval after the first fetch is resolved and with the resolved data.
2. When the key is null, the fetcher will be not called, but refreshInterval will be called over and over again. According to the related source code, this problem may be expected but It's a little weird and unintuitive.

I'm currently just fixing the latest data, but for the above two issues, I don't have a good solution.

[koba04]

There is an issue when data is a dependency: refreshInterval will be called twice

Is this a problem? I think refreshInterval would be a pure function that returns an interval time, so it would be ok to be called twice. It seems to make sense to reset the timer when data has been changed.

[hong24]

I think this is a problem. Even a pure function called twice doesn't make sense, and the parameters of the refreshInterval call are different twice. Once with the latest data and once with the previous data.

[suutari]

I got hit by this issue today.

Additionally seems that there's another problem too: If the function passed to refreshInterval is staying unchanged between the useSWR calls, it seems to get called only once and that call is with the undefined data; but it won't get called anymore after the data arrives. As a workaround I can define the refreshInterval as a lambda so that it'll change between successive useSWR calls.

Here's an example from my current code, which tries to keep data of a job up-to-date with the refreshInterval:

export function useJobInfo(jobId: JobId | null)  {
  return useSWR(
    jobId ? `/jobs/${jobId}` : null,
    fetcher,
    {
      dedupingInterval: 250,

      // This doesn't work, since function would be called only once:
      //refreshInterval: jobId ? getRefreshIntervalOfJob : 0,

      // This is the workaround:
      refreshInterval: jobId ? (jobInfo) => getRefreshIntervalOfJob(jobInfo) : 0,
    }
  );
}

function getRefreshIntervalOfJob(jobInfo: JobInfo | undefined): number {
  ...
}

[suutari]

Additionally seems that there's another problem too: If the function passed to refreshInterval is staying unchanged between the useSWR calls, it seems to get called only once and that call is with the undefined data; but it won't get called anymore after the data arrives.

Actually, now that I checked again, have to correct my statement: It will be called again, if I return non-zero value from the function when it's called for the first time (with the undefined value). However, all successive calls are still done with the undefined value, even if the data is already fetched.

Seems like that the next function has the data stored in the closure and it won't update when refreshInterval function is called with the timer. The fix in this PR seems to help in my case too.

Any plans to release this fix?