CODEWITHSUNDEEP
graphql
ttmt
ttmt

Reputation: 4984

graphql - call mutation from a form

I'm new to graphql

I have a simple react app that lists books using a graphql query that queries a mongoDB database.

The schema contains a addBook Mutation that adds books to the DB.

This works using graphiql and I can add books and display them.

My problem now is I'm trying to use this mutation to add the books from a form on the react page.

I have a addBook component and listBooks component.

I get the error 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 };

Upvotes: 0

Views: 957

Answers (1)

Nemer
Nemer

Reputation: 687

you can't call this.props.addBookMutation, in your case for a class component call it by this.props.mutate({}) for more 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 });
    });
  }

Upvotes: 1

Related Questions