Bound mutate only working when passed as props

[joshiain]

I have written a reusable hook as follows:

import useSWR, { cache } from "swr";

const revalidationOptions = (url) => ({
  revalidateOnFocus: false,
  revalidateOnMount: !cache.has(url),
  revalidateOnReconnect: false,
  refreshWhenOffline: false,
  refreshWhenHidden: false,
  refreshInterval: 0,
});

function useData(id) {
  const { data, error, mutate } = useSWR(
    ["/api/v1/data", id],
    fetcher,
    revalidationOptions(["/api/v1/data", id])
  );

  return {
    data: data,
    setData: mutate,
    isLoading: !error && !data,
    isError: error,
  };
}

I am trying to mutate the data directly with data returned from a POST request rather than simply forcing a revalidation since I already have the new data from the POST request:

setData((prevData) => {
        return prevData.concat({
          ...response.data.result,
        });
      }, false);

But the setData bounded mutate from my hook doesn't appear to be updating/refreshing data on my page when i import this hook directly in to child components and call the bounded mutate when mutating the data correctly.

However it works if I import the hook to the parent and pass setData down as props to all the children. But this is not ideal as some of the children that use this are quite deep.