Мутация Apollo Graphql и запросы повторной выборки, возвращающие пустые данные

В настоящее время мы работаем над приложением, в котором у нас есть список контактов с идентификатором и именем списка. При нажатии на имя списка контактов открывается подробная страница, на которой перечислены все контакты в указанном списке контактов.

На этой странице установлена ​​кнопка для отображения полей ввода для добавления дополнительных контактов. Затем эти контакты добавляются с помощью мутаций.

После завершения мутации компонент подробных сведений списка контактов не удалось отобразить, что привело к ошибке undefined (для операторов карты), однако обновление страницы ясно показывает, что контакт успешно добавлен. Вот фрагменты кода:

Компонент ManageContact, доступ через / 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.info(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;

А вот компонент RecipientList, в котором выполняется мутация для добавления контактов:

...
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.info(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);

Я пытался использовать refetchqueries, но это не помогло. Я знаю, что когда после мутации я консоль журнал, я получаю данные undefined, что необходимо для оператора карты в компоненте ManageContact.

Есть идеи о том, что я сделал не так?