Learn the fundamentals of React Query by going through the basic API and then implementing search in an employee tracking app.

To use React Query throughout your application you'll need to import and create a new instance of [QueryClient](https://tanstack.com/query/latest/docs/reference/QueryClient#queryclient) and pass that to the [QueryClientProvider](https://tanstack.com/query/latest/docs/framework/react/reference/QueryClientProvider) component in the root of your app. 

Setup React Query and QueryClientProvider

With the [useQuery](https://tanstack.com/query/latest/docs/framework/react/reference/useQuery#usequery) hook, you can make queries directly in your components! 

To get started you just need to provide a `queryKey` and a `queryFn`. 

Fetch and display server data using React Query useQuery hook

[React Query Devtools](https://tanstack.com/query/latest/docs/framework/react/devtools#devtools) provides a component that you can use to see and perform actions on every query in your app.

Configure React Query Devtools and inspect existing queries

As long as whatever you're using to fetch data returns a Promise, you can use it in the [useQuery](https://tanstack.com/query/latest/docs/framework/react/reference/useQuery#usequery) hook.

So when fetching data, you can use native `fetch`, `axios`, `ky`, or whatever else! 

Use fetch, axios, ky, or any other promise-based library within useQuery hook

React Query will narrow the type of your query results depending on its state. 

In this lesson, you'll dig into the types under the hood, and then conditionally render various messages based on the state of the query. 

Display loading, error and successful query state using React Query Type Narrowing

There are nuances between the three loading states provided by the `useQuery` hook:

- `isPending`: there's no data and a query hasn't been made yet. 
- `isFetching`: the query is being fetched
- `isLoading`: there's no data, and there's a query currently being fetched. Notice that it's a combination of the above.

In this lesson, you'll learn where you'd want to use each of these states.

Use isPending, isLoading and isFetching flags with React Query

`useQuery` follows the rules of hooks. You can wrap it in a custom hook for convenience if you want to layer in some additional functionality.

Extract React Query useQuery into custom hooks

[queryOptions](https://tanstack.com/query/latest/docs/framework/react/reference/queryOptions#queryoptions) lets you pull the options of a query out into its own variable. This is useful because there are many cases where you'd need to reuse the options: re-fetches, running different query types, etc. 

Reuse Query Settings using the queryOptions API

React Query is smart with its caching. When you have a `useQuery` hook calling the same query in several places, React Query is going to already have the data pre-loaded for other components once the first one is rendered. 

It was also fetch data again once it becomes stale. 

Share fetched state across multiple components using React Query

By just calling the `useQuery` hook with each of your queries, you can have them all running in parallel. 

Implement Parallel Queries execution using multiple useQuery hooks within React Query

The React Query Devtools gives you several actions that you can manually trigger on your queries. 

These include:

- Refetch
- Invalidate
- Reset
- Remove
- Trigger Loading
- and Trigger Error

By using these actions you can manually test out your component's behavior with the various states of your queries.

Manipulate existing queries with React Query Devtools

In `queryOptions` you can set the `staleTime` of a query to set how long it takes for data to be considered stale and warrant a refetch. 

By default, React Query sets this value to `0`. 

But, different queries will need different times set depending on how often the data on the server is being updated.

Configure staleTime within React Query

`gcTime` stands for "garbage collection time" and it is the amount of time that must pass, when there are no components actively using a query, before the query is cleared from the cache.

It is set independently from stale time!

Configure gcTime (garbage collection) within React Query

The resulting data from your queries is simple to use in your components. You will just need to consider the fact that the data is potentially undefined and work around that. 

In this lesson, you'll see how data from a query can be filtered with client-side search. 

Implement a client-side search using React Query

In this lesson you'll see a few concepts from previous lessons come together! 

Instead of just filtering the resulting data from a query in a client-side search, you can actually make your queries dynamic and do that filtering server-side. 

Implement a server-side search using React Query

When handling your loading and error states, you don't always want to render a result in place of the entire component. 

In our server-side search component, since we are making a new query when we update our input, the entire component re-renders, including the search input itself. 

To fix this we'd move those conditional renders into a ternary inside the component render.

Use Type Narrowing without early function returns with React Query

To implement pagination you'll need to extend your search params type. 

You'll also want to set a default value for the page either on the http function level, or the query function level depending on the design of your application. 

You'll see how nice React Query's caching is when you quickly click back and forth through the pages and see the results immediately, since we set the garbage collection to take a few seconds in a previous lesson!

Simplify State Management with React Query

Instructor

Course content (17 lessons)

Instructor