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

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in React Query / TanStack Query: React Server State Management with these activities:

Mentor a junior developer on best practices for using React Query

Show steps

Enhance your understanding of React Query by sharing your knowledge and guiding a junior developer through its effective use.

Show steps

Identify a junior developer who is interested in learning React Query.
Share your knowledge and experience with React Query, explaining best practices and common pitfalls.
Provide guidance and support as the mentee works on React Query projects.

Attend a React Query meetup

Show steps

Meet other developers who are using React Query, learn about best practices, and get your questions answered.

Browse courses on React Query

Show steps

Find a React Query meetup in your area
Register for the meetup
Attend the meetup
Network with other attendees

Work through Dan Abramov's hooks tutorial

Show steps

One of the best resources for learning React Hooks is the tutorial written by the creator of React himself.

Browse courses on React Hooks

Show steps

Read through the tutorial
Follow along with the code examples
Complete the corresponding exercises

Eight other activities

Expand to see all activities and additional details

Show all 11 activities

Participate in a peer coding session to troubleshoot React Query implementation issues

Show steps

Collaborate with peers to debug and resolve challenges encountered while using React Query in your projects.

Show steps

Join or organize a peer coding session.
Present your React Query implementation and any issues you are facing.
Work together to identify and resolve the problems.

Join a React Query study group

Show steps

Connect with other students who are also learning React Query, share knowledge, and work through problems together.

Show steps

Find a React Query study group on Discord or Meetup
Attend regular meetings
Participate in discussions
Help other group members

Practice React Query queries with example projects

Show steps

Reinforce your understanding of React Query queries by working through the example projects provided in the course materials.

Show steps

Set up the example projects as described in the course.
Implement the necessary React Query queries to fetch data from the server.
Test the functionality of your queries by triggering different actions.

Work on React Query exercises

Show steps

Cement your understanding of React Query by practicing a variety of exercises and challenges.

Browse courses on React Query

Show steps

Solve the 'Getting Started' exercises on the React Query docs
Complete the 'Advanced' exercises on the React Query docs
Work on a few React Query exercises on Codewars

Create custom React Query hooks for data fetching and management

Show steps

Extend your React Query proficiency by building custom hooks that encapsulate data fetching and management logic.

Show steps

Identify the data fetching and management tasks that can be encapsulated in a custom hook.
Create a new React hook using the `useQuery` or `useMutation` hooks.
Implement the necessary logic to fetch and manage the data.
Test the functionality of your custom hook in a React component.

Build a simple CRUD app with React Query

Show steps

Solidify your understanding of React Query by applying it to a real-world project.

Browse courses on React Query

Show steps

Set up a new React project
Integrate React Query into your project
Create a data model for your app
Implement CRUD operations using React Query
Test your app

Build a React Query-based application that handles pagination and infinite scrolling

Show steps

Develop a comprehensive React application that leverages React Query's capabilities for pagination and infinite scrolling, solidifying your understanding of these techniques.

Browse courses on Pagination

Show steps

Set up a React application with React Query.
Create a data source that supports pagination (e.g., a mock API).
Implement React Query queries to fetch data in a paginated manner.
Create an infinite scrolling component that loads more data as the user scrolls down.
Test the functionality of your application's pagination and infinite scrolling.

Develop a React Query-based data visualization dashboard

Show steps

Showcase your React Query skills by creating an interactive data visualization dashboard that consumes data from a server.

Browse courses on Data Visualization

Show steps

Gather the necessary data from a server using React Query queries.
Choose a data visualization library (e.g., D3.js, Chart.js).
Create visualizations that represent the data effectively.
Design a user interface for the dashboard.
Test and refine the dashboard for usability and performance.

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