Simplify State Management with React Query

Overview

When dealing with external data in React it's easy for the async code to start piling up, your types to become a mess, and your component state to get out of hand. React Query (a.k.a TanStack Query) takes care of all this for you. Even if you just learn the basics you'll be able to clean up your code and get to take advantage of some really nice caching features. In this course you'll learn all of this in under an hour: - How to organize the different layers of code involved in data fetching - Conditional rendering based on various query states - How to effectively use TypeScript with React Query - Sharing fetched data across components - Executing parallel queries - Analyzing queries with the dev-tools - Easy stale-time and garbage collection config - Creating reusable settings with the queryOptions API [Click here to get started!](https://egghead.io/lessons/react-setup-react-query-and-queryclientprovider)

Syllabus

Setup React Query and QueryClientProvider
Fetch and display server data using React Query useQuery hook
Configure React Query Devtools and inspect existing queries
Use fetch, axios, ky, or any other promise-based library within useQuery hook
Display loading, error and successful query state using React Query Type Narrowing
Use isPending, isLoading and isFetching flags with React Query
Extract React Query useQuery into custom hooks
Reuse Query Settings using the queryOptions API
Share fetched state across multiple components using React Query
Implement Parallel Queries execution using multiple useQuery hooks within React Query
Manipulate existing queries with React Query Devtools
Configure staleTime within React Query
Configure gcTime (garbage collection) within React Query
Implement a client-side search using React Query
Implement a server-side search using React Query
Use Type Narrowing without early function returns with React Query
Implement a server-side pagination using React Query