React Query / TanStack Query: React Server State Management from Udemy

What's inside

Learning objectives

React query version 5 queries, mutations, and cache control
Using react query for pagination, infinite scroll, and optimistic updates

Integrating react query with authentication
Testing react query

React query version 5 queries, mutations, and cache control
Using react query for pagination, infinite scroll, and optimistic updates
Integrating react query with authentication
Testing react query

Syllabus

Install React Query, use it to create queries from the server, and handle loading / error states for the query

Introduction to React Query

Introduction to this Course

First project: Blog-em Ipsum

Adding a Query Client and Provider

Creating Queries with useQuery

Handling Loading and Error States

React Query Dev Tools

staleTime vs gcTime

Manage multi-page display of queries, pre-fetch data for future pages, send mutations to the server to update data

Intro to Code Quizzes

Code Quiz! Create Query for Blog Comments

Query Keys

Pagination

Pre-fetching Data

isLoading vs isFetching

Intro to Mutations

Delete Post with useMutation

Other useMutation Properties

Code Quiz! Mutation to Update Post Title

Summary: React Query Basics

Use React Query to load new data as user gets to the end of cached data

Introduction to Infinite Scroll

TROUBLESHOOTING: Alternative to SWAPI

Code Quiz! Set up Infinite SWAPI for React Query

Intro to useInfiniteQuery

useInfiniteQuery Diagram

Write useInfiniteQuery Call

InfiniteScroll Component

useInfiniteQuery Fetching and Error states

Code Quiz! Infinite Species

Summary: Infinite Scroll

Set up React Query in a multi-component app, including centralized fetching and error handling, and custom hooks for queries

Intro to Lazy Days Spa App

Notes on ESLint and Prettier Formatting

Lazy Days Spa App Code Orientation

Install React Query

Set up React Query

REMINDER: start the server before the next lecture!

Custom Query Hook: useTreatments

Fallback Data

Centralized Fetching indicator with useIsFetching

onError Default for Query Client

Code Quiz! Custom Hook for useStaff

Summary: Larger App Setup, Centralization, Custom Hooks

Pre-fetch data before it's needed so that it can be called from cache and user doesn't need to wait, and complicated pagination example involving a calendar.

Adding Data to the Cache

Pre-Fetching Treatments (concepts)

Pre-Fetching Treatments (syntax)

Intro to useAppointments Custom Hook

useQuery for useAppointments

Query Keys as Dependency Arrays

Code Quiz! Pre-Fetch Appointments

Summary: Query Features I

Transform/filter data with the select option to useQuery, understand re-fetch options and how to manage them

Filtering Data with the useQuery select Option

Code Quiz! Selector for useStaff

Intro to Re-Fetch

Update Re-Fetch Options

Global Re-Fetch Options

Overriding Re-Fetch Defaults and Polling

Polling: Auto Re-Fetching at an Interval

Summary: Query Features II

Integrate React Query with Authentication, with efficient user storage and updates

Intro to React Query and Authentication

Hooks for Auth and User Data

Add useQuery call to useUser

setQueryData and removeQueries

Code Quiz! add useQuery to useUserAppointments

Summary: React Query and Auth

Use React Query mutations to update data on the server, and various methods of invalidating data in the cache upon mutation (including optimistic updates)

Introduction to Mutations and Mutations Global Settings

Custom Mutation Hook: useReserveAppointments

Invalidating Query after Mutation

Code Quiz! Mutation to Cancel an Appointment

Update User and Query Cache with Mutation Response

Subtle Issue with User Query Key: Token in Dependency Array

Intro to Optimistic Updates in React Query

Writing Optimistic Update

Summary: Mutations

Wrap components and custom hooks in a React Query provider for testing; handle errors and retries in test environment

Intro to Testing React Query

Testing Setup, including Mock Service Worker

Query Client and Provider in Tests

Testing Rendered Query Data

Code Quiz! Test Rendered Staff Data

Testing Query Errors

Testing Mutations

Intro to Testing Custom Hooks

Test Appointments Filter

Code Quiz! Test Staff Filter

Summary: Testing React Query

Bonus

Coupons!

Good to know

Know what's good

, what to watch for

, and possible dealbreakers

Introduces students to industry-standard React Query for managing server state in React applications

Helps learners manage loading and error states, cached server data, and more

Guides learners through building a multi-component app to practice advanced React Query techniques

Includes visuals and real-world examples to aid understanding

Instructor is actively engaged with students for Q&A support

Requires proficiency with React, so it may be challenging for those new to the framework

Career center

Learners who complete React Query / TanStack Query: React Server State Management will develop knowledge and skills that may be useful to these careers:

Full-Stack Developer

A Full-Stack Developer is responsible for both frontend and backend development of a web application. They work on all aspects of the software development lifecycle, from design to implementation to maintenance. This course may be beneficial for a Full-Stack Developer who wants to enhance their knowledge of React Query, a library that simplifies server state management and enables efficient data handling in complex web applications.

See salaries and explore the career path for Full-Stack Developer

Front-End Engineer

A Front End Engineer works on the user interface (UI) of a website or application. This can include tasks such as designing the layout, creating interactive elements, and implementing responsive design. This course can help a Front End Engineer who uses React Query in their projects by providing a deep dive into its features and best practices. The course covers topics such as data fetching, caching, and error handling, which are essential for managing server state effectively in React applications.

See salaries and explore the career path for Front-End Engineer

Technical Lead

A Technical Lead is responsible for leading a team of software engineers and ensuring the quality of the software product. They work with the team to set goals, assign tasks, and review code. This course can help a Technical Lead who uses React Query in their projects by providing a comprehensive overview of its features and best practices. The course covers topics such as data fetching, caching, and error handling, which are essential for managing server state effectively in React applications.

See salaries and explore the career path for Technical Lead

Web Developer

A Web Developer works on the design, creation, and maintenance of websites. This can include tasks such as frontend development, backend development, and full-stack development. This course can help someone in this role enhance their skills by providing a deep dive into React Query, a powerful tool for managing server state in React applications. As the course covers integration with authentication and advanced features like optimistic updates, it offers valuable insights for modern web development.

See salaries and explore the career path for Web Developer

Software Engineer

A Software Engineer designs, develops, and maintains software for systems and applications. They may work in a variety of industries and on projects of various sizes. This course can help build a foundation for success in this career by providing a strong understanding of React Query, a popular state management library for React applications. Specifically, this course can help a Software Engineer implement server state management functionality efficiently and effectively.

See salaries and explore the career path for Software Engineer

Data Engineer

A Data Engineer is responsible for designing, building, and maintaining data pipelines and data infrastructure. They work with large datasets to extract insights and provide data to other teams within the organization. This course may be useful for a Data Engineer who wants to gain a deeper understanding of React Query, a popular state management library for React applications. The course can provide insights into modern state management techniques, caching strategies, and handling data fetching in complex systems.

See salaries and explore the career path for Data Engineer

UX Designer

A UX Designer is responsible for the user experience (UX) of a website or application. They work on designing the user interface (UI), creating prototypes, and conducting user testing. This course may be useful for a UX Designer who wants to gain a deeper understanding of React Query, a popular state management library for React applications. The course can provide insights into modern state management techniques, caching strategies, and handling data fetching in complex systems.

See salaries and explore the career path for UX Designer

Software Architect

A Software Architect is responsible for the overall design and architecture of software systems. They work with stakeholders to gather requirements and create a technical vision for the system. This course may be useful for a Software Architect who wants to gain a deeper understanding of React Query, a popular state management library. The course can provide insights into modern state management techniques, caching strategies, and handling data fetching in complex software systems.

See salaries and explore the career path for Software Architect

Software Tester

A Software Tester is responsible for testing software to ensure that it meets the requirements and is free of defects. They may work on manual testing, automated testing, or a combination of both. This course may be useful for a Software Tester who wants to gain a deeper understanding of React Query, a popular state management library for React applications. The course can provide insights into modern state management techniques, caching strategies, and handling data fetching in complex systems.

See salaries and explore the career path for Software Tester

Project Manager

A Project Manager is responsible for planning, executing, and delivering software projects. They work with stakeholders to define the project scope, create a project plan, and track progress. This course may be useful for a Project Manager who wants to gain a deeper understanding of React Query, a popular state management library for React applications. The course can provide insights into modern state management techniques, caching strategies, and handling data fetching in complex systems.

See salaries and explore the career path for Project Manager

Engineering Manager

An Engineering Manager is responsible for managing a team of software engineers and ensuring the successful delivery of software products. They may also work on developing and maintaining the software development process. This course may be useful for an Engineering Manager who wants to gain a deeper understanding of React Query, a popular state management library for React applications. The course can provide insights into modern state management techniques, caching strategies, and handling data fetching in complex software systems.

See salaries and explore the career path for Engineering Manager

Data Scientist

A Data Scientist is responsible for using data to solve business problems. They may work on a variety of tasks, such as data analysis, machine learning, and predictive modeling. This course may be useful for a Data Scientist who wants to gain a deeper understanding of React Query, a popular state management library for React applications. The course can provide insights into modern state management techniques, caching strategies, and handling data fetching in complex systems.

See salaries and explore the career path for Data Scientist

Machine Learning Engineer

A Machine Learning Engineer is responsible for building and deploying machine learning models. They may work on a variety of tasks, such as data preprocessing, model training, and model evaluation. This course may be useful for a Machine Learning Engineer who wants to gain a deeper understanding of React Query, a popular state management library for React applications. The course can provide insights into modern state management techniques, caching strategies, and handling data fetching in complex systems.

See salaries and explore the career path for Machine Learning Engineer

Business Analyst

A Business Analyst works with stakeholders to understand their business needs and translate those needs into technical requirements. They may also work on creating and maintaining documentation, such as user stories and acceptance criteria. This course may be useful for a Business Analyst who wants to gain a deeper understanding of React Query, a popular state management library for React applications. The course can provide insights into modern state management techniques, caching strategies, and handling data fetching in complex systems.

See salaries and explore the career path for Business Analyst

Product Manager

A Product Manager is responsible for the overall vision and strategy for a software product. They work with stakeholders to gather requirements, define the product roadmap, and track progress. This course may be useful for a Product Manager who wants to gain a deeper understanding of React Query, a popular state management library for React applications. The course can provide insights into modern state management techniques, caching strategies, and handling data fetching in complex systems.

See salaries and explore the career path for Product Manager