text: import { useMutation } from '@apollo/client'
  import React, { useState } from 'react'
  import { CREATE_BOOK } from '../queries'
  
  const NewBook = (props) => {
    const [title, setTitle] = useState('')
    const [author, setAuthor] = useState('')
    const [published, setPublished] = useState('')
    const [genre, setGenre] = useState('')
    const [genres, setGenres] = useState([])
  
    const [createBook] = useMutation(CREATE_BOOK, {
      update: (store, response) => {
        props.updateCacheWith(response.data.addBook)
      }
    })
    if (!props.show) {
      return null
    }
  
    const submit = (event) => {
      event.preventDefault()
  
      createBook({ variables: { title, published, author, genres } })
        .then((data) => console.log('hello data:', data))
        .catch((err) => console.log('hello err:', err))
  
      setTitle('')
      setPublished('')
      setAuthor('')
      setGenres([])
      setGenre('')
    }
  
    const addGenre = () => {
      setGenres(genres.concat(genre))
      setGenre('')
    }
  
    return (
      <div>
        <form onSubmit={submit}>
          <div>
            title
            <input
              value={title}
              onChange={({ target }) => setTitle(target.value)}
            />
          </div>
          <div>
            author
            <input
              value={author}
              onChange={({ target }) => setAuthor(target.value)}
            />
          </div>
          <div>
            published
            <input
              type='number'
              value={published}
              onChange={({ target }) => setPublished(parseInt(target.value))}
            />
          </div>
          <div>
            <input
              value={genre}
              onChange={({ target }) => setGenre(target.value)}
            />
            <button onClick={addGenre} type='button'>
              add genre
            </button>
          </div>
          <div>genres: {genres.join(' ')}</div>
          <button type='submit'>create book</button>
        </form>
      </div>
    )
  }
  
  export default NewBook
  