Mobx.dart: Usage example with Firebase FireStore

[Purus]

The most common usecase for most of the developers will be using state management with a cloud database source.. like Firebase FireStore.

Any example of implementing such CRUD actions will be great. I am willing to use MobX for the same usecase.

[pavanpodila]

Great idea. Feel free to send a PR. I'll try to get to it next week. Want to get some docs done before that.

[Purus]

Wish I know how to do that. 😃. The proposed doc will be useful for new
users like me.

Thanks,

Purusothaman Ramanujam

On Sat, Feb 16, 2019, 7:49 AM Pavan Podila <[email protected] wrote:

Great idea. Feel free to send a PR. I'll try to get to it next week. Want
to get some docs done before that.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/mobxjs/mobx.dart/issues/113#issuecomment-464274566,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABBx56le7j5gtBwN7NWZ-dICOD-zXM1Qks5vN2rCgaJpZM4a-PIZ
.

[pavanpodila]

No worries. I'll be building this example soon 🤞

[rrousselGit]

I wonder if it's an opportunity to make something that convert Streams to disposable Observables.

That would definitely reduce the boilerplate of dealing with subscriptions.

[pavanpodila]

Totally, we could have an ObservableStream wrapper that is Firestore aware. Once we get into it we can build that up.

[Purus]

Please let me know if I can be of any use on testing this feature.

[DeepStyles]

How to create AsyncActions lol???

[pavanpodila]

@DeepStyles You can mark an async method with @action and return a Future from it. That will give you an action containing async code. Note that actions are _never async_. They always mutate the observables synchronously. You are technically interleaving the async operations within. At the end of the operation you want to update some observable, which is always done synchronously. Hope that clarifies.

[Purus]

Do you ming providing a simple FireStore example? We can implement in our project and provide feedback so that it would be easy to improve the example.. I am dying to use MobX in my project. I am holding it just for this example.

[DeepStyles]

when I do tht, codegen throws me Remove async modifier from methods error.

[pavanpodila]

Please share the code snippet @DeepStyles.

[DeepStyles]

just created simple example for posting here facing same error.

@action
Future googleLogin() async {
Future.delayed(Duration(milliseconds: 250), () {
loginStatus = ObservableFuture.value(true);
});
return await Future.value(true);
}

[katis]

@DeepStyles could you be using some old version of mobx_codegen? Async actions have been supported for a while now.

[katis]

I wonder if it's an opportunity to make something that convert Streams to disposable Observables.

That would definitely reduce the boilerplate of dealing with subscriptions.

Marking a method returning a Stream<T> with @observable makes the method return an ObservableStream<T> which subscribes when a reaction starts observing it's value, and pauses if there are no subscribers. Pausing might be a problem if the Firebase Streams just begin to buffer data when paused though...

[DeepStyles]

I was gonna use AsyncAction, annotation doesnt exist for it and I m little confused about AsyncAction() doesnt take any fn() as argument, I havnt found any examples on repo either. ( I think m using latest mobx_codegen)

[katis]

With codegen you can just use @action on a Future returning method to make it an async action.
@pavanpodila do you know if the async action codegen is released to pub?

[pavanpodila]

Yup it was already published. Now with 0.0.10, it also contains the fix for the recently reported bug with type parameters (#118).

https://pub.dartlang.org/packages/mobx_codegen

[DeepStyles]

Thanks guys its working now for me updated codegen!!!! I m working on Firestore example might update here once I complete it.

[Purus]

Can you please share the working example of firebase database?

Thanks,

Purusothaman Ramanujam

On Wed, Feb 27, 2019, 12:55 AM DeepStyles [e-mail] wrote:

Thanks guys its working now for me updated codegen!!!!

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/mobxjs/mobx.dart/issues/113#issuecomment-467576984,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABBx56GoJ58lenkGQf-qRUpZA8XohiCbks5vRYoYgaJpZM4a-PIZ
.

[DeepStyles]

Hi everyone, Just done with simple Firestore(also GoogleLogin) with Mobx!!!!!!!!
https://github.com/DeepStyles/Mobx_Firestore-flutter-

[DeepStyles]

Setting p Firestore is your work, hopefully guessing u hav some experience adding Firestore app to Flutter project.

[Purus]

Thanks. It helps.. Can Action methods be async ?

[DeepStyles]

ya thts how I worked it out instead f using Asyncactions(I hav no idea how to use Asyncactions)

[Purus]

@pavanpodila I have the below code. The usersList is always empty although the FireStore documents length is not 0. What is wrong in the code?

import 'package:blood_donation/model/user.dart';
import 'package:mobx/mobx.dart';
import 'package:cloud_firestore/cloud_firestore.dart';

part 'users_list.g.dart';

class UsersList = UsersListBase with _$UsersList;

abstract class UsersListBase implements Store {
  final CollectionReference firestore = Firestore.instance.collection('users');

  @observable
  ObservableFuture<List<User>> usersList =
      ObservableFuture<List<User>>.value([]);

  @action
  Future<bool> getUsers() {

    _fetchNewsList().then((List<User> data) {
      usersList.value.addAll(data);
    });

    return Future.value(true);
  }

  Future<List<User>> _fetchNewsList() async {
    final QuerySnapshot snapshot = await firestore.getDocuments();

    List<User> users = [];

    snapshot.documents.forEach((DocumentSnapshot doc) {
      print(doc.data);
      users.add(User.fromJson(doc.data));
    });

    return users;
  }
}

I don\t want to just replace the usersList list with the new data. Whenever the new data is fetched it should be added to the list as it can be used for pagination.

[DeepStyles]

@action
Future getUsers() {

_fetchNewsList().then((List<User> data) {
  usersList.value.addAll(data); // Try  usersList = ObservableFuture<List<User>>.value(data);
});

return Future.value(true);

}

try above line changed and use usersList.value in Listview widget(if its not already)

[pavanpodila]

I suggest you use an ObservableList to keep track of the users. Use a separate ObservableFuture to track the progress of the fetch.

[Purus]

I tried ObservableList too. In almost all cases, I get the below exception.

E/flutter (10381): [ERROR:flutter/lib/ui/ui_dart_state.cc(148)] Unhandled Exception: Instance of 'MobXException'
E/flutter (10381): #0      ReactiveContext.checkIfStateModificationsAreAllowed (file:///C:/Framework/flutter/.pub-cache/hosted/pub.dartlang.org/mobx-0.1.0/lib/src/core/context.dart:145:11)
E/flutter (10381): #1      ObservableList.addAll (file:///C:/Framework/flutter/.pub-cache/hosted/pub.dartlang.org/mobx-0.1.0/lib/src/api/observable_collections/observable_list.dart:98:14)
E/flutter (10381): #2      UsersListBase.getUsers.<anonymous closure> (package:blood_donation/state/users_list.dart:20:17)
E/flutter (10381): #3      _rootRunUnary (dart:async/zone.dart:1132:38)
E/flutter (10381): #4      _CustomZone.runUnary (dart:async/zone.dart:1029:19)
E/flutter (10381): #5      _FutureListener.handleValue (dart:async/future_impl.dart:126:18)
E/flutter (10381): #6      Future._propagateToListeners.handleValueCallback (dart:async/future_impl.dart:639:45)
E/flutter (10381): #7      Future._propagateToListeners (dart:async/future_impl.dart:668:32)
E/flutter (10381): #8      Future._complete (dart:async/future_impl.dart:473:7)
E/flutter (10381): #9      _SyncCompleter.complete (dart:async/future_impl.dart:51:12)
E/flutter (10381): #10     _AsyncAwaitCompleter.complete (dart:async/runtime/libasync_patch.dart:28:18)
E/flutter (10381): #11     _completeOnAsyncReturn (dart:async/runtime/libasync_patch.dart:294:13)
E/flutter (10381): #12     UsersListBase._fetchNewsList (package:blood_donation/state/users_list.dart)
E/flutter (10381): <asynchronous suspension>
E/flutter (10381): #13     UsersListBase.getUsers (package:blood_donation/state/users_list.dart:19:5)
E/flutter (10381): #14     UsersList.getUsers (file:///D:/02_Projects/01-Flutter/blood_donation/lib/state/users_list.g.dart:34:20)
E/flutter (10381): #15     DashboardPage.build (package:blood_donation/pages/dashboard_page.dart:14:15)
E/flutter (10381): #16     StatelessElement.build (package:flutter/src/widgets/framework.dart:3789:28)
E/flutter (10381): #17     ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3736:15)
E/flutter (10381): #18     Element.rebuild (package:flutter/src/widgets/framework.dart:3559:5)
E/flutter (10381): #19     ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:3716:5)
E/flutter (10381): #20     ComponentElement.mount (package:flutter/src/widgets/framework.dart:3711:5)
E/flutter (10381): #21     Element.inflateWidget (package:flutter/src/widgets/framework.dart:2956:14)
E/flutter (10381): #22     Element.updateChild (package:flutter/src/widgets/framework.dart:2759:12)
E/flutter (10381): #23     ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3747:16)
E/flutter (10381): #24     Element.rebuild (package:flutter/src/widgets/framework.dart:3559:5)
E/flutter (10381): #25     ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:3716:5)
E/flutter (10381): #26     StatefulElement._firstBuild (package:flutter/src/widgets/framework.dart:3864:11)
E/flutter (10381): #27     ComponentElement.mount (package:flutter/src/widgets/framework.dart:3711:5)
E/flutter (10381): #28     Element.inflateWidget (package:flutter/src/widgets/framework.dart:2956:14)
E/flutter (10381): #29     Element.updateChild (package:flutter/src/widgets/framework.dart:2759:12)
E/flutter (10381): #30     ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3747:16)
E/flutter (10381): #31     Element.rebuild (package:flutter/src/widgets/framework.dart:3559:5)
E/flutter (10381): #32     ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:3716:5)
E/flutter (10381): #33     ComponentElement.mount (package:flutter/src/widgets/framework.dart:3711:5)
E/flutter (10381): #34     Element.inflateWidget (package:flutter/src/widgets/framework.dart:2956:14)
E/flutter (10381): #35     Element.updateChild (package:flutter/src/widgets/framework.dart:2759:12)
E/flutter (10381): #36     ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3747:16)
E/flutter (10381): #37     Element.rebuild (package:flutter/src/widgets/framework.dart:3559:5)
E/flutter (10381): #38     ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:3716:5)
E/flutter (10381): #39     ComponentElement.mount (package:flutter/src/widgets/framework.dart:3711:5)
E/flutter (10381): #40     ParentDataElement.mount (package:flutter/src/widgets/framework.dart:4063:11)
E/flutter (10381): #41     Element.inflateWidget (package:flutter/src/widgets/framework.dart:2956:14)
E/flutter (10381): #42     MultiChildRenderObjectElement.mount (package:flutter/src/widgets/framework.dart:4982:32)
E/flutter (10381): #43     Element.inflateWidget (package:flutter/src/widgets/framework.dart:2956:14)
E/flutter (10381): #44     Element.updateChild (package:flutter/src/widgets/framework.dart:2759:12)
E/flutter (10381): #45     ComponentElement.p

[pavanpodila]

I think you need to wrap your Observable changes inside a runInAction()

[Purus]

Great. It works now.. Once I am able to achive all my use cases, I will create an example repo for reference to other users.

[Purus]

Hi again.. Need your suggestions on the below question.

Let's assume the requirement that I need to fetch
1) List of active blog post
2) List of blog posts by user id
3) List of blog post by category and many such criterias.

These requests should also support pagination.

Question: should I create new Store class for each of these Firebase query type? Or all can be accomodated by a single Store having different actions? Any sample reference would be help.

[DeepStyles]

In my app I just implemented all firestore related code in 1 store.

[Purus]

@DeepStyles Your repo has single store which does a simple query.

@pavanpodila Please share your thoughts on this.

[pavanpodila]

@Purus I think you should be fine keeping a single ObservableList<BlogPost> under one BlogPostStore. The various criteria is just helping in fetching this list. If you are accepting the criteria from the user, you can make it observable for interactive editing.

So short answer, you should be fine with a single store in this case

[Purus]

But how it can work when the filtering criteria is all different and when using paging? I am finding it hard to visualize this logic.

[pavanpodila]

The state that you are showing on the screen is always a list of posts. There are various action methods that are being invoked to filter/page etc. So you can capture the state with a single store and invoke a variety of action methods (filter, sort, group, page, etc) to modify this list of posts. Hope that helps.

[Purus]

I have started using BLoC as I could not find good docs to refer on MobX (with Firebase). Please consider this issue as closed.

[pavanpodila]

No worries. I'll keep this open so that we address it soon enough.

[Purus]

Friendly ping to know about this..

[zakton5]

Any updates on this? It's been a while since any discussion has happened and there still aren't examples that I could find.

[pavanpodila]

Does this help: https://github.com/DeepStyles/Mobx_Flutter-using-Firestore. I think the community has already created a few examples. Will try to find the links.