Implementation of GraphQL api on flutter

In this blog we are going to discuss the Implementation of GraphQL api on flutter.

GraphQL is the new way of accessing the data from the network. Just like the rest API GraphQL is also used for getting the data from the server from our mobile application on json form.

The response of the API will only generate the data which is requested on the request/query of the GraphQL operation.

So we can make call for data from any of the point throughout our application when ever we require larger or small amount of data.

We use to pass the response key with the request key as well on the requested query/mutation for response.

Flutter is a open source mobile app development framework for developing the hybrid application for the mobile.

You may also check our flutter app development services page to read more about Flutter app development from mobikul.

Implementation:

Initial setup:

Add the qraphql package inside your pubspec.yaml file like below:

graphql_flutter:

1	graphql_flutter:

Create API Client:

Create your API client for connecting with the graphQl server like below:

class ApiClient {
  GraphQlApiCalling client = GraphQlApiCalling();
  MutationsData mutation = MutationsData();

  T? handleResponse<T>(
      QueryResult<Object?> result,
      String operation,
      Parser<T> parser,
      ) {

    Map<String, dynamic>? data = {};
    if (result.hasException) {
      data.putIfAbsent(
        "success", () => false);
    } else {
      data = result.data![operation];
      data?.putIfAbsent("success", () => true);
      data?.putIfAbsent("responseStatus", () => true);
    }
    return parser(data ?? {});
  }

class ApiClient {

GraphQlApiCalling client = GraphQlApiCalling();

MutationsData mutation = MutationsData();

T? handleResponse<T>(

QueryResult<Object?> result,

String operation,

Parser<T> parser,

) {

Map<String, dynamic>? data = {};

if (result.hasException) {

data.putIfAbsent(

"success", () => false);

} else {

data = result.data![operation];

data?.putIfAbsent("success", () => true);

data?.putIfAbsent("responseStatus", () => true);

}

return parser(data ?? {});

}

We have created the API client inside GraphQlApiCalling class the like below:

import 'dart:developer';

import 'package:graphql_flutter/graphql_flutter.dart';
import 'package:test_new/mobikul/helper/app_storage_pref.dart';
import '../constants/app_constants.dart';

class GraphQlApiCalling {
  final loggerLink = LoggerLink();
  final authLink = AuthLink(
    getToken: appStoragePref.getCustomerToken,
  );
  final httpLink = HttpLink(ApiConstant.baseUrl);

  GraphQLClient clientToQuery() {
    return GraphQLClient(
      // cache: GraphQLCache(store: HiveStore()),
      cache: GraphQLCache(),
      link: loggerLink.concat(authLink.concat(httpLink)),
    );
  }
}

class LoggerLink extends Link {
  @override
  Stream<Response> request(Request request, [NextLink? forward]) {
    log("OPERATION ----------------------------> ${request.operation}");
    return forward!(request);
  }
}

import 'dart:developer';

import 'package:graphql_flutter/graphql_flutter.dart';

import 'package:test_new/mobikul/helper/app_storage_pref.dart';

import '../constants/app_constants.dart';

class GraphQlApiCalling {

final loggerLink = LoggerLink();

final authLink = AuthLink(

getToken: appStoragePref.getCustomerToken,

);

final httpLink = HttpLink(ApiConstant.baseUrl);

GraphQLClient clientToQuery() {

return GraphQLClient(

// cache: GraphQLCache(store: HiveStore()),

cache: GraphQLCache(),

link: loggerLink.concat(authLink.concat(httpLink)),

);

}

class LoggerLink extends Link {

@override

Stream<Response> request(Request request, [NextLink? forward]) {

log("OPERATION ----------------------------> ${request.operation}");

return forward!(request);

}

Query:

For getting add accessing data from the graphQl server we use query as operation which will look like a string implemented below:

String notificationList(String storeId, String width) {
    return """
      query notificationList {
          notificationList(storeId:$storeId, width:"$width") {
            success
            message
            notificationList {
               id
               title
               content
               notificationType
               banner
               dominantColor
               categoryName
               categoryId
               productName
               productType
               productId
            }
          }
      }
    """;
  }

String notificationList(String storeId, String width) {

return """

query notificationList {

notificationList(storeId:$storeId, width:"$width") {

success

message

notificationList {

title

content

notificationType

banner

dominantColor

categoryName

categoryId

productName

productType

productId

}

""";

}

Mutation:

Mutation is similar to query the only difference is we have added the argument mutation function on the builder function.

String customerLogin(
      String websiteId,
      String storeId,
      String email,
      String password,
      String token,
      ) {
    return """
      mutation login {
          login(websiteId:$websiteId, storeId:$storeId, username:"$email", password:"$password", token:"$token") {
            success
            message
            customerEmail
            customerName
            customerId
            customerToken
            cartCount
            profileImage
            bannerImage
          }
      }
    """;
  }

String customerLogin(

String websiteId,

String storeId,

String email,

String password,

String token,

) {

return """

mutation login {

success

message

customerEmail

customerName

customerId

customerToken

cartCount

profileImage

bannerImage

}

""";

}

MutationsData class contains the mutations and query string mentioned above

Options:

Option property pass the configuration of query or mutation on query widget.

///Get Notification list Query 
  Future<NotificationScreenModel?> getNotificationList() async {
    var response = await (client.clientToQuery()).query(QueryOptions(
      document: gql(
        mutation.notificationList(appStoragePref.getStoreId(), AppSizes.deviceWidth.toString()),
      ),
    ));
    return handleResponse(
      response,
      'notificationList',
          (json) => NotificationScreenModel.fromJson(json),
    );
  }


///Customer Login Mutation
  Future<LoginResponseModel?> customerLogin(
      String email,
      String password,
      String token,) async {
    var response = await (client.clientToQuery()).mutate(MutationOptions(
      document: gql(
        mutation.customerLogin(
            appStoragePref.getWebsiteId(),
            appStoragePref.getStoreId(),
            email,
            password,
            token
        ),
      ),
    ));
    return handleResponse(
      response,
      'login',
          (json) => LoginResponseModel.fromJson(json),
    );
  }

///Get Notification list Query

Future<NotificationScreenModel?> getNotificationList() async {

var response = await (client.clientToQuery()).query(QueryOptions(

document: gql(

mutation.notificationList(appStoragePref.getStoreId(), AppSizes.deviceWidth.toString()),

));

return handleResponse(

response,

'notificationList',

(json) => NotificationScreenModel.fromJson(json),

);

}

///Customer Login Mutation

Future<LoginResponseModel?> customerLogin(

String email,

String password,

String token,) async {

var response = await (client.clientToQuery()).mutate(MutationOptions(

document: gql(

mutation.customerLogin(

appStoragePref.getWebsiteId(),

appStoragePref.getStoreId(),

email,

password,

token

));

return handleResponse(

response,

'login',

(json) => LoginResponseModel.fromJson(json),

);

}

Conclusion:

For more information regarding the Implementation of GraphQL api on flutter follow link.

In this blog, we have learned Implementation of GraphQL api on flutter and its uses.

Thanks for reading this blog. You can also check other blogs from here.

flutter

Akshay Kumar 27 April 2023

. . .

Discuss on Helpdesk