'React SWR - how to know that updating (mutating) is running?

Im mostly using SWR to get data, however I have a situation that I need to update data. The problem is, I need an indicator that this request is ongoing, something like isLoading flag. In the docs there's a suggestion to use

const isLoading = !data && !error;

But of course when updating (mutating) the data still exists so this flag is always false. The same with isValidating flag:

const { isValidating } = useSWR(...);

This flag does NOT change when mutation is ongoing but only when its done and GET request has started.

Question

Is there a way to know if my PUT is loading? Note: I dont want to use any fields in state because it won't be shared just like SWR data is. Maybe Im doing something wrong with my SWR code?

const fetcher = (url, payload) => axios.post(url, payload).then((res) => res); 
  // ^^^^^ its POST but it only fetches data

const updater = (url, payload) => axios.put(url, payload).then((res) => res);
  // ^^^^^ this one UPDATES the data

const useHook = () => {
  const { data, error, mutate, isValidating } = useSWR([getURL, payload], fetcher);

  const { mutate: update } = useSWRConfig();

  const updateData = () => {
    update(getURL, updater(putURL, payload)); // update data
    mutate(); // refetch data after update
  };

  return { 
    data,
    updateData,
    isValidating,               // true only when fetching data
    isLoading: !data && !error, // true only when fetching data
  } 


Solution 1:[1]

Hmm based on that: https://swr.vercel.app/docs/conditional-fetching

It should work that the "is loading" state is when your updater is evaluates to "falsy" value.

REMAINDER! I don't know react swr just looked into docs - to much time at the end of the weekend :D

At least I hope I'll start discussion :D

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 user432281