How to read docs as offline and write as (online & offline) in firestore?

Question

Recently I have created a simple chat app using Cloud Firestore and React Native. Their offline and online synchronization is a pretty good feature.

But there is an expensive time consuming on loading(reading documents). Although I paginated with 10 docs for every user (10 users), but still the loading messages is very slow, in a slow internet connection, it takes up to 10 seconds to load messages which is not a good experience.

Here when I enable offline mode it loads messages a bit faster (almost 3 seconds). But here is a problem:

Now:

Is possible to load messages as offline, and save messages in both(offline & online).

Or is there any other better way to load faster?

When I enable offline feature in firebase, it cant save messages in server, or I disable offline while saving messages, and when I load messages it load just offline messages.

Example:

async function getMessagesOfAllUser(userlist){
    let outstate = false, data = {};
    if (userlist !== null)
        for (let i = userlist.length - 1; i >= 0; i--) {
            outstate = await this.getMessagesOfOneUsers(userlist[i].user);
            if (outstate !== false) data = { ...data, ...outstate };
            if (i === 0) {
                this.setState({ ...this.state, ...data });
            }
        }
}

function getMessagesOfOneUser(user) {
    return db.collection('users/'+user/+'/messages').orderBy("dt", "desc").limit(10).get().then(snap => {
        let l = snap.size;
        if (l > 0) {
            const ourMessage = this.state.me + user;
            this.lastVisible = { ...this.lastVisible, ...{ [user]: snap.docs[l - 1] } };
            for (let i = 0; i < l; i++) {
                if (this.outState[ourMessage] !== undefined)
                    this.outState[ourMessage] = [...this.outState[ourMessage], snap.docs[i].data()];
                else this.outState[ourMessage] = [snap.docs[i].data()];
                if (i === l - 1) return this.outState;
            }
        }
        return false;
    });
}

Answer 1

When you use get() (without arguments) to read a document, the Firestore client will always checks with the server to ensure you get the latest data.

You have two options to get the data from the local cache:

1. Use get({ source: "cache" }) ( docs ), which will return the document from the local cache. If the document doesn't exist in the local cache, it'll raise an error. In that case you'll still want to check against the server.

2. Use an onSnapshot() listener. When you attach this listener, it immediately calls back with the value from the local cache, as get({ source: "cache" }) does. But it also checks with the server if there is any update to the data. If there is, it retrieves the updated document, updates the local cache, and calls your code again with the updated value.

Using onSnapshot() is usually recommended if you show the data in the user interface, as it means your UI reacts to changes in the data.

For more on this, see How do I Enable Offline Support? in the Getting to know Cloud Firestore video series.