React Query TanStack Query React Server State Management

React Query TanStack Query React Server State Management

What you’ll learn

React Query version 3 queries, mutations, and cache control
Using React Query for pagination, infinite scroll, and optimistic updates
Integrating React Query with Authentication
Testing React Query

Requirements

Experience with React
Familiarity with React Hooks
For the testing portion, basic familiarity with Testing Library syntax

Description

React Query (also called TanStack Query) has become the go-to solution for server state management in React apps, and for good reason! This smart, comprehensive solution makes it easy to keep your app up-to-date with data on the server. In fact, if you are using Redux simply to manage data from the server, React Query can replace Redux in your app. And, for server data management, React Query is much simpler and more powerful than Redux. For example, React Query: tracks loading and error states for your server queries (no need to manage that yourself!) makes cached server data available for display while you’re fetching updated dataThis course starts with a simple app to learn the basics of React Query version 3: queriesloading and error statesReact Query dev toolspagination and pre-fetchingmutationsThen we take a detour with the Star Wars API to learn about Infinite Queries (getting more data just as the user has gotten near the end of the current data). Finally, we work on a large, multi-component app to learn about the above in more detail, pluscentralizing loading and error handlingfiltering dataintegrating React Query with authways to keep data up to date after mutations, including optimistic updatestesting React QueryOther notable course features:pre-written projects to use as a backdrop for React Query, so there’s no time wasted writing code not relevant to the courseample opportunities to practice with periodic “code quizzes” to make sure you’re understanding the conceptsvisual models for complicated concepts to help understand all of the moving piecesthe major project is written in TypeScriptsupportive instructor who loves engaging with students in Q&ACome see what the hype is about, and improve your apps with simpler, more powerful server state management!

Overview

Section 1: Creating Queries and Loading / Error states

Lecture 1 Introduction to React Query

Lecture 2 Introduction to this Course

Lecture 3 IMPORTANT: React Query version 3 vs. version 4

Lecture 4 First project: Blog-em Ipsum

Lecture 5 (optional) TROUBLESHOOTING: create-react-app and React Query 4.10+

Lecture 6 Creating Queries with useQuery

Lecture 7 Handling Loading and Error States

Lecture 8 React Query Dev Tools

Lecture 9 staleTime vs cacheTime

Section 2: Pagination, Pre-fetching and Mutations

Lecture 10 Intro to Code Quizzes

Lecture 11 Code Quiz! Create Query for Blog Comments

Lecture 12 Query Keys

Lecture 13 Pagination

Lecture 14 Pre-fetching Data

Lecture 15 isLoading vs isFetching

Lecture 16 Intro to Mutations

Lecture 17 Delete Post with useMutation

Lecture 18 Code Quiz! Mutation to Update Post Title

Lecture 19 Summary: React Query Basics

Section 3: Infinite Queries for Loading Data “Just in Time”

Lecture 20 Introduction to Infinite Scroll

Lecture 21 Code Quiz! Set up Infinite SWAPI for React Query

Lecture 22 Intro to useInfiniteQuery

Lecture 23 Infinite Scroll Diagram

Lecture 24 Write useInfiniteQuery Call

Lecture 25 InfiniteScroll Component

Lecture 26 useInfiniteQuery Fetching and Error states

Lecture 27 Code Quiz! Infinite Species

Lecture 28 Summary: Infinite Scroll

Section 4: React Query in Larger App: Setup, Centralization, Custom Hooks

Lecture 29 Intro to Lazy Days Spa App

Lecture 30 Notes on ESLint and Prettier Formatting

Lecture 31 Lazy Days Spa App Code Orientation

Lecture 32 Install and set up React Query

Lecture 33 REMINDER: start the server before the next lecture!

Lecture 34 Custom Query Hook: useTreatments

Lecture 35 Fallback Data

Lecture 36 Centralized Fetching indicator with useIsFetching

Lecture 37 onError Handler for useQuery

Lecture 38 UPDATE: alternative way to specify global error handler

Lecture 39 onError Default for Query Client

Lecture 40 Code Quiz! Custom Hook for useStaff

Lecture 41 Summary: Larger App Setup, Centralization, Custom Hooks

Section 5: Query Features I: Pre-Fetching and Pagination

Lecture 42 Adding Data to the Cache

Lecture 43 Pre-Fetching Treatments (concepts)

Lecture 44 Pre-Fetching Treatments (syntax)

Lecture 45 Intro to useAppointments Custom Hook

Lecture 46 useQuery for useAppointments

Lecture 47 Query Keys as Dependency Arrays

Lecture 48 Code Quiz! Pre-Fetch Appointments

Lecture 49 Summary: Query Features I

Section 6: Query Features II: Transforming and Re-Fetching Data

Lecture 50 Filtering Data with the useQuery select Option

Lecture 51 Code Quiz! Selector for useStaff

Lecture 52 Intro to Re-Fetch

Lecture 53 Update Re-Fetch Options

Lecture 54 Global Re-Fetch Options

Lecture 55 Overriding Re-Fetch Defaults and Polling

Lecture 56 Polling: Auto Re-Fetching at an Interval

Lecture 57 Summary: Query Features II

Section 7: React Query and Authentication

Lecture 58 Intro to React Query and Authentication

Lecture 59 useAuth, useUser and useQuery

Lecture 60 Integrate Auth with React Query

Lecture 61 Persist User Data in localStorage

Lecture 62 initialData from localStorage for useQuery

Lecture 63 Dependent Queries: userAppointments

Lecture 64 Query Client removeQueries method

Lecture 65 Summary: React Query and Auth

Section 8: Mutations: Using React Query to Update Data on the Server

Lecture 66 Introduction to Mutations and Mutations Global Settings

Lecture 67 Custom Mutation Hook: useReserveAppointments

Lecture 68 OPTIONAL: TypeScript for `mutate` Function

Lecture 69 Invalidating Query after Mutation

Lecture 70 Query Key Prefixes

Lecture 71 Code Quiz! Mutation to Cancel an Appointment

Lecture 72 Update User and Query Cache with Mutation Response

Lecture 73 Intro to Optimistic Updates in React Query

Lecture 74 Making a Query “Cancel-able”

Lecture 75 Writing Optimistic Update

Lecture 76 Summary: Mutations

Section 9: Testing React Query

Lecture 77 Intro to Testing React Query

Lecture 78 Testing Setup, including Mock Service Worker

Lecture 79 Query Client and Provider in Tests

Lecture 80 Testing Rendered Query Data

Lecture 81 Code Quiz! Test Rendered Staff Data

Lecture 82 Testing Query Errors

Lecture 83 Code Quiz! Staff Query Errors

Lecture 84 Testing Mutations

Lecture 85 Code Quiz! Test Cancel Appointment Mutation

Lecture 86 Intro to Testing Custom Hooks

Lecture 87 PLEASE READ: update to the following lecture

Lecture 88 Test Appointments Filter

Lecture 89 Code Quiz! Test Staff Filter

Lecture 90 Summary: Testing React Query

Section 10: Bonus

Lecture 91 Coupons!

React developers who want to learn an efficient, powerful system for managing server state

Course Information:

Udemy | English | 7h 51m | 3.46 GB
Created by: Bonnie Schulkin

You Can See More Courses in the IT & Software >> Greetings from CourseDown.com