How to unsubscribe the Firestore fetching data?

Question

I want to unsubscribe the fetch when a component unmounts.

I fetch like this:

const snapshot = await db.collection(`users/user/messages`);

With a slow internet this may takes a while, and before fetching finish, component may unmount.

So how to Unsubscribe or cancel in the background when component gets unmounted?

Answer 1

I'm assuming your code actually has a .get() a the end of the line in order to actually execute the query.

Firestore operations that return promises can't be canceled (like nearly all APIs that return promises). The promise will eventually resolve or reject. You don't have to do anything with any data that you get as a result, but the SDK will definitely wait for the query to complete and fetch all the data.

If this is going to cause a problem for your app, consider fetching less data by paginating through the results and only loading documents when they are about to become visible. This is a lot more work, but it might save you time and money for large data sets.