'TypeError: parse is not a function' 使用 gql 时答案

【问题标题】：'TypeError: parse is not a function' when using gql'TypeError: parse is not a function' 使用 gql 时
【发布时间】：2018-02-24 16:56:14
【问题描述】：

我从 this 教程开始学习 graphql 和 reactjs 并对其进行了修改。现在我在尝试调用 gql 时收到此错误： graphql error

这是执行调用的类：

import React from 'react';
import gql from 'graphql-tag';
import { graphql } from 'react-apollo'

class BookForm extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            title: '',
            author: '',
            src: '',
        };
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleChange(event) {
        this.setState({[event.target.name]: event.target.value });
    }

    handleSubmit = (e) => {
        this.props.addBook({
            variables: {
                author: this.state.author,
                title: this.state.title,
                src: this.state.src
            }
        });
    }

    render() {
        return (
            <form className="book__form" onSubmit={this.handleSubmit}>
                <label>
                    Title:
                    <input type="text" name="title" value={this.srtate.title} onChange={this.handleChange} />
                </label>
                <label>
                    Author:
                    <input type="text" name="author" value={this.state.author} onChange={this.handleChange} />
                </label>
                <label>
                Src:
                <input type="text" name="src" value={this.state.src} onChange={this.handleChange}/>
                </label>
                <label>
                    <input type="submit" value="Submit" />
                </label>
            </form>
        );
    }
}


const addBook =  gql `mutation addBook ($author: String!, $title: String!, $: ID!) {
    addBook(author: $author, title: $title, src: $src) {
      id,
      author,
      title,
      src,
    }
  }`

const addBookWithMutation = graphql(addBook)(BookForm);
export default addBookWithMutation;

Query-ing graphql 返回所有数据，但现在当我尝试添加新数据时，我无处可去。我在我的代码中做错了什么还是 graphql-tag 有问题？

谢谢

【问题讨论】：

标签： reactjs graphql

【解决方案1】：

似乎存在兼容性问题，即 0.13.1 版的 graphql-js 破坏了 graphql-tag。您可以通过手动解决版本控制问题来解决 -

yarn add apollo-boost@0.1.1 graphql@0.13.0 react-apollo@2.0.4

供参考，这里是issue on github

【讨论】：