Data Fetching in React Native with TanStack Query (tutorial for beginners)

This tutorial is a beginner friendly guide to Data Fetching in React Native using TanStack Query, formerly known as React Query.
This tutorial is sponsored by ✨IBM StepZen✨ - a GraphQL server with a unique architecture that helps developers build APIs fast and with less code
❇️ Get your free account here: bit.ly/3SXSNkz
In this video, we will be mastering TanStack Query, making it super easy to fetch remote data, whether it's from a Rest API or a GraphQL API. We'll dive into setting up TanStack Query in your React Native project, showing you how to handle data like a pro, with features like offline caching and persistence. Let's get started!
💻 Source Code: github.com/notJust-dev/TheMov...
❗Try our FREE 2-day Masterclass on notJust.Academy: assets.notjust.dev/masterclas...
📚 This video includes a lot of tools and technologies, providing an excellent opportunity to learn about:
- Introduction to TanStack Query V5 and its benefits
- Setting up TanStack Query in a React Native project
- Fetching data from a Rest API
- Querying data from a GraphQL API
- Implementing offline caching and data persistence
- Optimizing data fetching for performance
- Handling errors and loading states
📚 Enroll NOW in The Full-Stack Mobile Developer course and don’t miss out on your chance to become a 6-figure dev! Check out what our successful students are saying about their experience:
academy.notjust.dev/?...
💡 Have an idea for a future tutorial? Share it on our Idea Board: github.com/orgs/notJust-dev/d...
💬 Join the notJust Development gang and let's build together:
Twitter: / vadimnotjustdev
Instagram: / vadimnotjustdev
Facebook: / notjustdev
LinkedIn: / vadimsavin
Discord: / discord
Timecodes:
0:00 Intro to Tutorial and Project Setup
2:45 Starting a New Expo Project
6:36 Expo Router Navigation System & Template Cleanup
8:35 Customizing the navigation tabs and icons
12:49 Introduction to The Movie Database API and getting an API key
16:49 Starting the manual data fetching process without TanStack Query
22:21 Async Data Fetching & State Management
31:21 Implementing error handling and adjusting API request headers
44:14 Manual Data Fetching Summary & Challenges
45:44 Using TanStack Query for data fetching
55:00 Livestream Questions
57:47 Designing a Basic User Interface
1:05:23 Creating a Movie Details Page & Navigation Setup
1:09:47 Movie Details Data Fetching Setup
1:10:26 TMDB API for Movie Details Endpoint
1:12:06 Implementing fetch movie function to get dynamic details by movie ID
1:15:37 useQuery Setup for Movie Details
1:25:00 Installing and setting up React Query DevTools
1:29:30 Enhancing movie details page UI
1:33:37 The benefits of using TanStack Query in complex projects
1:37:07 Running a mutation, adding movies to a watchlist using TMDB API
2:01:33 Invalidating queries to refresh data across pages after mutations
2:10:41 Implementing Pagination & Infinite Scroll
2:26:33 Tutorial Wrap-up & React Query Docs
2:32:19 Outro
Disclaimer: This build is for educational purposes only. All views, opinions, and technology choices expressed in this video are my own and do not represent the views, opinions, or technology choices of any entity I have been, am now, or will be affiliated with.
#notjustdev #graphql #reactnative

[@notjustdev]

This tutorial is sponsored by ✨IBM StepZen✨ - a GraphQL server with a unique architecture that helps developers build APIs fast and with less code
❇ Get your free account here: bit.ly/3SXSNkz

[@fonbarnabas2667]

With yout tutorials i have really learn much... Thanks much

[@kinggrey2511]

Thank you so much for working this hard for us

[@ludwigvillalba1886]

thanks for sharing!

[@muhammadashfaq913]

Really informative. Learned a lot about tan stack query Highly recommeded

[@notjustdev]

I'm glad you found it helpful 🙌

[@yusufpolat9290]

Thanks for the content, it very helpful.

[@notjustdev]

Glad it was helpful!

[@muhammadzubair6105]

in pagination i think react query handles the pagination itself and we donot need to worry about incrementing or decrementing the page param, we just need to pass pageParam intially as one and then we do onEndreached we need to call fetchNextPage and it does the magic for us

[@ShyamalKhalpada]

how i can used react query in react native class component ?

[@mugerwaobadiah1621]

thanks so much for the tutorials,am kindly requesting for a simple app (CRUD) including authentication for admin and user with an api .I think this can be the best for beginners .

[@kgethegodev]

I second this

[@sagedev]

Which extensions do you use in vscode for react native? Please, can you make a video about this?

[@notjustdev]

Check this video out: th-cam.com/video/oorfevovPWw/w-d-xo.htmlsi=7v6z0jiq-hyu_Eyf

[@muhammadzubair6105]

please if possible please cover some advance concepts in react query

[@Gustavo-vu1py]

how to open modal when presss movie list item? I try but modal appear like a page

[@navinkumarsahu1159]

you must be using an Android device

[@Gustavo-vu1py]

@@navinkumarsahu1159 Yes I am, is the behavior of the modal different between devices?

[@navinkumarsahu1159]

@@Gustavo-vu1py yes bro between platform not device

[@user-fr5mn2lp6k]

[@yasserhy]

I thought there was a section on GraphQL :(

[@walkwithzeus9318]

please upload a video how to stop all these useless ads of TH-cam

[@notjustdev]

You get TH-cam Premium 😅