revalidateOnMount not working on react-native

[svenlombaert]

Bug report

Description / Observed Behavior

I added revalidateOnMount option to useSWR, but it doesn't seem to revalidate, no requests get fired after I open a screen for the second time.

Expected Behavior

It should revalidate all requests when re-opening screen

Repro Steps / Code Example

I tried to prove the bug, but here I have the complete opposite behaviour. Can't turn the revalidation off 😕

https://snack.expo.io/@svrnlombaert/thoughtful-apple

[svenlombaert]

Okay so I was logging a bit more, and I think I know what's happening. RN uses a polyfill for the window object (https://github.com/facebook/react-native/blob/master/Libraries/Core/setUpGlobals.js), and I see that there's a check like this in useSWR:

// trigger a revalidation
        if (config.revalidateOnMount ||
            (!config.initialData && config.revalidateOnMount === undefined)) {
            if (typeof latestKeyedData !== 'undefined' &&
                !IS_SERVER &&
                window['requestIdleCallback']) {
                // delay revalidate if there's cache
                // to not block the rendering
                window['requestIdleCallback'](softRevalidate);
            }
            else {
                softRevalidate();
            }
        }

So problem is is that IS_SERVER is returning false (I think, because RN sets up 'window' by itself) and the softRevalidate gets queued by window.requestIdleCallback but never actually executed.

EDIT:
Seems like I'm running into this issue. Might not be an issue with the library after all!
facebook/react-native#28602

[huozhi]

hey @svenlombaert thanks for reporting this!
I've filed a PR #473 for it to polyfill requestIdleCallback on other non-browser but javascript runtime (like RN). I think it might solve your issue.

[svenlombaert]

Well actually RN polyfills it, it's just not getting executed on their side since v0.62.2 (facebook/react-native#28602). So not sure if anything needs to change to be honest?

You can see requestIdleCallbackright here https://github.com/facebook/react-native/blob/master/Libraries/Core/Timers/JSTimers.js#L295 and they put it on the 'window' right here: https://github.com/facebook/react-native/blob/master/Libraries/Core/setUpTimers.js#L32 using the `polyfillGlobal'.

So since window. requestIdleCallback does exist in RN, that PR won't fix much, I think?

[huozhi]

sounds more like a bug on RN side?
I guess there's another way to work around: override window.requestIdleCallback with setTimeout in your RN app. is that doable? like

window.requestIdleCallback = (fn) => setTimeout(fn, 1)

[huozhi]

@svenlombaert I just tried your demo, config useSWR with the following options which are borrowed from #450

revalidateOnMount: true,
revalidateOnFocus: false,
revalidateOnReconnect: false,
refreshWhenOffline: false,
refreshWhenHidden: false,
refreshInterval: 0

and test it with an iphone device, it works for me (each toggle on will revalidate the user). but I saw the version of swr is 0.2.0, could you confirm is it still reproducible with the latest version of swr? since revalidateOnMount is added in 0.2.1

[svenlombaert]

I upgraded to the latest version of swr (0.2.3) and it's still not working. I can confirm the above snack is working when upgrading to 0.2.3, so I'm pretty sure it's the react-native issue we're running into. Feel free to close this issue.

[matt-oakes]

Just to cross post this here, I have found the issue that's causing this and submitted a PR to fix it. It's easy to fix this yourself using patch-package.

[AlexanderKaran]

Hi, is there any update on this? I can see the PR is still open in ReactNative

[huozhi]

Close this as it's more like a react native runtime issue