Max Rozen


How to setup MailChimp with GraphQL

January 16, 2018

This tutorial will walk through adding emails through the MailChimp REST API v3, using GraphQL resolvers.

To see it in action, check out the filter on one of my side-projects: JobsOk

(Optionally) run the following, to be able to use the Node request library with promises

npm install request-promise-native --save

then in your resolvers.js we’ll require the request library:

const request = require('request-promise-native')

then in your schema.js we’ll define the createEmail mutation, which will call our resolver:

type Mutation {
  createEmail(name: String!, email: String!, frequency: String!, tag:String, location:String, domain: String!, filter: String, created_at: String!): Email

Finally, in your resolvers.js we’ll create a Promise which restructures the args coming in, into a format that MailChimp likes (Note - your custom fields can ONLY go into the merge_fields object), and then POST that data to their endpoint:

createEmail: (root, args, context) => {
      return new Promise((resolve, reject) => {
        const Item = {
        const data = {
          merge_fields: {
            LOCATION: args.location,
            TAG: args.tag,
            FREQUENCY: args.frequency,
            DOMAIN: args.domain
          status: 'pending'

        const options = {
          json: data,
          headers: {
              'Basic ' +
              new Buffer('anything' + ':' + MAILCHIMP_API_KEY).toString(

          method: 'POST',
            'https://' +
            '' +
            MAILCHIMP_LIST_ID +

          .then(data => {
            return resolve(Item)
          .catch(err => {
            return reject(err)

Note that because my mutation uses a predefined Email type, I have to return the Item object. Your code would be different.

On the frontend, all you have to do is have a GraphQL HOC define your mutation, then it’s just a matter of calling the mutation, like so:

  variables: {
    name: name,
    email: email,
    frequency: frequency,
    domain: domain,
    created_at: now,
    tag: tagFilter,
    location: locationFilter

Shameless Plug

If you'd like more tips on how to improve your frontend, you can follow me on Twitter as I regularly post articles there.