GraphQL Inspector

Monitor GraphQL operations in real time. Snapbug captures every query, mutation, and subscription flowing through Apollo Client, displaying response data, errors, headers, status codes, response times, and operation types.

How It Works

The GraphQL inspector piggybacks on the Network plugin by intercepting HTTP traffic from Apollo Client through OkHttp. Since Apollo Client for Android uses OkHttp under the hood, you add the Snapbug OkHttp interceptor to your client and pass it to Apollo.

Setup

1. Add the Network plugin dependency

debugImplementation("ai.snapbug:snapbug-okhttp-interceptor:0.1.0")
releaseImplementation("ai.snapbug:snapbug-okhttp-interceptor-no-op:0.1.0")

2. Create an OkHttpClient with the Snapbug interceptor

import io.snapbug.sdk.okhttp.SnapbugOkhttpInterceptor
 
val okHttpClient = OkHttpClient.Builder()
    .addInterceptor(SnapbugOkhttpInterceptor())
    .build()

3. Pass the client to Apollo

import com.apollographql.apollo.ApolloClient
 
val apolloClient = ApolloClient.Builder()
    .serverUrl("https://your-graphql-endpoint.com/graphql")
    .okHttpClient(okHttpClient)
    .build()

That is all you need. Every GraphQL operation executed through this apolloClient will appear in the Snapbug network inspector.

What You See in the Inspector

Each captured GraphQL operation shows:

Viewing GraphQL Errors

GraphQL APIs often return HTTP 200 even when there are errors. Snapbug displays the full response body so you can inspect the errors array alongside any partial data returned.

{
  "data": null,
  "errors": [
    {
      "message": "Unauthorized",
      "locations": [{ "line": 2, "column": 3 }],
      "path": ["viewer"]
    }
  ]
}

Combining with Other Interceptors

You can chain the Snapbug interceptor with other OkHttp interceptors such as logging or authentication:

val okHttpClient = OkHttpClient.Builder()
    .addInterceptor(AuthInterceptor(tokenProvider))
    .addInterceptor(SnapbugOkhttpInterceptor())
    .build()