Bloc: Bloc/Firestore: Do not reload the complete page content when navigating again on this page

[reignierleo]

Hi @felangel ;

I a using the flutter bloc package in my application together with firestore. On one of my pages I am loading some Firestore content on it. Before using the bloc library, I was using Streambuilder for it. With the Streambuilder, when I was exiting the page and coming back again on the page, the app wasn't reloading the complete Firestore content but only what has changed, and the rest was still stored on the cash memory and so the loading time was very quick.
With my bloc approach know: each time I am navigating to this page, It is reloading everything from Firestore again and this takes much longer and is also requiring more data.

What would be the correct approach with the bloc-library in order to have a similar working to Streambuilder? I have the Problem with Firestore, but would have the same problem with any Stream-Source.

Thank you very much in advance for your help.
Léo

[warriorCoder]

EDIT: I'm not sure why you are seeing a slow down using the flutter_bloc library, all my calls come back almost instantaneously. Sometimes there is a bit of a loading taking place but a spinner helps out there.

Hi @reignierleo... have you looked into implementing some kind of caching solution.

[felangel]

Hi @reignierleo 👋
Thanks for opening an issue!

Regarding your question, I don’t believe StreamBuilder does any caching. I think you might be requesting the entire collection every time instead of just subscribing to the stream and updating only when data changes. It would be great if you could provide a link to a sample app with the problem you’re having and I can try to take a look and give some suggestions. In addition, as @warriorCoder mentioned you can add your own caching layer or use hydrated_bloc.

Let me know if that helps! 👍

[reignierleo]

Hey Guys;
Thanks for your help. Yes; I subscribed to a Stream but I am requesting the entire collection every time something changes in that stream instead of just updating only the data that changed.
For now I don't know how to do that but I will try implementing this. Thank you guys for also helping out beginners like me! I really appreciate this.

[felangel]

Hey @reignierleo! You can take a look at flutter_bloc_with_stream for inspiration 👍

Closing for now but if you have additional questions/comments I'm happy to continue the conversation 😄

[reignierleo]

Hey @felangel , or anyone who could help me :)
Me again...
I do need a bit of help because I am stuck there:
I got the point and as done in the example: "flutter_bloc_with_stream", I subscribed to a Firestore stream. Each time some data changes in my Firestore collection, I dispatch an event and fetch the collection data. But right know I only manage to fetch all the data every time. So each time the data changes, I pick up everything again... How could I download only the part of the data that changed..
I searched quite a bit on the web, but I always get the answer: user StreamBuilder, connect to your Firestore stream and it will rebuild each time the data changed but by loading only the data that changed. But with flutter_bloc, I don't want to use this widget and I am manually subscribing to the firestore stream, dispatching an event every time it changes => reloading my widget but downloading the complete firestore collection again..., Do I really need to manually program some caching layer, compare the cashed data with the "new" firestore data and download the difference?, I am sure there is a much easier way?

A big big thanks in advance for your help

[felangel]

@reignierleo can you provide a link to a sample app that illustrates the problem you’re having? If not I’ll try to put together an example over the next few days 👍

[reignierleo]

Hi @felangel ;
I think I got it :)
Thanks anyway

[warriorCoder]

@reignierleo Would you be so kind and your solution for documentation purposes?? It would be most helpful to others who have a similar issue.

Cheers!!

[reignierleo]

Hey @warriorCoder , I can try but as I am no expert, not sure I am doing it the right way...
So I created a Firestorestream in my repository and then I am using it in my bloc as following:

Stream _mapFetchProfileToState() async* {
yield ProfileLoading();
try {
StreamSubscription _subscription;
_subscription?.cancel();
_subscription = _userRepository
.streamUserProfile()
.listen((userProfile) => dispatch(NewSyncProfile(userProfile: userProfile)));
} catch (e) {
String error = e.toString();
print('$error');
yield ProfileError();
}
}

Stream _mapNewSyncProfileToState(User userProfile) async* {
yield ProfileLoading();
try {
_userProfile = userProfile;
yield ProfileLoaded(_userProfile);
} catch (e) {
String error = e.toString();
print('$error');
yield ProfileError();
}
}

In that way each time the data is changing and the stream is changing, the profile will be reloaded with the new data.

Is that approach correct?

Thanks in advance