Return extra headers for debugging (for use within Chrome Dev Tools or similar)

[ustun]

It would be great if apollo returned the following extra headers for responses, at least in dev mode:

X-APOLLO-OPTYPE: operation type: query or mutation
X-APOLLO-OPNAME: operation name, if exists
X-APOLLO-QUERIES: queries (name of each query)
X-APOLLO: concatenation of those

The use case is the following: Network tab in Chrome Dev Tools allows you to add custom headers to the results table, which will make it easier to debug requests.

See screenshot as an example

When you open Chrome Dev Tools or similar, all the requests are sent to /api/graphql, making it very hard to see which request is which without clicking and inspecting the body manually.

I know that there are apollo extensions for Chrome, but I prefer using the stock Network tab in Chrome Dev Tools.

This feature can already be implemented in userland to some extent (we can set response headers for successful responses via something like this:

class AddGraphqlHeadersExtension extends GraphQLExtension {
  willSendResponse(o) {
    const { context, graphqlResponse } = o

    const parsedQuery = gql(context.req.body.query)

    let opType = '',
      opName = '',
      subqueries = ''

    try {
      opType = parsedQuery.definitions[0].operation
    } catch (_e) {}
    try {
      opName = parsedQuery.definitions[0].name.value
    } catch (_e) {}

    try {
      subqueries = parsedQuery.definitions[0].selectionSet.selections
        .map(x => x.name.value)
        .join(' & ')
    } catch (_e) {}

    // const bodySubStr = context.req.body.query.replace(/\n/g, '').substr(0, 18)

    graphqlResponse.http.headers.set('X-GRAPHQL-OPTYPE', opType)
    graphqlResponse.http.headers.set('X-GRAPHQL-OPNAME', opName)
    graphqlResponse.http.headers.set('X-GRAPHQL-QUERIES', subqueries)
    graphqlResponse.http.headers.set(
      'X-GRAPHQL',
      [opType, opName, subqueries].filter(Boolean).join(' ')
    )

    return o
  }
}

This feature should be builtin, and also cover errors. Note in the screenshot that I could not set the headers properly for the graphql which returns an error):

[glasser]

This does seem like it could be useful, but it also looks like it functions perfectly well as a plugin. Perhaps it would make a nice plugin to publish as an npm package? I can imagine wanting lots of customization of the details of these headers, so I don't think it makes sense to be part of the core project. If it would be easier with more information being provided to the plugin API, that could help! Note that you might want to use o.operationName!