Seonglae ChoReact Query
Starting with v4, react-query is now available as TanStack Query
Query and Mutation should not be confused because of their names, and the selection criteria between the two should not be based on data updates/fetching. Rather than focusing on superficial definitions, it's fundamentally about the difference between synchronization and persistence. The key selection criteria should be whether you need a one-time request or continuous automatic state tracking and synchronization.
Ready query is also a kind of mutation query layer, where query uses Declarative Programming to declare what to fetch and it automatically retrieves the data, while mutation uses Imperative Programming to fetch data in response to a specific action.
staleTime: The time that data remains in a 'fresh' state.
gcTime:The time before unused queries are removed from the cache.
refetchOnWindowFocus: Automatically refreshes data when the user reactivates the browser tab.
- Using Query Key like a dependency array → automatically refetches when the key changes.
- Improving UX with initialData → shows filtered data from existing cache in advance.
TanStack Query Usages
