onRequest Hook Configuration

Published: 2022-05-23

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

The onRequest hook in particular is fired "before" the request is sent to an origin server. The hook can be attached to any http-based DataSource.

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#

Via the onRequest hook, you're able to completely rewrite any request that is being made by the WunderGraph resolvers. Here are some example use cases:

add a custom header to every request
add a custom header to some requests, based on the identity of the user (via ctx.user)
sign the request with a custom algorithm (e.g. useful for AWS IAM)
use a different domain for the request, depending on the datacenter the request is executed in

Examples#

This example uses the onRequest hook for the Operation "Countries". It's simply logging the request and returns "void", meaning that the hook is returning "skip", so the request is not modified.

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

Similar to the first request, but this time the hook is enabled for all Operations.

const wunderGraphHooks = configureWunderGraphHooksWithClient(client => ({
    global: {
        httpTransport: {
            onRequest: {
                hook: async (ctx, request) => {
                    console.log('onSend', JSON.stringify(request, null, 2));
                },
                enableForAllOperations: true,
            },
        }
    }
}));

This is another example, showing how you can inject a secret and the user's identity into the request. Similarly, you could also generate a JWT based on the claims from the user (via ctx.user) and inject it into the request. This way, you're able to authenticate against the origin server.

const wunderGraphHooks = configureWunderGraphHooksWithClient(client => ({
    global: {
        httpTransport: {
            onRequest: {
                hook: async (ctx, request) => {
                    return {
                        ...request,
                        headers: {
                            ...request.headers,
                            'X-WunderGraph-Secret': "foo",
                            'X-WunderGraph-User-Email': ctx.user?.email ?? "",
                        }
                    }
                },
                enableForAllOperations: true,
            },
        }
    }
}));

Another use case might be to restrict access to a specific origin server, based on the user's identity. In the following example, we're cancelling the request chain for the user with a specific email address.

const wunderGraphHooks = configureWunderGraphHooksWithClient(client => ({
    global: {
        httpTransport: {
            onRequest: {
                hook: async (ctx, request) => {
                    if (ctx.user?.email === "jens@wundergraph.com"){
                        return "cancel";
                    }
                },
                enableForAllOperations: true,
            },
        }
    }
}));