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

I will go through step by step with examples.

00:15 Overview of topics
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:

Contact me for development services:

React tutorials:

JavaScript Tutorials and Projects:

Angular Tutorials:

Angular 16 Crash Course For Begineers:

Tech Tutorials - Random:

Join our facebook group:

[MiladJoodi]

Very useful and clear content. Thanks a lot. 🙌

[davidmcqarphui]

Great tuts there. This has really helped me a lot. Thank you Umair
I have one question though, how can I use pagination in the useQuery when fetching data?

[kunaldhuria]

You just saved me my man thank you so much

[tonyaltamura]

I didn't get why in the arg queryKey is an array as it doesn't work with multiple queryKeys? Even the docs suggests to call twice if you have multiple keys.

[MatrixtoMastery]

What is mutation? and what is the diff b/w invalidate and revalidate. could you make a video that talks about buzz words like these

[asadmehboob]

Great video, thank you so much .please also make detail video on Tanstack Table (with server side pagination, searching, sorting and filtering)

[rumonintokyo]

I have done the setup in the same way as u initially but ran into some sort of hydration issue which causes the page source not to be updated with the latest fetched data from the server. I was wondering whether you have idea to resolve this

[YuliyaAnts]

thanks a lot, Umair! Could you give me piece of advice how I can use tanstack if I need create all pages as server?

[GauravYadav-hf]

Nice, I the docs I have seen they have a section about hydrate and all. What it all about?

[cirefotography]

Wasn’t onError and onSuccess removed from react query v5? 43:11

[uguroz]

you did all project client side rendering.

[codingintelugu]

Hello Umair, what is the use of React Query in Nextjs when the framework itself is providing you the caching abilities?

[BillaSaheb]

Excellent Awesome ///Please make Project on Next.js 14 Server Action

[ogunleyeoluwafemi]

Nice video please make a video with server actions and react query

[kevinhuang]

Hello, is the code in this course available in the github's repository ?


Thanks 😀

[Flag_Ship-glpi]

I don't know why your tutorials won't work for me

[agusdwimilniadi]

whats its better for fetching api? axios or fetch default in next js?

[bwfneee]

Hi Umair, thank you for the video. Can you please tell me the name of the plugin you use to dispaly data from VS code 15:53s. Thank you