writing-react-query

React Query manages server state by handling data fetching and caching, keeping it distinct from global client state. This separation prevents redundant state management and ensures your UI updates seamlessly when server data changes.

The best way to configure React Query cache is by setting appropriate `staleTime` and `gcTime` values within your `useQuery` hooks. This controls how long fetched data remains fresh and when it gets garbage collected.

You should use `.mutate()` with callbacks instead of `.mutateAsync()` to handle mutations safely. This approach prevents unhandled promise rejections and promotes the creation of thin, dedicated mutation hooks for better error handling.

Invalidate queries in React Query by triggering query invalidation within your `.mutate()` callbacks. This ensures the cache is marked as stale and automatically refetches active queries to reflect the updated server state.

Yes, React Query works with Zustand by separating server state from client state. You use React Query for API integration and data fetching, while using Zustand specifically for managing global client state.