GraphQL has been rapidly gaining the popularity due to its flexibility of giving the clients to ask what they need and the power of evolving the APIs with ease. There are 2 major libraries that allow us to integrate GraphQL into your web and mobile applications, which are Relay and Apollo. These libraries provide a lot of functionality such as security, caching, subscription and etc for the client to use.

However, most of the time, we may want to understand how are the clients use our GraphQL API and take immediate actions to solve the issue for particular client. Apollo GraphQL gives us a good feature called client-awareness that allow us to monitor on the usage of the Apollo GraphQL API with Graph Manager.

Today, we are going to take a look on how to use client-awareness feature in Apollo GraphQL.

Adding name and version to Apollo Client

Apollo provides different client libraries such as apollo-react for React or React Native apps, apollo-ios for native iOS and apollo-android for native Android. First, to leverage the client awareness feature, we need to add name and version to the config of ApolloClient.

If you are using apollo-react:

import ApolloServer from 'apollo-boost';

const client = new ApolloClient({
  name: 'MyReactApp', // Add this
  version: '1.0.0.1000', // Add this
});

If you are using apollo-ios:

import Foundation
import Apollo

class Network {
  static let shared = Network()

  private lazy var networkTransport = HTTPNetworkTransport(
    url: URL(string: "https://www.mygraphapi.com")!
  )

  private(set) lazy var apollo = ApolloClient(networkTransport: self.networkTransport)

  init() {
    self.networkTransport.clientName = "MyiOSApp";
    self.networkTransport.clientVersion = "1.0.0.100";
  }
}

If you are using apollo-android:

Unfortunately, apollo-android does not support this feature yet. However, we can set the header by ourselves.

var okHttpClient = OkHttpClient
  .Builder()
  .addInterceptor { chain ->
    val original = chain.request()
    val builder = original.newBuilder().method(original.method(), original.body())
    builder.header("apollographql-client-name", "MyAndroidApp")
    builder.header("apollographql-client-version", "1.0.0.100")
    chain.proceed(builder.build())
  }
  .build()

var apolloClient = ApolloClient.builder()
  .serverUrl(BASE_URL)
  .okHttpClient(okHttpClient)
  .build()

You can inspect the http request from iOS simulator and Android emulator with Charles Proxy (Or Reactotron for React Native). You will notice 2 headers: apollographql-client-name and apollographql-client-version have been added to the request headers.

Accessing name and version in Apollo Server

Now, we can access the headers in the Apollo Server like this:

import  ApolloServer from 'apollo-server';

const server = new ApolloServer({
  ...
  context: ({ req }) => {
    const { headers } = req;
    return {
      clientName: headers['apollographql-client-name'],
      clientVersion: headers['apollographql-client-version'],
    };
  },
});

If you have enabled CORS in Apollo Server, remember to whitelist these headers.

We are all set for client awareness integration. In the next tutorial, we will talk about how to enable Graph Manager to monitor your Apollo GraphQL API. Stay tuned!