Как преобразовать данные tinymce в строку для GraphQL

Question

Я работаю над небольшим приложением MERN с TinyMCE для редактирования расширенного текста и GraphQL как ORM.Я выполнил первоначальные инструкции по установке и интеграции, но у меня возникла проблема с получением GraphQL для распознавания пути.

Message: Project validation failed: description: Path `description` is required., Location: [object Object], Path: createProject

Вот компонент.Я не хочу, чтобы кто-то что-то пропустил, поэтому я покажу все это.

AddProject.jsx

import React, { Component } from "react";
import { graphql, compose } from "react-apollo";
import {
  getProjectsQuery,
  createProjectMutation
} from "../../../queries/queries";
import { Editor } from '@tinymce/tinymce-react';

class AddProject extends Component {
  constructor(props) {
    super(props);
    this.state = {
      title: "",
      subtitle: "",
      description: "",
      url: "",
      github: ""
    };
  }
  displayProjects() {
    var data = this.props.getProjectsQuery;
    if (data.loading) {
      return <option disabled>Loading Projects</option>;
    } else {
      return data.projects.map(project => {
        return <option key={project.id}>{project.title}</option>;
      });
    }
  }

  submitForm(event) {
    event.preventDefault();
    // use the addBookMutation
    this.props.createProjectMutation({
      variables: {
        title: this.state.title,
        subtitle: this.state.subtitle,
        description: this.state.description,
        url: this.state.url,
        github: this.state.github
      },
      refetchQueries: [{ query: getProjectsQuery }]
    });
  }



  render() {
    return (
      <form className="container" onSubmit={this.submitForm.bind(this)}>
        <div>
          <label>Title:</label>
          <br />
          <input
            type="text"
            onChange={event => this.setState({ title: event.target.value })}
          />
        </div>
        <div>
          <label>Subtitle:</label>
          <br />
          <input
            type="text"
            onChange={event => this.setState({ subtitle: event.target.value })}
          />
        </div>
        <div>
          <label>Description:</label>
          <br />
          <Editor
            initialValue="<p>This is the initial content of the editor</p>"
            init={{
              plugins: 'link image code',
              toolbar: 'undo redo | bold italic | alignleft aligncenter alignright | code',
              entity_encoding: "raw"
            }}
            onChange={event => this.setState({ description: event.target.value })}
          />
        </div>
        <div>
          <label>URL:</label>
          <br />
          <input
            type="text"
            onChange={event => this.setState({ url: event.target.value })}
          />
        </div>
        <div>
          <label>GitHub:</label>
          <br />
          <input
            type="text"
            onChange={event => this.setState({ github: event.target.value })}
          />
        </div>
        <br />
        <button>+</button>
      </form>
    );
  }
}

export default compose(
  graphql(getProjectsQuery, { name: "getProjectsQuery" }),
  graphql(createProjectMutation, { name: "createProjectMutation" })
)(AddProject);

Это не тот способ, который предлагается в документации, но это тоже не сработало.Я просматриваю документы, чтобы выяснить, что происходит.Я думаю, что где-то может быть "init", который решает эту проблему.