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?

🚨 The basic correction is use new QueryClient() ounce in app (App.js) 🚨 use useQueryClient() in other part of app to use same instance to update object — Mohsin Ejaz
– Mohsin Ejaz, Commented May 14, 2023 at 17:24

TkDodo · Accepted Answer · 2021-10-25 05:25:02Z

2

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

answered Oct 25, 2021 at 5:25

TkDodo

30.4k5 gold badges84 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Philip Enc Over a year ago

Apparently is not updating the data. I have the same issue. The only solution I found is to invalidate the current data. @TkDodo

TkDodo Over a year ago

show a codesandbox reproduction please

Jack lee · Accepted Answer · 2022-01-12 17:22:55Z

2

That's is an example from official documentation.

 const queryClient = useQueryClient()
 
 const mutation = useMutation(editTodo, {
   onSuccess: data => {
     queryClient.setQueryData(['todo', { id: 5 }], data)
   }
 })
 
 mutation.mutate({
   id: 5,
   name: 'Do the laundry',
 })
 
 // The query below will be updated with the response from the
 // successful mutation
 const { status, data, error } = useQuery(['todo', { id: 5 }], fetchTodoById)

https://react-query.tanstack.com/guides/updates-from-mutation-responses

answered Jan 12, 2022 at 17:22

Jack lee

471 silver badge5 bronze badges

Comments

Tomas Vancoillie · Accepted Answer · 2021-10-29 07:35:17Z

0

The data resolved from your fetcher function will populate the cache from react-query with your chosen query key.

This data is available when destructuring the useQuery hook or is available with the onSuccess callback.

It can be usefull to manually update the data as shown here: https://stackoverflow.com/a/68949327/1934484

// fetcher function
function getProducts() {
  // http call
  const { data } = await http.get<{ products: ProductT[] }>(/products);

  return data.products;
}

// data returned will be an array of products
const { data } = useQuery('products', getProducts, {
  onSuccess: (data) => {
    // data returned will be an array of products
  },
});

answered Oct 29, 2021 at 7:35

Tomas Vancoillie

3,8682 gold badges36 silver badges51 bronze badges

Collectives™ on Stack Overflow

setQueryData not updating the cache with React-Query

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related