React Native for beginners - 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: https://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:* https://github.com/notJust-dev/TheMovieApp ⚛️ React Native Mastery is the ONLY course you need to master mobile development with React Native & Expo 🚀 Enroll here: https://www.notjust.dev/react-native-mastery 📚 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 💡 Have an idea for a future tutorial? Share it on our Idea Board: https://github.com/orgs/notJust-dev/discussions *💬 Join the notJust Development gang and let's build together:* Twitter: https://twitter.com/VadimNotJustDev Instagram: https://www.instagram.com/VadimNotJustDev Facebook: https://www.facebook.com/notjustdev LinkedIn: https://www.linkedin.com/in/vadimsavin Discord: https://discord.gg/VpURUN2 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