Quickly learn to use React Query's `useQuery` and `useMutation` hooks. We'll discuss concepts like the `queryCache`, dependent queries, and wire up React Query's custom Devtools component. 

We're going to quick dive into how to utilize `useQuery` to fetch some data for us, set up a loading state, and display it in our JSX. We'll also wire up the React Query Devtools and discuss some features. 

Fetch REST data using React Query’s useQuery hook

Here we'll walk through how to make a query wait until some action is taken to fire. We'll also touch on a few different options that React Query has built in to handle dependent queries.

Use Dependent Queries to delay React Query's useQuery from firing on render

We will be utilizing both `useMutation` and `queryCache` to set up a new favorites list. The `queryCache` will act as a "store" and allow us to use `useMutation` to update values and display a new list of favorites that we created from our characters query.

Use React Query's useMutation and queryCache

One of React Query's biggest strength is it's flexibility when dealing with asynchronous data. We will take a previously REST based app and plug in `graphql-request` to use GraphQL within our `useQuery`

Use GraphQL with React Query's useQuery 

When working with data, sometimes you'll find yourself needing to deal with pagination. Usually this can be quite the cumbersome task, but not with `react-query`! It provides you with a hook named `usePaginatedQuery` where we can use things like `resolvedData` that will either resolve to the latest page's data or if fetching a new page, the last successful page's data. We will send a paginated query with Graphql and wire it up to buttons that allow us to switch back and forth between paged data.

Use React Query's hooks to query and mutate data in your React components

Instructor

Course content (5 lessons)

Instructor