Background
TanStack Query
TanStack Query (formerly known as React Query) by Tanner Linsley has 33,984 stars on GitHub as of 11th of April 20231. In the State of JS Survey 2022, 28% of respondents said that had used it as a data fetching library2. It is part of the increasingly popular open-source full stack solution T3 Stack. TanStack Query is trusted by numerous big companies in production3.
I've used TanStack Query for a while now in several projects that I work on, and I think it's a great library which elegantly solves many problems and challenges commonly faced when developing web applications. I hope it becomes even more popular and widely adopted. I think it's a positive technology with a positive impact on the web development community and industry.
It provides the following value:
Solution for managing the state of async read and writes and accurately reflecting it in the UI.
- Very complex wheel to try and re-invent yourself.
Separation of concerns.
- UI components can be written in a truly declarative fashion thanks to its great API design.
Good developer experience.
Well-designed API which provides both high-level access and low-level access.
Good documentation.
Fully-fledged type definitions (TypeScript support).
Graphical "devtools"4, which is great for debugging while developing.
But while it solves many problems and challenges commonly faced when developing web applications, it does not solve all of them. Or by solving some problems and challenges, it takes you to the next level and "unlocks" some new problems and challenges.
In this thesis, I will address what I found to be the most prominent problem which TanStack Query does not solve.
The Cloud Firestore client-side SDK
The Cloud Firestore client-side SDK is — as the name suggests — a SDK for interacting with Cloud Firestore from a client application. Cloud Firestore is a "real-time" database. The downside of Cloud Firestore is that it's part of Google's proprietary and closed-source backend-as-a-service platform Firebase, which disqualifies its use in a lot of projects, due to reasons such as costs, the risk of vendor lock-in, to name a few.
The upside is that it provides an unparalleled interface, in terms of elegance, for dealing with "real-time" data in the client-side code. Combining the positive traits of the Cloud Firestore client-side SDK with TanStack Query could hypothetically solve the most prominent problem I face when developing with TanStack Query.
Cloud Firestore
Cloud Firestore is a NoSQL document database which is hosted in the cloud and part of Firebase, an app development platform provided by Google. Its counterparts in AWS land and Azure land are commonly viewed as being DynamoDB and CosmosDB, respectively, although there are significant differences between the databases in terms of their design and functionality.
What in my opinion mostly distinguishes Cloud Firestore from similar solutions is its "real-time" functionality — a set of capabilities inherited from its predecessor / sibling product Firebase Realtime Database, for which the "real-time" functionality was the main selling point back in the day.
"Real-time" databases
A "real-time" database — such as Firebase Realtime Database — is a database which provides a mechanism for clients to subscribe to be notified about changes to the data in the database. In the case of Firebase Realtime Database as well as Cloud Firestore, the implementation of this mechanism is by design hidden to the consumer of the service(s). Google's backend and the client-side SDK work in tandem to provide a high-level way of consuming "real-time" data.
In Cloud Firestore's
client-side SDK, this is done by using the onSnapshot
API. It
lets you listen to when the result of a database query changes.
- TanStack/query on GitHub, accessed at 2023-04-11 ↩
- State of JavaScript 2022: Other Tools, accessed at 2023-04-12 ↩
- TanStack Query | React Query, Solid Query, Svelte Query, Vue Query, accessed at 2023-04-12 ↩
- Devtools | TanStack Query Docs, accessed at 2023-05-07 ↩