Automatically refetch data

strategy type

use hook

Before using extension hooks, make sure you are familiar with the basic use of alova.

Automatically fetch data through browser events or polling, allowing the interface to display the newest data.

Features

• Supports refetching the newest data in scenarios such as browser focus, tab switching, network reconnection, polling requests, etc;
• Supports request throttling, only one request will be sent if triggered multiple times in a short period of time;
• Support custom event listening functions to adapt to usage scenarios in non-browser environments;

Basic usage

By default, the useAutoRequest hook that automatically fetches data will fetch the newest data when the browser becomes visible, hidden, or focused, or when the network reconnects, and it will automatically stop listening when the component is unmounted.

import { useAutoRequest } from 'alova/client';

const { loading, data, error } = useAutoRequest(() => method());

The return value of useAutoRequest is the same as useRequest.

In addition to supporting all the configuration options of useRequest, it also supports the following auto-fetch configuration options. You can enable or disable specific events through these options, or adjust the request throttling.

const { loading, data, error, onSuccess, onError, onComplete } = useAutoRequest(
  () => method(),
  {
    /**
     * Browser display hide trigger
     * @default true
     */
    enableVisibility: true,

    /**
     * Triggered by browser focus
     * @default true
     */
    enableFocus: true,

    /**
     * Triggered by network reconnection
     * @default true
     */
    enableNetwork: true,

    /**
     *Throttling time, only one request will be sent if triggered multiple times within a certain period, unit ms
     * @default 1000
     */
    throttle: 1000,

    /**
     * The time of polling request, effective when set greater than 0, unit ms
     * @default 0
     */
    pollingTime: 2000

    //Other parameters are the same as useRequest...
  }
);

caching advice

It is recommended to turn off the cache of the corresponding request when using useAutoRequest, because when the cache is set, the cache will be hit when the automatic request is triggered and the newest data cannot be obtained. Please read Cache Mode for details.

Pause request

When the user leaves the page but the component is not destroyed, useAutoRequest will continue to request in the background. If you want to pause the request in this case, you can implement it in middleware.

let pause = false;
useAutoRequest({
  // ...
  middleware(_, next) {
    if (!pause) {
      next();
    }
  }
});

You can pause or resume the automatic request by controlling the pause variable.

Custom listening functions

The above 4 methods of automatically fetching data are implemented by listening browser's events by default. When used in a non-browser environment, you may need to customize the listening function. This function receives the notify function and the use hook config as parameters, and returns a function to stop listening.

The following is an example of a custom listening function in react-native:

Network reconnection custom function

import NetInfo from '@react-native-community/netinfo';
useAutoRequest.onNetwork = (notify, config) => {
  const unsubscribe = NetInfo.addEventListener(({ isConnected }) => {
    isConnected && notify();
  });
  return unsubscribe;
};

Polling custom function

useAutoRequest.onPolling = (notify, config) => {
  const timer = setInterval(notify, config.pollingTime);
  return () => clearInterval(timer);
};

App switching custom function

import { AppState, Text } from 'react-native';
useAutoRequest.onVisibility = (notify, config) => {
  const subscription = AppState.addEventListener('change', state => {
    state === 'active' && notify();
  });
  return () => subscription.remove();
};

App focus custom function

Since the App doesn't have a focus event, it can be set to an empty function to avoid throwing an error.

useAutoRequest.onFocus = (notify, config) => {
  return () => {};
};