Swr: Support for `React-Native`

[karlmarxlopez]

Hi, I read the code and you're using ReactDOM. I wonder if you plan to support React Native?

[n3tr]

I can help take a look on this one

[karlmarxlopez]

@n3tr I've checked your PR, would it be better if you programatically detect if the environment is web or mobile? Instead of hardcoded imports from react-native? Or separate path for import for react-native, for example import useSwr from '@zeit/swr/react-native'?

[Jarred-Sumner]

For projects using react-navigation, it'd be possible to support revalidateOnFocus and refreshWhenHidden via useIsFocused or useFocusEffect I think. That would likely be a separate package since not all react-native projects use react-navigation.

[cristianrosu]

Any update on support for React Native?

[nandorojo]

Any update on support for React Native?

It's already working in React Native.

[nandorojo]

For projects using react-navigation, it'd be possible to support revalidateOnFocus and refreshWhenHidden via useIsFocused or useFocusEffect I think. That would likely be a separate package since not all react-native projects use react-navigation.

@Jarred-Sumner Have you seen anyone implement this already for react-navigation? If not, I would be happy to help.

[arnaudschlupp]

Using https://reactnative.dev/docs/appstate to enable revalidateOnFocus and refreshWhenHidden could work I think:

1. When appState go to background -> refreshWhenHidden
2. When appState go to active -> revalidateOnFocus

What do you think?

[mrgiacomini]

For projects using react-navigation, it'd be possible to support revalidateOnFocus and refreshWhenHidden via useIsFocused or useFocusEffect I think. That would likely be a separate package since not all react-native projects use react-navigation.

@Jarred-Sumner Have you seen anyone implement this already for react-navigation? If not, I would be happy to help.

Did you do any implementation for this?

[jbowa]

For projects using react-navigation, it'd be possible to support revalidateOnFocus and refreshWhenHidden via useIsFocused or useFocusEffect I think. That would likely be a separate package since not all react-native projects use react-navigation.

@Jarred-Sumner Have you seen anyone implement this already for react-navigation? If not, I would be happy to help.

Did you do any implementation for this?

+1

[kuasha420]

@Jarred-Sumner @mrgiacomini @jbowa

How about this?

import { useCallback, useRef, useEffect, useMemo } from 'react';
import { useFocusEffect } from '@react-navigation/native';
import useSWRLib, { keyInterface, responseInterface, ConfigInterface } from 'swr';
import { fetcherFn } from 'swr/dist/types';

export default function useSWR<Data = any, Error = any>(
  key: keyInterface,
  fn?: fetcherFn<Data>,
  config?: ConfigInterface<Data, Error>
): responseInterface<Data, Error> {
  const query = useSWRLib(key, fn, config);

  const isMountedRef = useRef(false);

  const revalidateOnFocus = useMemo(() => {
    if (config && config.revalidateOnFocus === false) {
      return false;
    }
    return true;
  }, [config]);

  useFocusEffect(
    useCallback(() => {
      // do not refetch when query is initially mounted
      if (isMountedRef.current && revalidateOnFocus && query.revalidate) {
        console.log('Revalidating on focus!');
        query.revalidate();
      }
    }, [query, revalidateOnFocus])
  );

  useEffect(() => {
    isMountedRef.current = true;
  }, []);

  return query;
}

[nandorojo]

I've published @nandorojo/swr-react-native on npm. It adds compatibility for focus events, reconnection, and react navigation.

Link: https://github.com/nandorojo/swr-react-native

The usage is as simple as:

- import useSWR from 'swr'
+ import useSWRNative from '@nandorojo/swr-react-native'

You can also use it like this:

import { useSWRNativeRevalidate } from '@nandorojo/swr-react-native'

const { data, revalidate } = useSWR(key, fetcher)

useSWRNativeRevalidate({
  // required: pass your revalidate function returned by SWR
  revalidate

  // optional, defaults copied from SWR
  revalidateOnFocus: true,
  revalidateOnReconnect: true,
  focusThrottleInterval: 5000,
})