Mobx.dart: Example of Mobx + GraphQL

[vishalchandra]

Can someone help me figure out how to work with graphql based API and Mobx together in flutter? Thanks.

[thphuc]

@pavanpodila
@rrousselGit

Can we use MobX with GraphQL?

[pavanpodila]

You can certainly use MobX with GraphQL. Use GQL to fetch the data by wrapping in a service. Pick the parts that you want to show on the UI and make it as observable state of the MobX Store. Attach Observer to the UI and consume these observables. When using subscriptions, update the Store and the UI changes automatically.

Think of GQL as just a data transport mechanism. Whatever you want to show on the UI must be part of the reactive state of the Store. You can make this more seamless by building some "smart" stores that are _GQL-aware_. I'll let you decide how to build that one :-).

[Purus]

Hi.. @pavanpodila Any tips on the "smart" stores? :-)

[pavanpodila]

@Purus The smartness is mostly in terms of creating a connector from the GQL layer to the MobX layer. You will need to associate a MobX Store to one or more GQL queries and update the store whenever the query comes back with results. By keeping this GQL - MobX map, you can avoid having to translate at all places where a GraphQL query is made.

This logic will sit in a connector-service that makes the GQL call and updates the passed in MobX store instance.

[eladcandroid]

I need it too.. @vishalchandra, can you show some result?

[joshuadeguzman]

Hey everyone, I've written an article on integrating GraphQL and MobX with a slight touch of clean architecture.

Hope this helps:
https://codedash.dev/keeping-it-simple-integrate-graphql-mobx-to-your-flutter-app/

Thank you.