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