Why isn't mailchimp API working with fetch?

Question

I'm trying to add an email address to a mailchimp list I have.

This is for a react native app and I'm trying to implement the request using fetch.

This is my code within the component:

import React, { Component } from 'react';
import { View, Text } from 'react-native';
import { connect } from 'react-redux';
import { emailChanged, nameChanged, addToWaitingList } from '../actions';
import { Card, CardSection, Input, Button, Spinner } from '../components/Auth';

class addToWaitingListForm extends Component {

  onEmailChange(text) {
    this.props.emailChanged(text);
  }

  onButtonPress() {
    const { email } = this.props;

    this.props.addToWaitingList({ email });
  }

  renderButton() {
    if (this.props.loading) {
      return <Spinner size="large" />;
    }
    return (
      <Button onPress={this.onButtonPress.bind(this)}>
        Keep me in the loop!
      </Button>
    );
  }

  render() {
    return (
        <View>
          <Card>
            <CardSection>
              <Input
                placeholder="your name"
                onChangeText={this.onNameChange.bind(this)}
                value={this.props.name}
              />
            </CardSection>

            <CardSection>
              <Input
                placeholder="email@uni.ac.uk"
                onChangeText={this.onEmailChange.bind(this)}
                value={this.props.email}
              />
            </CardSection>

            <Text style={styles.errorTextStyle}>
              {this.props.error}
            </Text>

            <CardSection style={{ borderBottomWidth: 0 }}>
              {this.renderButton()}
            </CardSection>
          </Card>
        </View>
    );
  }
}

const mapStateToProps = ({ auth }) => {
  const { email, name, error, loading } = auth;

  return { email, name, error, loading };
};

export default connect(mapStateToProps, {
  emailChanged,
  addToWaitingList
})(addToWaitingListForm);

Add this is my action code for interacting with the mailchimp api:

import Router from '../../navigation/Router';
import { getNavigationContext } from '../../navigation/NavigationContext';

export const addToWaitingList = ({ email }) => {
  const emailListID = 'e100c8fe03';

  fetch(`https://us13.api.mailchimp.com/3.0/lists/${emailListID}/members/`, {
    method: 'POST',
    body: JSON.stringify({
      'email_address': email,
      'status': 'subscribed',
      'merge_fields': {
        'FNAME': 'Urist',
        'LNAME': 'McVankab'
      }
    })
  })
    .then(() => addSubscriberSuccess())
    .catch(error => console.log(error));
};

const addSubscriberSuccess = () => {
  getNavigationContext().getNavigator('root').immediatelyResetStack([Router.getRoute('auth')]);
};

Right now, the error I'm just getting back is ExceptionsManager.js:62 Cannot read property 'type' of undefined and Error: unsupported BodyInit type

What does this mean and how can I fix this?

Your `body` has to be a string. Use `body: JSON.stringify(mybody)` — martinarroyo, Dec 06 '16 at 17:34
I've changed it, but still not working :/ What else could it be? — bloppit, Dec 06 '16 at 17:43
It says `ExceptionsManager.js:62 Cannot read property 'type' of undefined` And that the network request has failed — bloppit, Dec 06 '16 at 17:45
what's the response in postman? are you missing some headers maybe? — azium, Dec 06 '16 at 18:07
It just says 'Could not get any response' I don't think so? I'm using the guides here: http://developer.mailchimp.com/documentation/mailchimp/guides/manage-subscribers-with-the-mailchimp-api/ It doesn't mention any other headers — bloppit, Dec 06 '16 at 18:16
oh I had to add the API location in the url. I've done that and now I'm getting back a response. It's saying I'm missing my API key, which I don't think I am lol, I dunno how to add it into postman. It keeps mentioning something called --curl in the docs — bloppit, Dec 06 '16 at 18:23

score 3 · Answer 1 · answered Jan 18 '17 at 18:04

You need to do two things. First off you need to send the basic authentication via fetch so you cant do "user:pass" You have to convert it with btoa('user:pass').

Then you have to send it with mode: 'no-cors'

    let authenticationString = btoa('randomstring:ap-keyxxxxxxx-us9');
    authenticationString = "Basic " + authenticationString;

    fetch('https://us9.api.mailchimp.com/3.0/lists/111111/members', {
      mode: 'no-cors',
      method: 'POST',
      headers: {
        'authorization': authenticationString,
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        email_address: "dude@gmail.com", 
        status: "subscribed",
      })
    }).then(function(e){
        console.log("fetch finished")
    }).catch(function(e){
        console.log("fetch error");
    })

Why isn't mailchimp API working with fetch?

1 Answers1