Build Next.js 14 Apps with Tanstack Query v5 - React Query Tutorial

Описание

In this video you will learn pretty much everything about tanstack query v5 and its integration in next.js 14 app directory. Learn about installing next.js 14 project, configure tanstack query in it, fetch data from apis, talk about statuses options provided by useQuery, filter data, global loading state in tanstack query, dependency query in tanstack, mutations and invalidating mutations for post, update and delete request.
I will go through step by step with examples.

00:15 Overview of topics
02:15 Learn more on next.js 14
03:10 Create new next.js 14 project
04:45 Integrate TanStack Query v5 in next.js 14 project
07:20 Create provider for tanstack query
10:10 Use provider in layout file
12:10 Query data from apis and showing it
21:20 Parallel queries
25:15 Filter particular props from queried data
27:00 Dependency query
28:45 Global fetching check in react query
29:40 Mutations in tanstack query
31:50 Using json-server for post api
35:05 Call post api using mutation in react query
42:05 Statuses of useMutation hook
45:10 Invalidate mutation in react query
47:25 Outro

#nextjs14 #tanstackquery #reactquery

Follow Whatsapp Channel:
https://whatsapp.com/channel/0029Va7yDtdKmCPVHT30ya3A

Contact me for development services:
https://www.linkedin.com/in/umair-jameel-24aa5368/

React tutorials:
https://www.youtube.com/playlist?list=PL3i9po_eXL_ry_n5DZ30aEHazNCWdOUz7

JavaScript Tutorials and Projects:
https://www.youtube.com/playlist?list=PL3i9po_eXL_rwqWg1yPGBFKFZWqjaCTZe

Angular Tutorials:
https://www.youtube.com/watch?v=Qts7H8P-FpI&list=PL3i9po_eXL_qZ4PNvMUcHBERa2m9QRFo1&pp=gAQBiAQB

Angular 16 Crash Course For Begineers:
https://www.youtube.com/playlist?list=PL3i9po_eXL_orh8YJcdGNO0C6P2mHABT7

Tech Tutorials - Random:
https://www.youtube.com/watch?v=IYRrE-yikb0&list=PL3i9po_eXL_pKCqB5J5KoRdR-4uebo1r-

Complete Next.js 13 Tutorials: https://www.youtube.com/playlist?list=PL3i9po_eXL_paQQIa4qTum7_9CPqQwiFH

Next.js 14 Tutorials:
https://www.youtube.com/playlist?list=PL3i9po_eXL_pyNKBtAAK_gVBWG5d8yZS9

Node Express MongoDB Bootcamp: https://www.youtube.com/playlist?list=PL3i9po_eXL_rdDdgVHSZjmzvwUB-jj8SU

ChatGPT Tutorials: https://www.youtube.com/playlist?list=PL3i9po_eXL_qtCoSV1GHX_5Q48D2La9xW

Join our facebook group:
https://www.facebook.com/groups/996305460498149/