Question

我是graphql的新手

我有一个简单的react应用，该应用使用查询mongoDB数据库的graphql查询列出书籍。

该架构包含一个addBook突变，可将图书添加到数据库中。

这可以在graphiql上使用，我可以添加书籍并显示它们。

我现在的问题是我正在尝试使用此突变来从反应页面上的表单添加书籍。

我有一个addBook组件和listBooks组件。

我收到错误TypeError: this.props.addBookMutation is not a function

addBooks.js

import React, { Component } from 'react';
import { graphql } from 'react-apollo';
import { addBookMutation } from '../queries/queries';

class AddBooks extends Component {

  constructor(props) {
    super(props);

    this.state = {
      name: "",
      genre: "",
      author: "",
    }

  }

  submitForm(e) {
    e.preventDefault()
    this.props.addBookMutation({
      variables: {
        name: this.state.name,
        genre: this.state.genre,
        author: this.state.author,
      }
    })
  }

  render() {

    return (
      <div className="wrapper">

        <form action="" className="o-form" onSubmit={this.submitForm.bind(this)}>
          <div className="o-form__element">
            <label className="o-form__label" htmlFor="">Book Name</label>
            <input className="o-form__input" type="text" onChange={(e) => this.setState({ name: e.target.value })} />
          </div>
          <div className="o-form__element">
            <label className="o-form__label" htmlFor="">Description</label>
            <textarea className="o-form__input" type="text" onChange={(e) => this.setState({ genre: e.target.value })}>
            </textarea>
          </div>
          <div className="o-form__element">
            <label className="o-form__label" htmlFor="">Year</label>
            <input className="o-form__input" type="text" onChange={(e) => this.setState({ author: e.target.value })} />
          </div>
          <button className="o-form__btn">Add Book</button>
        </form>
      </div>
    )
  }
}

export default graphql(addBookMutation)(AddBooks)

queries.js

import { gql } from 'apollo-boost';

const getBookQuery = gql`
  {
    fonts{
      name
      genre
      author
    }
  }
`

const addBookMutation = gql`
  mutation($name: String!, $genre: String!, $author: String!){
    addBook(
      name: $name,
      genre: $genre,
      author: $author
    )
  }
`

export { getBookQuery, addBookMutation };

Answer 1

您不能调用this.props.addBookMutation，对于您的类组件，请通过this.props.mutate（{}）调用它，以获取更多info

  submitForm(e) {
    e.preventDefault();

    this.props.mutate({
       variables: {
         name: this.state.name,
         genre: this.state.genre,
         author: this.state.author,
       }
    }).catch(res => {
        const errors = res.graphQLErrors.map(err => err.message);
        this.setState({ errors });
    });
  }

graphql-来自表单的调用突变

1 个答案: