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:
|
1 |
graphql_flutter: |
Create API Client:
Create your API client for connecting with the graphQl server like below:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
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 } } } """; } |
Mutation:
Mutation is similar to query the only difference is we have added the argument mutation function on the builder function.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
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 } } """; } |
MutationsData class contains the mutations and query string mentioned above
Options:
Option property pass the configuration of query or mutation on query widget.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
///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.
Be the first to comment.