The easiest way to skyrocket your YouTube subscribers
Get Free YouTube Subscribers, Views and Likes

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

Follow
notJust․dev

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/notJustdev/TheMov...

❗Try our FREE 2day Masterclass on notJust.Academy: https://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 FullStack Mobile Developer course and don’t miss out on your chance to become a 6figure dev! Check out what our successful students are saying about their experience:
https://academy.notjust.dev/?utm_sour...

Have an idea for a future tutorial? Share it on our Idea Board: https://github.com/orgs/notJustdev/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 Wrapup & 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

posted by Tsitselisgo