Authenticate GraphQL request in flutter

In this blog we are going to discuss how to Authenticate GraphQL request in flutter with token.

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.

If you have not integrated the GraphQL yet then you can follow my another blog Implementation of GraphQL api on flutter for complete implementation steps.

We are going to authenticate the GraphQL request by using the device token. Also we are going to add some valuable information on the header of our GraphQL to our server.

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 with authentication header like below:

import 'dart:developer';

import 'package:flutter/cupertino.dart';
import 'package:graphql_flutter/graphql_flutter.dart';
import '../constants/app_constants.dart';

class GraphQlApiCalling {
  final loggerLink = LoggerLink();
  final authLink = AuthLink(
    getToken: 'DEVICE_TOKEN',
  );
  final httpLink = HttpLink(
      'YOUR_SERVER_URL',
      defaultHeaders: {
        'Content-Type': 'application/json',
        'Accept-Charset': 'utf-8',
        'authKey': 'YOUR_AUTH_KEY',
        'apiAuthType': 'API_AUTH_TYPE',
        'token': 'DEVICE_TOKEN',
      },
  );

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

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

import 'dart:developer';

import 'package:flutter/cupertino.dart';

import 'package:graphql_flutter/graphql_flutter.dart';

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

class GraphQlApiCalling {

final loggerLink = LoggerLink();

final authLink = AuthLink(

getToken: 'DEVICE_TOKEN',

);

final httpLink = HttpLink(

'YOUR_SERVER_URL',

defaultHeaders: {

'Content-Type': 'application/json',

'Accept-Charset': 'utf-8',

'authKey': 'YOUR_AUTH_KEY',

'apiAuthType': 'API_AUTH_TYPE',

'token': 'DEVICE_TOKEN',

);

GraphQLClient clientToQuery() {

return GraphQLClient(

cache: GraphQLCache(),

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

);

}

class LoggerLink extends Link {

@override

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

debugPrint("BASE URL ----------------------------> ${ApiConstant.baseUrl}");

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

return forward!(request);

}

DEVICE_TOKEN will be replaced with your device token. Basically it is the mobile token from where we are making graphQL request.

YOUR_SERVER_URL is the server url with the graphQL module module path like below:

yourWebserverServerUrl/graphql

1	yourWebserverServerUrl/graphql

defaultHeaders key is used inside the HTTPLink class for adding the header data for the request.

YOUR_AUTH_KEY will be replaced with your authenticated key. It is basically a encrypted key like encode with MD5 encryption of the way it is handled on the server end.

Conclusion:

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

In this blog, we have learned about how to Authenticate GraphQL request in flutter with token and add custom header for request.

You can also check GrapghQL with cache handling on the link.

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

flutter

Akshay Kumar 31 July 2023

. . .

Discuss on Helpdesk

Authenticate GraphQL request in flutter

Implementation:

Initial setup:

Create API Client:

Conclusion:

Leave a Comment Cancel Reply

Message Sent!