React Native with React Query + Firestore — Part 1: Queries

A step by step guide on how to supercharge your app development with Firestore + React Query

Firebase is a common Back end as a Service (BaaS) framework for bootstrapping React Native app capabilities. Firebase’s Firestore is an off-the-shelf solution for cloud data persistence, but as an app starts to scale, managing Firestore is tedious in a React Native app. It may be tempting to add global state management frameworks like Zustand or Redux to stash and manage Firestore data, but this post will illustrate why React Query (also known as Tanstack Query) is generally suited much better for remote data management, with its key-based fetching and caching system.

This three part guide serves a detailed approach of how to couple Firestore with React Query to streamline app data fetching and mutations and avoid common pitfalls of React Native with Firestore. We will cover queries, mutations, cache management, and data pagination, in a basic sample todo app.

Throughout this guide, we’ll be working in this repo: