Modifying Response of Graphql before sent out

After doing a lot of research I found out that the only allowed top level properties in a graphql responses are data, errors, extensions. Here you can find the regarding Issue in GitHub

GitHub Issue

for my purpose I will probably use the extensions field.

Example data modifier

This function will concat ":OK" suffix on each string in the output object

// Data/output modifier - concat ":OK" after each string
function outputModifier(input: any): any {
    const inputType = typeof input;

    if (inputType === 'string') {
        return input + ':OK';
    } else if (Array.isArray(input)) {
        const inputLength = input.length;
        for (let i = 0; i < inputLength; i += 1) {
            input[i] = outputModifier(input[i]);
        }
    } else if (inputType === 'object') {
        for (const key in input) {
            if (input.hasOwnProperty(key)) {
                input[key] = outputModifier(input[key]);
            }
        }
    }

    return input;
}

Solution 1 – Override GraphQL Resolvers

Long story short: you have 3 main types (Query, Mutation, and Subscription).
Each main type has fields with resolvers.
The resolvers are returning the output data.

So if you override the resolvers you will be able to modify the outputs.

Example transformer

import { GraphQLSchema } from 'graphql';

export const exampleTransformer = (schema: GraphQLSchema): GraphQLSchema => {
    // Collect all main types & override the resolvers
    [
        schema?.getQueryType()?.getFields(),
        schema?.getMutationType()?.getFields(),
        schema?.getSubscriptionType()?.getFields()
    ].forEach(fields => {
        // Resolvers override
        Object.values(fields ?? {}).forEach(field => {
            // Check is there any resolver at all
            if (typeof field.resolve !== 'function') {
                return;
            }

            // Save the original resolver
            const originalResolve = field.resolve;

            // Override the current resolver
            field.resolve = async (source, inputData, context, info) => {
                // Get the original output
                const outputData: any = await originalResolve.apply(originalResolve.prototype, [source, inputData, context, info]);

                // Modify and return the output
                return outputModifier(outputData);
            };
        });
    });

    return schema;
};

How to use it:

// Attach it to the GraphQLSchema > https://graphql.org/graphql-js/type/
let schema = makeExecutableSchema({...});
schema = exampleTransformer(schema);
const server = new ApolloServer({schema});
server.listen(serverConfig.port);

This solution will work on any GraphQL-JS service (apollo, express-graphql, graphql-tools, etc.).

Keep in min with this solution you will be able to manipulate the inputData too.

Solution 2 – Modify the response

This solution is more elegant, but is implemented after the implementation of the directives and scalar types and can not manipulate the input data.

The specific for the output object is that the data is null-prototype object (no instance methods like .hasOwnProperty(), .toString(), …) and the errors are locked objects (readonly).
In the example I’m unlocking the error object… be careful with this and do not change the structure of the objects.

Example transformer

import { Translator } from '@helpers/translations';
import type { GraphQLResponse, GraphQLRequestContext } from 'apollo-server-types';
import type { GraphQLFormattedError } from 'graphql';

export const exampleResponseFormatter = () => (response: GraphQLResponse, requestContext: GraphQLRequestContext) => {
    // Parse locked error fields
    response?.errors?.forEach(error => {
        (error['message'] as GraphQLFormattedError['message']) = exampleTransformer(error['message']);
        (error['extensions'] as GraphQLFormattedError['extensions']) = exampleTransformer(error['extensions']);
    });

    // Parse response data
    response.data = exampleTransformer(response.data);

    // Response
    return response;
};

How to use it:

// Provide the schema to the ApolloServer constructor
const server = new ApolloServer({
    schema,
    formatResponse: exampleResponseFormatter()
});

Conclusion

I’m using both solutions in my projects. With the first you can control the input and the output based on specific access directives in the code or to validate the whole data flow (on any graphql type) .
And second to translate all the strings based on the context headers provided by the user without messing resolvers and the code with language variables.

Those examples are tested on TS 4+ and GraphQL 15 and 16