React Query Tutorial V5 - Full Tanstack Query Tutorial for Beginners
65 هزار بار بازدید -
9 ماه پیش
-
In this tutorial, you will
In this tutorial, you will learn everything related to TanStack Query, formerly known as React Query. After watching this video, I guarantee that you will understand every concept of this library and will be able to confidently start working with it.
#react #react_query #tanstack_query
🔗 Links:
Project Github Repository: https://github.com/codegenixdev/31_re...
Fake Server Backend Repository: https://github.com/codegenixdev/project
⭐️ Contents ⭐
⌨️ 00:00:00 Intro
⌨️ 00:00:36 Setup
⌨️ 00:02:41 Fake Server Setup
⌨️ 00:03:30 Old Way
⌨️ 00:05:25 Initialize First Axios Http Get Request
⌨️ 00:07:00 Initialize Todo Feature
⌨️ 00:09:00 Write Your First Tanstack Query
⌨️ 00:12:30 Use Your First Query Inside Your Application
⌨️ 00:14:30 Wrap Your Project Inside React Query Client
⌨️ 00:15:00 Initialize Tanstack Query Devtools
⌨️ 00:18:00 Difference Between Query State and Query Function Status
⌨️ 00:19:30 useIsFetching Hook
⌨️ 00:22:00 Get Full Todo
⌨️ 00:22:30 Parallel Queries
⌨️ 00:25:00 Use Parallel Queries Result Inside React Component
⌨️ 00:28:00 Write Your First Mutation In Tanstack Quey
⌨️ 00:29:00 UseMutation Hook
⌨️ 00:30:00 Mutation Lifecycles (onMutate, onError, onSuccess, onSettled)
⌨️ 00:32:00 Use Your First Mutation Inside A React Component
⌨️ 00:33:00 Initialize a Simple Form Using React Hook Form
⌨️ 00:35:00 Submit Your Todo Data To The Server
⌨️ 00:36:00 Mutation Lifecycle Functions Callback Function Arguments
⌨️ 00:39:00 Query Invalidation From Mutation
⌨️ 00:45:00 Single Query Item Invalidation
⌨️ 00:46:00 Update Todo Using Mutation
⌨️ 00:49:00 Delete a Todo
⌨️ 00:53:00 Difference Between Mutate and MutateAsync
⌨️ 00:54:00 Initialize Projects Component
⌨️ 00:57:00 Paginated Queries
⌨️ 00:58:00 PlaceHolderData
⌨️ 00:58:25 KeepPreviousData
⌨️ 01:00:18 Use Query With PlaceHolderData Inside a React Component
⌨️ 01:03:00 Initial Products
⌨️ 01:04:00 Initial Infinite Scrolling
⌨️ 01:06:00 useInfiniteQuery for Infinite Scrolling
⌨️ 01:08:00 Implementing Infinite Scrolling Inside a React Component
⌨️ 01:13:00 Enabled on Query
⌨️ 01:14:00 Manipulate Stored Cache Directly
⌨️ 01:18:30 Conclusion
🎨 My Editor Settings:
- JetBrains Mono
- Dracula
🔗 Resources:
https://tanstack.com/query/latest
#react #react_query #tanstack_query
🔗 Links:
Project Github Repository: https://github.com/codegenixdev/31_re...
Fake Server Backend Repository: https://github.com/codegenixdev/project
⭐️ Contents ⭐
⌨️ 00:00:00 Intro
⌨️ 00:00:36 Setup
⌨️ 00:02:41 Fake Server Setup
⌨️ 00:03:30 Old Way
⌨️ 00:05:25 Initialize First Axios Http Get Request
⌨️ 00:07:00 Initialize Todo Feature
⌨️ 00:09:00 Write Your First Tanstack Query
⌨️ 00:12:30 Use Your First Query Inside Your Application
⌨️ 00:14:30 Wrap Your Project Inside React Query Client
⌨️ 00:15:00 Initialize Tanstack Query Devtools
⌨️ 00:18:00 Difference Between Query State and Query Function Status
⌨️ 00:19:30 useIsFetching Hook
⌨️ 00:22:00 Get Full Todo
⌨️ 00:22:30 Parallel Queries
⌨️ 00:25:00 Use Parallel Queries Result Inside React Component
⌨️ 00:28:00 Write Your First Mutation In Tanstack Quey
⌨️ 00:29:00 UseMutation Hook
⌨️ 00:30:00 Mutation Lifecycles (onMutate, onError, onSuccess, onSettled)
⌨️ 00:32:00 Use Your First Mutation Inside A React Component
⌨️ 00:33:00 Initialize a Simple Form Using React Hook Form
⌨️ 00:35:00 Submit Your Todo Data To The Server
⌨️ 00:36:00 Mutation Lifecycle Functions Callback Function Arguments
⌨️ 00:39:00 Query Invalidation From Mutation
⌨️ 00:45:00 Single Query Item Invalidation
⌨️ 00:46:00 Update Todo Using Mutation
⌨️ 00:49:00 Delete a Todo
⌨️ 00:53:00 Difference Between Mutate and MutateAsync
⌨️ 00:54:00 Initialize Projects Component
⌨️ 00:57:00 Paginated Queries
⌨️ 00:58:00 PlaceHolderData
⌨️ 00:58:25 KeepPreviousData
⌨️ 01:00:18 Use Query With PlaceHolderData Inside a React Component
⌨️ 01:03:00 Initial Products
⌨️ 01:04:00 Initial Infinite Scrolling
⌨️ 01:06:00 useInfiniteQuery for Infinite Scrolling
⌨️ 01:08:00 Implementing Infinite Scrolling Inside a React Component
⌨️ 01:13:00 Enabled on Query
⌨️ 01:14:00 Manipulate Stored Cache Directly
⌨️ 01:18:30 Conclusion
🎨 My Editor Settings:
- JetBrains Mono
- Dracula
🔗 Resources:
https://tanstack.com/query/latest
9 ماه پیش
در تاریخ 1402/09/16 منتشر شده
است.
65,017
بـار بازدید شده