Apollo Graphql mutation and refetch queries returning empty data

Question

Currently working on an app where we have a contact list with id and list name. Clicking on the contact list name will bring to a detailed page listing all contacts within the said contact listname.

On this page a button is set to show input fields to add more contacts. These contacts are then added using mutations.

Once the mutation is done, the contact list detail component failed to render and causing error of undefined (for map operators), however refreshing the page clearly shows the contact is successfully added. Here are the code snippets:

ManageContact component, access via /contacts/manage/:id route

....

class ManageContact extends Component {
  state = {
    showAddForm: false
  };

  handleAddContactBtn = () => {
    this.setState({ showAddForm: !this.state.showAddForm });
  };

  render() {
    const { showAddForm } = this.state;

    return (
      <Query
        query={findContactList}
        variables={{ id: this.props.match.params.id }}
      >
        {({ loading, error, data:{findContactList} }) => {
          if (loading) return "loading";
          if (error) return "error";
          console.log(findContactList)
          const renderContacts = findContactList => {
            const { contacts } = findContactList;
            return contacts.map((contact, index) => {
              return (
                <Row key={contact._id}>
                  <Col s={3}>{contact.firstName}</Col>
                  <Col s={3}>{contact.lastName}</Col>
                  <Col s={3}>{contact.email}</Col>
                  <Col s={3}>
                    <Button>
                      <Icon>edit</Icon>
                    </Button>
                    <Button>
                      <Icon>delete_forever</Icon>
                    </Button>
                  </Col>
                </Row>
              );
            });
          };
          return (
            <Fragment>
              <h3>{findContactList.listName}</h3>
              <Row>
                <Button onClick={this.handleAddContactBtn} className="right">
                  <Icon>{showAddForm ? "close" : "person_add"}</Icon>
                </Button>
              </Row>
              {renderContacts(findContactList)}
              {showAddForm ? (
                <RecipientList contactListID={findContactList._id} onFinishCreateContact={() => this.handleAddContactBtn()}/>
              ) : null}
            </Fragment>
          );
        }}
      </Query>
    );
  }
}

export default ManageContact;

And here is the RecipientList component, where mutation to add contacts are performed:

...
import {
  createContactMutation,
  findContactList,
  userContactListQuery
} from "../../../graphql";

class RecipientList extends Component {
  state = {
    firstName: "",
    lastName: "",
    email: ""
  };

  createContact = async () => {
    const {
      createContactMutation,
      contactListID,
      onFinishCreateContact
    } = this.props;
    const { firstName, lastName, email } = this.state;
    onFinishCreateContact()
    try {
      await createContactMutation({
        variables: {
          contactListID,
          firstName,
          lastName,
          email
        },
        refetchQueries: [
          { query: userContactListQuery },
          { query: findContactList, variables:{ id: contactListID }}
        ]
      });


    } catch (err) {
      console.log(err);
    }

  };

  handleInputChange = e => {
    this.setState({ [e.target.name]: e.target.value });
  };

  renderRecipientAddForm = () => {
    const { firstName, lastName, email } = this.state;
    return (
      <Row>
        <Col s={3}>
          <Input
            label="First Name"
            name="firstName"
            value={`${firstName}`}
            onChange={this.handleInputChange}
          />
        </Col>
        <Col s={3}>
          <Input
            label="Last Name"
            name="lastName"
            value={`${lastName}`}
            onChange={this.handleInputChange}
          />
        </Col>
        <Col s={3}>
          <Input
            label="Email"
            name="email"
            value={`${email}`}
            onChange={this.handleInputChange}
          />
        </Col>
        <Col s={3}>
          <Button onClick={this.createContact}>+</Button>
        </Col>
      </Row>
    );
  };

  render() {
    return <span>{this.renderRecipientAddForm()}</span>;
  }
}

export default graphql(createContactMutation, {
  name: "createContactMutation"
})(RecipientList);

I have been trying to use refetchqueries but it keeps failing. I know when i console log after the mutation, i get the data being undefined, which is needed for the map operator within ManageContact component.

Any ideas on what i did wrong?