如何将GraphQL数据解析到Draft.js编辑器中

时间:2019-01-09 11:01:01

标签: graphql draftjs

我正在使用Apollo将GraphQL数据解析为Draft.js。如何将数据声明为createWithContent?

我尝试了很多事情。但是,作为一个新秀我并不能真正取得突破。


    import React from 'react';
    import { Editor, EditorState, RichUtils, convertFromHTML, ContentState } from 'draft-js';
    import { stateToHTML } from 'draft-js-export-html';
    import styled from 'styled-components';
    import { Query } from 'react-apollo';
    import gql from 'graphql-tag';
    import PropTypes from 'prop-types';

    const TOPIC_QUERY = gql`
      query TOPIC_QUERY($id: ID) {
        topic(where: { id: $id }) {
          title
          id
          text
        }
      }
    `;

    const TopicData = ({ ID }) => (
      <Query
        query={TOPIC_QUERY}
        variables={{
          id: this.props.id
        }}
      >
        {({ data, loading, error }) => {
          if (error) return <Error error={error} />;
          if (loading) return <p>Loading...</p>;
          console.log(data.topic);
          return (
            <div>
              <p>{data.topic.text}</p>
            </div>
          );
        }}
      </Query>
    );

    const Spacing = styled.div`
      margin-top: 20px;
      border: 1px solid #000;
    `;

    export default class EditorApp extends React.Component {
      static propTypes = {
        id: PropTypes.string.isRequired
      };

      constructor(props) {
        super(props);

        const html = 'GRAPHQL SHOULD GO HERE';
        const blocksFromHTML = convertFromHTML(html);
        const content = ContentState.createFromBlockArray(
          blocksFromHTML.contentBlocks,
          blocksFromHTML.entityMap
        );

        this.state = { editorState: EditorState.createWithContent(content) };

如您所见,我相信我应该将数据解析为const html。但是我就是无法正常工作。

0 个答案:

没有答案