如何使用Github的Grqphql突变新增issue?

[lizejun123]

突变 --> 添加issue

  /*
    repositoryId --> 要添加issue的仓库名
    title --> issue的标题
    body --> issue的内容
  */

  // 在组件的props中将 mutate调用突变方法 接收

  // 提交突变，添加issue
  mutate({ variables: { title: value, body: text } })

  export default graphql(gql`
    mutation createIssue($title:String!,$body:String) {
      createIssue(
        input: {
          repositoryId: "MDEwOlJlcG9zaXRvcnkzNTQ3ODM0NzI="
          title: $title
          body: $body
        }
      ) {
        issue {
          body
        }
      }
    }
`)(CreateNotes);

markdown插件

yarn add react-markdown-editor-lite markdown-it

  import MarkdownIt from "markdown-it";
  import MdEditor from "react-markdown-editor-lite";

  const mdParser = new MarkdownIt(/* Markdown-it options */);

  // markdown编辑器的Ref
  const VRef = useRef()
  // 获取到 markdown编辑器中 输入的文本
  const { current: { state: { text } } } = VRef

  <MdEditor
    ref={VRef}
    style={{ height: "500px" }}
    <!-- 右侧预览markdown效果-->
    renderHTML={(text) => mdParser.render(text)}
  />

示例 Code

import React, { memo, useRef } from "react";
import MarkdownIt from "markdown-it";
import MdEditor from "react-markdown-editor-lite";
import { graphql } from "react-apollo";
import gql from "graphql-tag";
import "react-markdown-editor-lite/lib/index.css";
import { Input, Button } from 'antd';

const mdParser = new MarkdownIt(/* Markdown-it options */);
// 添加notes UI组件
const CreateNotes = memo(({ mutate }) => {
  // 标题的Ref
  const TitleRef = useRef()
  // markdown编辑器的Ref
  const VRef = useRef()

  // 点击提交按钮的 callback
  const submit = () => {
    const { current: { state: { text } } } = VRef
    const { current: { state: { value } } } = TitleRef
    // 提交突变，添加issue
    mutate({ variables: { title: value, body: text } })
  };

  return (
    <>
      {/* 文章标题 */}
      <Input placeholder="请输入标题" addonBefore="标题" ref={TitleRef} />
      {/* markdown编辑器 */}
      <MdEditor
        ref={VRef}
        style={{ height: "500px" }}
        renderHTML={(text) => mdParser.render(text)}
      />
      {/* 提交按钮 */}
      <Button type="primary" onClick={submit} shape="round" >提交</Button>
    </>
  );
});

export default graphql(gql`
  mutation createIssue($title:String!,$body:String) {
    createIssue(
      input: {
        repositoryId: "MDEwOlJlcG9zaXRvcnkzNTQ3ODM0NzI="
        title: $title
        body: $body
      }
    ) {
      issue {
        body
      }
    }
  }
`)(CreateNotes);