Apollo Tracing is a performance tracing specification for GraphQL servers. It's not part of the actual GraphQL specification itself, but there is a common agreement in the GraphQL community that this should be supported by all GraphQL servers.

Tracing results are by default hidden in Playground. You have to either click on the TRACING button in the bottom right corner or enable it with the tracing.hideTracingResponse flag in the settings.

Enabling Apollo Tracing

Due to built-in Apollo Tracing support it's actually very simple to enable this feature. There is an option named TracingPreference which takes one of three states. In the following table we find all of these states explained.

When creating your GraphQL schema, we just need to add an additional option object to enable Apollo Tracing. By default, as explained in the above table Apollo Tracing is disabled. Let's take a look at the first example which describes how Apollo Tracing is enabled permanently.

Enable Apollo Tracing permanently

public class Startup
{
    public void ConfigureServices(IServiceCollection services)
    {
        services
            .AddGraphQLServer()
            .AddQueryType<Query>()

            // this adds apollo tracing
            .AddApolloTracing(TracingPreference.Always);
    }

    // Code omitted for brevity
}

By setting the TracingPreference to TracingPreference.Always, we enabled Apollo Tracing permanently; nothing else to do here. Done.

Enable Apollo Tracing per query request

First, we need to enable Apollo Tracing on the server-side. It's almost identical to the above example.

public class Startup
{
    public void ConfigureServices(IServiceCollection services)
    {
        services
            .AddGraphQLServer()
            .AddQueryType<Query>()

            // this adds apollo tracing
            .AddApolloTracing(TracingPreference.OnDemand);
    }

    // Code omitted for brevity
}

Second, we have to pass an HTTP header GraphQL-Tracing=1 or X-Apollo-Tracing=1 on the client-side with every query request we're interested in.

When not using the Hot Chocolate ASP.NET Core or Framework stack we have to implement the mapping from the HTTP header to the query request property by our self which isn't very difficult actually. See how it's solved in the Hot Chocolate ASP.NET Core and Framework stack.