Monitor Apollo GraphQL with Graph Manager (Part 1)

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!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: