Customizing Graphql Mutation With Apollo Client

With its growing popularity, Apollo Client has become a powerful tool for managing the data layer in modern React applications. One of the essential features of Apollo Client is its ability to customize the mutations performed on the server.

In this blog post, we'll walk through the steps required to customize a GraphQL Mutation using Apollo Client. With a little bit of configuration, Apollo Client enables developers to take full control over the operations sent to the server.

Configure Apollo Client

To start, we need to configure Apollo Client. This is done by creating an Apollo Client instance and providing an Apollo Link object to the createHttpLink method.

import { ApolloClient, InMemoryCache, HttpLink } from '@apollo/client';

const client = new ApolloClient({
    cache: new InMemoryCache(),
    link: createHttpLink({
        uri: 'http://localhost:4000/graphql',
    }),
});

Once that is done, we can move on to customizing a mutation operation.

Customizing a Mutation Operation

To customize a mutation operation, we need to use the setContext method. This method takes an object with two properties as its argument - headers and http. We can use the headers property to set custom headers which Apollo Client will include in every mutation operation.

const client = new ApolloClient({
    cache: new InMemoryCache(),
    link: ApolloLink.from([
        onError(({ graphQLErrors, networkError }) => {
            // ...
        }),
        setContext({ headers: { authToken: '12345' } }),
        createHttpLink({
            uri: 'http://localhost:4000/graphql',
        }),
    ]),
});

In the example above, we have set the authToken header to 12345. This header will now be sent with every mutation operation.

The http property can also be used to customize a mutation operation. We can use this property to modify the mutation's variables. For example, we can set the extra variable in every mutation operation sent to the server, regardless of the mutation type.

const client = new ApolloClient({
    cache: new InMemoryCache(),
    link: ApolloLink.from([
        onError(({ graphQLErrors, networkError }) => {
            // ...
        }),
        setContext({
            http: operation => {
                operation.setContext({
                    headers: { authToken: '12345' }
                });
                operation.variables.extra = '12345';
                return operation;
            }
        }),
        createHttpLink({
            uri: 'http://localhost:4000/graphql',
        }),
    ]),
});

In the example above, we have set the extra variable to 12345 for every mutation operation.

We can also use the setContext method to modify the HTTP options used by the request. For example, we can set a timeout for the request or configure redirects.

const client = new ApolloClient({
    cache: new InMemoryCache(),
    link: ApolloLink.from([
        onError(({ graphQLErrors, networkError }) => {
            // ...
        }),
        setContext({
            http: operation => {
                operation.setContext({
                    headers: { authToken: '12345' }
                    http: {
                        timeout: 1000,
                        redirect: 'follow',
                    }
                });
                operation.variables.extra = '12345';
                return operation;
            }
        }),
        createHttpLink({
            uri: 'http://localhost:4000/graphql',
        }),
    ]),
});

In the example above, we have set the timeout to 1000 milliseconds and the redirect option to follow.

Conclusion

In this blog post, we saw how to use the setContext method to customize a GraphQL Mutation using Apollo Client. With some configuration, Apollo Client enables us to take full control over operations sent to the server.

Using the setContext method, we can set custom headers, modify the mutation's variables and configure HTTP options for the request. This makes it easy to customize the mutations sent to the server and integrate them into our application in a more seamless way.