T
TanStack•11mo ago
magic-amber

Refreshing Data After Deleting with useQuery Cache

Hi, I’m using useQuery to cache my data, but I want to ensure that the data is refetched after performing a delete operation. Currently, when I reload the page, the data is stale due to caching. What is the best way to trigger a refetch of the data after deleting an item? Should I use queryClient.invalidateQueries or is there a better approach? Thanks for your help!
3 Replies
absent-sapphire
absent-sapphire•11mo ago
That's the most straightforward way, yes: https://tanstack.com/query/latest/docs/framework/react/guides/invalidations-from-mutations
TanStack | High Quality Open-Source Software for Web Developers
Headless, type-safe, powerful utilities for complex workflows like Data Management, Data Visualization, Charts, Tables, and UI Components.
From An unknown user
From An unknown user
absent-sapphire
absent-sapphire•11mo ago
If you are deleting something from a list then you could do a partial update with setQueryData: https://tanstack.com/query/latest/docs/framework/react/guides/updates-from-mutation-responses
TanStack | High Quality Open-Source Software for Web Developers
Headless, type-safe, powerful utilities for complex workflows like Data Management, Data Visualization, Charts, Tables, and UI Components.
From An unknown user
From An unknown user
absent-sapphire
absent-sapphire•11mo ago
Something like: 
onSuccess({ id }) {
  queryClient.setQueryData(['todos'], oldData => oldData.filter(todo => todo.id !== id))
}
onSuccess({ id }) {
  queryClient.setQueryData(['todos'], oldData => oldData.filter(todo => todo.id !== id))
}

Did you find this page helpful?