React Query - Essentials

Learn the ins and outs of React Query

Recommended by Teachable

The official and exclusive guide to mastering server-state in your applications, straight from the original creator and maintainer of the library.

$

200

FREE

$

150

$

200

  • Have a better understanding of server-state and its unique challenges, patterns and how to solve for them
  • Be a master of caching, and have the tools and knowledge to configure it, instead of implementing it by hand yourself.
  • Know the entire core React Query API and how to pragmatically use all of its unique features in your applications
Teachable Best Price Guarantee™

If you find it cheaper anywhere else, we'll refund you the difference.

Price:

$

200

FREE

$

150

Teachable Best Price Guarantee™

If you find it cheaper anywhere else, we'll refund you the difference.

Your Outcome

Data Fetching in React sucks.

You've likely tried countless "global state" libraries, useFancyPromise hooks and maybe even attempted to write your own solutions only to end up back in the same place: Writing TONS of code to handle seemingly endless data fetching scenarios. But WHY?

Server state and client state are fundamentally different.


Server state:

  1. Is persisted remotely in a location you do not control
  2. Requires asynchronous APIs for fetching and updating
  3. Implies shared ownership and can be changed by others without your knowledge
  4. Will eventually become "stale" or "outdated" during the lifecycle of your app.



So, it's time we stop trying to force server-state into our client-state tools and instead, harness the power of its unique challenges for our benefit:


  • Caching... (possibly the hardest thing to do in programming, but game-changing)
  • Deduping multiple requests for the same data into a single request
  • Updating out of date data in the background
  • Controlling when data is "out of date"
  • Performance optimizations like pagination and lazy loading data
  • Managing memory and garbage collection of server state
  • Optimistic updates and rollbacks for "instant" UI and user experiences.


React Query turns these challenges into powerful features.


It is the best tool available for solving all of these issues out-of-the-box, with zero configuration, and allowing for fine-grained customization as your application grows.

What will I learn?

In this course, you will learn how to wield React Query as your go-to weapon of choice for defeating and overcoming the challenges and hurdles of server state. You will learn to control your asynchronous data in your apps before it starts to control you.

At the end of this course, you will:

  • Have a better understanding of server-state and its unique challenges, patterns and how to solve for them
  • Be a master of caching, and have the tools and knowledge to configure it, instead of implementing it by hand yourself.
  • Know the entire core React Query API and how to pragmatically use all of its unique features in your applications

React Query and the concepts you learn will help you:

  • Remove many lines of complicated and misunderstood data fetching code from your application and replace them with just a handful of lines of React Query logic.
  • Make your application more maintainable and easier to build new features without worrying about wiring up new server state data sources
  • Have a direct impact on your end-users by making your application feel faster and more responsive than ever before.


React Query is trusted in production by developers at:

Google, Walmart, PayPal, Amazon, Microsoft, Target, CarFAX, HP, MLB, Volvo, Ocado, UPC.ch, EFI.com, ReactBricks, Nozzle.io

What Students Say

No items found.

Introduction

  • Introduction
  • Installing React Query (0:38)

Queries

  • Basic Queries (3:19)
  • Query Loading State (1:39)
  • Query Error State (1:49)
  • React Query Devtools (1:56)
  • Automatically Refetching Queries on Window Focus (1:27)
  • Query Refetching Indicators (0:53)
  • Configuring Query Stale Time (1:23)
  • Configuring Query Cache Time (2:32)
  • Query Keys and Caching (2:04)
  • Using Custom Hooks to Share and Reuse Queries (2:42)
  • Parallel Queries (1:16)
  • Using Props and State in Queries (3:37)
  • Disabling Queries (0:55)
  • Multi-part Query Keys (1:32)
  • Automatic Query Retries (2:51)
  • Query Cancellation (5:19)
  • Dependent Queries (3:11)
  • Supplying a Query with Initial Data (1:36)
  • Marking Initial Query data as Stale (1:36)
  • Querying Related Lists and Items (7:15)
  • Seeding Initial Query Data from Other Queries (5:41)
  • Using Query Data to Seed Future Queries (3:39)
  • Query Side-Effects (4:11)
  • Scroll Restoration (4:09)
  • Query Polling with Refetch Intervals (3:23)

Invalidation

  • Query Invalidation Basics (1:33)
  • Invalidating Without Refetching Active Queries (1:33)
  • Invalidating & Refetching Inactive Queries (2:39)
  • Invalidating Multiple Queries with Similar Query Keys (4:05)

Prefetching

  • Basic query prefetching (3:34)
  • Hover-based query prefetching (3:56)
  • Prefetching & Stale Time (2:27)
  • Forced Prefetching (1:56)

Mutations

  • Mutations Overview (5:40)
  • Mutations with the useMutation Hook (7:09)
  • Mutation Side-Effects (6:59)
  • Updating Query Data with Mutation Responses (9:52)


Optimistic Updates

  • Optimistic Updates for List-Like Queries (7:05)
  • Rollbacks for List-Like Queries (5:51)
  • Optimistic Updates for Single Entity Queries (2:06)
  • Rollbacks for Single Entity Queries (3:03)

Paginated & Infinite Queries

  • Paginated Queries (9:53)
  • Prefetching Paginated Queries (3:53)
  • Infinite Queries (9:58)

Server Side Rendering

  • Using React Query with Next.js (Part 1) (5:44)
  • Using React Query with Next.js (Part 2) (3:49)

Your Instructor

Tanner Linsley
Co-Founder, VP of UI/UX @ Nozzle.io and self-nominated React junkie of the year

Open Sourcerer, Co-Founder, VP of UI/UX @ Nozzle.io and self-nominated React junkie of the year.

He has built and still maintains several well-known open source libraries like React Table, React Query, React Form, React Charts, React Static, and even Chart.js.

All of his projects and contributions combined have driven over hundreds of thousands of Github stars and hundreds of millions of NPM installs.

Frequently asked questions

No items found.

30 Day Money Back Guarantee

It's completely risk free to buy a course on Discover.

Try any course on Teachable Discover and if after 30 days, you were not impressed, you can request a full and complete refund.

Categories

One time limited offer

00

Days

00

Hours

00

Mins

00

Secs

React Query - Essentials

By
Tanner Linsley

Learn the ins and outs of React Query

Recommended by Teachable

The official and exclusive guide to mastering server-state in your applications, straight from the original creator and maintainer of the library.

Your Outcome

  • Have a better understanding of server-state and its unique challenges, patterns and how to solve for them
  • Be a master of caching, and have the tools and knowledge to configure it, instead of implementing it by hand yourself.
  • Know the entire core React Query API and how to pragmatically use all of its unique features in your applications
Full Price
$
150
$
200
Pay Monthly
$
/MO
Enroll Now
30 Day Money Back Guarantee
Price:
$
150

Data Fetching in React sucks.

You've likely tried countless "global state" libraries, useFancyPromise hooks and maybe even attempted to write your own solutions only to end up back in the same place: Writing TONS of code to handle seemingly endless data fetching scenarios. But WHY?

Server state and client state are fundamentally different.


Server state:

  1. Is persisted remotely in a location you do not control
  2. Requires asynchronous APIs for fetching and updating
  3. Implies shared ownership and can be changed by others without your knowledge
  4. Will eventually become "stale" or "outdated" during the lifecycle of your app.



So, it's time we stop trying to force server-state into our client-state tools and instead, harness the power of its unique challenges for our benefit:


  • Caching... (possibly the hardest thing to do in programming, but game-changing)
  • Deduping multiple requests for the same data into a single request
  • Updating out of date data in the background
  • Controlling when data is "out of date"
  • Performance optimizations like pagination and lazy loading data
  • Managing memory and garbage collection of server state
  • Optimistic updates and rollbacks for "instant" UI and user experiences.


React Query turns these challenges into powerful features.


It is the best tool available for solving all of these issues out-of-the-box, with zero configuration, and allowing for fine-grained customization as your application grows.

What will I learn?

In this course, you will learn how to wield React Query as your go-to weapon of choice for defeating and overcoming the challenges and hurdles of server state. You will learn to control your asynchronous data in your apps before it starts to control you.

At the end of this course, you will:

  • Have a better understanding of server-state and its unique challenges, patterns and how to solve for them
  • Be a master of caching, and have the tools and knowledge to configure it, instead of implementing it by hand yourself.
  • Know the entire core React Query API and how to pragmatically use all of its unique features in your applications

React Query and the concepts you learn will help you:

  • Remove many lines of complicated and misunderstood data fetching code from your application and replace them with just a handful of lines of React Query logic.
  • Make your application more maintainable and easier to build new features without worrying about wiring up new server state data sources
  • Have a direct impact on your end-users by making your application feel faster and more responsive than ever before.


React Query is trusted in production by developers at:

Google, Walmart, PayPal, Amazon, Microsoft, Target, CarFAX, HP, MLB, Volvo, Ocado, UPC.ch, EFI.com, ReactBricks, Nozzle.io

What Students Say

No items found.

Introduction

  • Introduction
  • Installing React Query (0:38)

Queries

  • Basic Queries (3:19)
  • Query Loading State (1:39)
  • Query Error State (1:49)
  • React Query Devtools (1:56)
  • Automatically Refetching Queries on Window Focus (1:27)
  • Query Refetching Indicators (0:53)
  • Configuring Query Stale Time (1:23)
  • Configuring Query Cache Time (2:32)
  • Query Keys and Caching (2:04)
  • Using Custom Hooks to Share and Reuse Queries (2:42)
  • Parallel Queries (1:16)
  • Using Props and State in Queries (3:37)
  • Disabling Queries (0:55)
  • Multi-part Query Keys (1:32)
  • Automatic Query Retries (2:51)
  • Query Cancellation (5:19)
  • Dependent Queries (3:11)
  • Supplying a Query with Initial Data (1:36)
  • Marking Initial Query data as Stale (1:36)
  • Querying Related Lists and Items (7:15)
  • Seeding Initial Query Data from Other Queries (5:41)
  • Using Query Data to Seed Future Queries (3:39)
  • Query Side-Effects (4:11)
  • Scroll Restoration (4:09)
  • Query Polling with Refetch Intervals (3:23)

Invalidation

  • Query Invalidation Basics (1:33)
  • Invalidating Without Refetching Active Queries (1:33)
  • Invalidating & Refetching Inactive Queries (2:39)
  • Invalidating Multiple Queries with Similar Query Keys (4:05)

Prefetching

  • Basic query prefetching (3:34)
  • Hover-based query prefetching (3:56)
  • Prefetching & Stale Time (2:27)
  • Forced Prefetching (1:56)

Mutations

  • Mutations Overview (5:40)
  • Mutations with the useMutation Hook (7:09)
  • Mutation Side-Effects (6:59)
  • Updating Query Data with Mutation Responses (9:52)


Optimistic Updates

  • Optimistic Updates for List-Like Queries (7:05)
  • Rollbacks for List-Like Queries (5:51)
  • Optimistic Updates for Single Entity Queries (2:06)
  • Rollbacks for Single Entity Queries (3:03)

Paginated & Infinite Queries

  • Paginated Queries (9:53)
  • Prefetching Paginated Queries (3:53)
  • Infinite Queries (9:58)

Server Side Rendering

  • Using React Query with Next.js (Part 1) (5:44)
  • Using React Query with Next.js (Part 2) (3:49)

Your Instructor

Tanner Linsley

Co-Founder, VP of UI/UX @ Nozzle.io and self-nominated React junkie of the year

Open Sourcerer, Co-Founder, VP of UI/UX @ Nozzle.io and self-nominated React junkie of the year.

He has built and still maintains several well-known open source libraries like React Table, React Query, React Form, React Charts, React Static, and even Chart.js.

All of his projects and contributions combined have driven over hundreds of thousands of Github stars and hundreds of millions of NPM installs.

Frequently asked questions

No items found.

30 Day Money Back Guarantee

It's completely risk free to buy a course on Discover.

Try any course on Teachable Discover and if after 30 days, you were not impressed, you can request a full and complete refund.