How can I use graphql-flutter with MultiProvider

[jerryzhoujw]

Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        ChangeNotifierProvider<AuthState>.value(
          notifier: AuthState(),
        ),
        // GraphQLProvider(child: _client,),              //<-- error
        ChangeNotifierProvider<GraphQLClient>.value(      //<-- error
          notifier: _client,
        ),
        // ValueNotiferProvider.val
      ],
      child: MaterialApp(
           ....
      ),
    );
  }
}

How can I do this above? Just want to make auth server & graphQL service together.

I was plan to separate multi service(assume include Auth, graphQL, store and so on ) use MultiProvider, so I'd like use GraphQLProvider like this too, but it gives error. Any suggestion for separation like these?

[eusdima]

@HofmannZ you did it for our apps, can you share with him how you did the multi provider?

[mainawycliffe]

GraphQLProvider is just a widget, which wraps around an inherited widget. This inherited widget is the one that pump down the client to all descendants, so that when you use the Query widget, it can access the client from the GraphQLProvider.

One solution i can think of is to pass the client itself, something like:

MultiProvider(
  providers: [
    Provider<ValueNotifier<GraphQLClient>>.value(value: client),
  ],
  child: someWidget,
)

And the either use the dart client or create GraphQLProvider Widget at the appropriate location in the widget tree with getting the client from Provider. You can also use the GraphQLProvider widget as the direct child of MultiProvider.

On a package level, may be we can have something like QueryWithProvider widget, that reads the client value from provider instead of the inherited widget, but otherwise behaves the same. I think this can be done without breaking anything.

[jerryzhoujw]

yes, I use GraphQLProvider as child of MultiProvider for now, Thank you @mainawycliffe

[franzejr]

Can you guys give a more detailed example on how to use it with MultiProvider? Thanks!

[mainawycliffe]

For now, the easiest way I can think of is using GraphQLProvider as a child of MultiProvider. Something like:

MultiProvider(
  providers: [
    Provider<Foo>.value(value: foo),
    Provider<Bar>.value(value: bar),
    Provider<Baz>.value(value: baz),
  ],
  child: GraphQLProvider(...),
)

[Jaymal1]

Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        ChangeNotifierProvider<AuthState>.value(
          notifier: AuthState(),
        ),
        // GraphQLProvider(child: _client,),              //<-- error
        ChangeNotifierProvider<GraphQLClient>.value(      //<-- error
          notifier: _client,
        ),
        // ValueNotiferProvider.val
      ],
      child: MaterialApp(
           ....
      ),
    );
  }
}

How can I do this above? Just want to make auth server & graphQL service together.

I was plan to separate multi service(assume include Auth, graphQL, store and so on ) use MultiProvider, so I'd like use GraphQLProvider like this too, but it gives error. Any suggestion for separation like these?

how did you solve it please?