onResponse Hook Configuration

Published: 2022-05-23

Global httpTransport-based hooks allow you to intercept and modify the http request chain.

The onResponse hook is called after the response has been received from the server.

Enabling the hook means, the request chain will always be intercepted and the hook will be called. As this might be a costly operation, the hook needs to be enabled on a per-operation basis.

You can either enable the hook globally for all Operations or define the Operations you'd like to enable the hook for.

Use cases#

The onResponse hook allows you to fully modify the response from an origin server before it's passed back to the WunderGraph resolvers. Here are a few example use cases:

filter out sensitive data from the response
add additional data to the response
modify the response
add additional headers to the response
add a __typename to the response

Examples#

In this simple example, we're logging the response body to the console and return "void". Returning void means, the hook will be skipped and the original response will be returned to the resolvers.

const wunderGraphHooks = configureWunderGraphHooksWithClient(client => ({
    global: {
        httpTransport: {
            onResponse: {
                hook: async (ctx, response) => {
                    console.log('onResponse', JSON.stringify(response, null, 2));
                },
                enableForOperations: ["Countries"],
            }
        }
    }
}));

In the next example, we're returning the original response but modify the statusCode to a well known value, 418.

const wunderGraphHooks = configureWunderGraphHooksWithClient(client => ({
    global: {
        httpTransport: {
            onResponse: {
                hook: async (ctx, response) => {
                    return {
                        ...response,
                        statusCode: 418,
                    }
                },
                enableForOperations: ["Countries"],
            }
        }
    }
}));