React Native with React Query + Firestore — Part 2: Mutations

How to use React Query mutations to power Firestore typesafe write operations

In Part 1, we learned how to query a list of data. In this section, we’re going to create, update and delete Todo items with mutations, and query individual Todo items given their document id.

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

GitHub - wildseansy/rn-firestore-react-query-todo: A React Native, Firestore, and React Query…

React Query mutations vs. queries

Queries are designed to fetch data and cache it for React component access. Mutations are for changing data on the server and managing the subsequent side effects. The fundamental difference with a mutations vs queries are:

1. Mutation results are not cached under a query key
2. Mutations may make your query data stale. To manage this outdated data, the app must either
   a. Invalidate or remove stale query data from the cache, so it is refetched when the data is next accessed.
   b. Update the cached data directly to reflect the changes…