A built-in caching solution for firestore

[adamfarmer0]

I found out that with persistence and local caching, I can check the cache timestamp and server timestamp, then update cache if server timestamp is bigger than cache timestamp.

Let's say we have a document full of document Ids and timestamps called "CachedDocuments" as array, that shows when the documents are created and updated, and we are always subscribed to that document,
Let's say that we are trying to get a document by their Id,
We first try to get the document with
const cachedData = getDocFromCache(doc(db, "CollectionName", id));
If it exists and If
cachedData._document.version.timestamp.seconds > CachedDocuments[id].timestamp.seconds;
We return the data from cachedData, else, we send request to server, get the data, and persistence updates the cache automatically.

I am not sure if it's already builtin to the persistence cache, If it is, then it's redundant to write this.

Otherwise, I believe this would enormously reduce read counts to the server, I am wondering if this could be implemented in reactfire itself as a ReactFireOptions when reading a collection or a document, where reactfire handles the reads and writes to some "updates" document that is like [{ Idkey : timestamp }, { Idkey2 : timestamp} ...] pairs.

Edit:
More detailed explanation:
CacheTimestamp > DocIdUpdateTimestamp ? return CachedData, since Document didn't update from the time Cache was initialized.
CacheTimestamp < DocIdUpdateTimeStamp ? return getNewData(), since Document did update with a new timestamp, so the cache is old.
after getNewData(), Persistence auto updates CacheTimestamp, therefore in the next call, CacheTimestamp will be bigger than DocIdUpdateTimestamp, so the CachedData will return, and getNewData will never run until the next time the document is updated.

[jhuleatt]

Hi @adamfarmer0, Firestore handles offline caching for you once you enable it. You can check whether data came from the network or cache via snapshot.metadata.fromCache.

[adamfarmer0]

Thing is, It's not from cache if the page is refreshed. I am lazy loading compressed base64 images when they are on viewport, if the page isn't refreshed you are right, but what I am saying is that with this algorithm, you are essentially doing subscription with firestore database and the local cache, not the app state, and local cache knows if there is any change from firestore with a id : timestamp pair indicating when the last id document was changed, using its own timestamp as to when the data was first get.

[adamfarmer0]

Actually, If I use const myDoc = await getDoc(docRef), it doesn't get the data from cache, cache seems to only work when the device is offline, and If I only use getDocFromCache(docRef), then it always returns old cache because cache doesn't seem to know if the data in the document changed, so it will always return old data.

[adamfarmer0]

https://stackblitz.com/edit/reactfire-v4-sample-tvp3l1 or https://github.com/adamfarmer0/firestore-local-caching

Here is a demo example solution, I know it renders like 5 times but I am not an experienced react dev but it works. @jhuleatt