setQueryData not updating the cache with React-Query

Question

I have a very basic app where I'm trying to fetch some data, and update the cache. For example purposes I tried to update the data to an empty array, but on the dev tools and the console logs I keep getting the old data

function App() {
  const queryClient = new QueryClient();
  const { isLoading, error, data } = useQuery('repoData', fetcher, {
    onSuccess: (data) => {
      queryClient.setQueryData('repoData', () => []);
    },
  });

  console.log('data', data);

  return (
    <div className="App">
      <Home />
    </div>
  );
}

what would be the correct way to update the cache?

Answer 1

Why would you want to update the cache of the same item you have just successfully fetched? React-Query will put the result of the fetcher into the data field returned from useQuery - you don’t need to do anything in onSuccess for that