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
Practical React Query
Let me share with you the experiences I have made lately with React Query. Fetching data in React has never been this delightful...
https://tkdodo.eu/blog/practical-react-query
hydration
dehydrate creates a frozen representation of a cache that can later be hydrated with Hydrate, useHydrate, or hydrate. This is useful for passing prefetched queries from server to client or persisting queries to localStorage or other persistent locations. It only includes currently successful queries by default.
https://react-query.tanstack.com/reference/hydration
