About the dangers of exporting mutate verbatim

[pke]

I miss the revalidate function exported from useSWR pre 1.0
I could be exported as a "refresh" function from the hook.

With 1.0 the function has been deprecated and its suggested to use mutate directly without any arguments. The problem is that this can introduce hard to catch bugs in your code (especially when you used revalidate before).

Lets consider this really useful hook:

export default function useInternetAddress(): Result {
  const {
    data: ip,
    revalidate,
  } = useSWR<string | Error, Error>(
    "https://ip.seeip.org",
    (url) =>
      fetch(url)
        .then((response) => response.text())
        .catch(() => new Error("Fehler")) // i81n
  )

  return [ip, revalidate]
}

and this usage

function InternetAddress() {
  const [ip, refresh] = useInternetAddress()

  return (
    <span onClick={refresh}>{ip}</span>
  )
}

When you press the span it should refresh the (external) IP address.

Now lets change the hooks implementation to update to swr >= 1.0

export default function useInternetAddress(): Result {
  const {
    data: ip,
    mutate,
  } = useSWR<string | Error, Error>(
    "https://ip.seeip.org",
    (url) =>
      fetch(url)
        .then((response) => response.text())
        .catch(() => new Error("Fehler")) // i81n
  )

  return [ip, mutate]
}

Leaving the client code unchanged upon clicking the span we will then see "[object Object]" as the text.
That is because, just as before, we simply re-export the mutate function from swr. Except that mutate takes arguments now, which revalidate didn't. And so it gets handed in the onClick handlers argument(s) which is the ClickEvent. That causes mutate to use the first argument to update the cache with this first argument.

We could fix this by changing the client code to this:

<span onClick={() => refresh()}>{ip}</span>

However, internal implementation details should not concern the user of a hook.

The correct hook would have to wrap the mutate function into a callback.

...
  const refresh = React.useCallback(() => mutate(), [mutate])
  return [ip, refresh]
}

I would like to understand if I got something wrong here?
What was the reason to remove the very convenient revalidate function in the first place?

We are using many swr hooks and all re-export a "refresh" function. We would have to change/check every one of them to no accidently export mutate in this faulty manor.

What is the recommend way to offer refresh to hook users when swr is involved?