Flutter GraphQL How to call 2 mutations with one button?

Question

I've created and tested 2 GraphQL mutations. I'm using them in Flutter, such that when I tap on a button, it will trigger both mutations. It was ok when I put just one of them in the onPressed, only one will work. So how can I call both in the onPressed?

I've tried creating like function1() and function2() to hold each mutations, but the onPressed don't seem to execute those functions.

Appreciate for any help. Thanks.

This part call the 1st mutation that append an item to a list. I call addToVol() but it will not trigger the 2nd mutation.

Padding(
  padding: EdgeInsets.all(16),
  child: GraphQLProvider(
  client: graphQLConfiguration.client,
  child: CacheProvider(
    child: Mutation(
      options: MutationOptions(
        documentNode: gql(addToSession),
        update: (Cache cache, QueryResult result) {
          return cache;
        },
        onCompleted: (dynamic resultData) {
          print(resultData);
        },
      ),
      builder: (RunMutation runMutation, QueryResult result) {
        if (result.hasException) {
          print(result.exception.toString());
        }
        return FlatButton(
          onPressed: () async {
            if (snapshot.hasData) {
              if (_isAuthenticated) {
                if (!haveSession) {
                  runMutation({
                    'org': activity.org,
                    'sessionId': activity.id,
                    'volId': savedOrgValue,
                  });
//                addToVol();
                } else {

                }
                } else {
                  Navigator.push(
                    context,
                    PageRouteBuilder(
                      pageBuilder: (context, animation1, animation2) => Login(),
                      transitionDuration: Duration(seconds: 0),
                    ),
                  );
                }
              }
            },
            shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(80.0)),
            padding: EdgeInsets.all(16),
            textColor: Colors.white,
            child: Ink(
              decoration: BoxDecoration(
                borderRadius: BorderRadius.all(Radius.circular(80.0)),
              ),
              child: Container(
                child: Text('Sign Up for Activity'),
              ),
            ),
          );
        }
      )
    )
  ),
),

And I've addToVol() at the bottom.

addToVol() {
  GraphQLProvider(
    client: graphQLConfiguration.client,
    child: CacheProvider(
      child: Mutation(
        options: MutationOptions(
          documentNode: gql(registerSessionToVol),
          update: (Cache cache, QueryResult result) {
            return cache;
          },
          onCompleted: (dynamic resultData) {
            print(resultData);
          },
        ),
        builder: (RunMutation runMutation, QueryResult result) {
          if (result.hasException) {
            print(result.exception.toString());
          }
          runMutation({
            'org': activity.org,
            'sessionId': activity.vid,
            'volId': savedOrgValue,
          });
          return;
        }
      )
    )
  );
}

Answer 1

Wrap the every Mutation into the State of a StatefulWidget and add a GlobalKey for each one.

final mutationKey1 = GlobalKey<MutationState>();

// In the build method
Mutation(
  key: mutationKey1
)

Make the same with the second one:

final mutationKey2 = GlobalKey<MutationState>();

And in the button onPress/onTap callback call the runMutation() method for each one:

FlatButton(
  onPressed: (){
    //...
    mutationKey1.currentState.runMutation(mapVariables1);
    mutationKey2.currentState.runMutation(mapVariables2);
    //...
  }
)

---

^{Remember that depending on how you organize your code, the way to access mutationKey1 and mutationKey2, the access will be different.}