How do you use useMutation from react-apollo-hook to execute a delete mutation?

Question

I'm trying to use the useMutation hook from react-apollo-hooks to execute a delete mutation, but I'm having difficulty passing the ID value of the post to the mutation hook in the following code:

const Posts = () => {
    const { data, error, loading } = useQuery(GET_POST)
    const onDeleteHandler = useMutation(DELETE_POST, {
        variables: { id }
    })
    if (loading) return <div>...loading</div>
    if (error) return <div>Error</div>

    return data.posts.map(({id, title, body, location, published, author}) => {
        return  (
            <div className="card" key={id}>
                <p>id: {id}</p>
                <p>title: {title}</p>
                <p>body: {body}</p>
                <p>location: {location}</p>
                <p>published: {published}</p>
                <p>author: {author.name}</p>
                <Link to={`/post/${id}/edit`}>
                    Edit
                </Link>
                <button 
                    onClick={onDeleteHandler}>
                    Delete
                </button>
            </div>
        )
    })    
}

I cannot include the useMutation inside the onClick() property since a hook cannot be used as a callback function. I tried using const inputRef = useRef() and passing inputRef.current.value, but kept getting undefined.

read [docs](https://reactjs.org/docs/handling-events.html#passing-arguments-to-event-handlers) — xadm, May 15 '19 at 07:00

Daniel Rearden · Accepted Answer · 2019-12-02T23:18:37.977

8

From the react-apollo-hooks docs:

You can provide any mutation options as an argument to the useMutation hook or to the function returned by it

So you can omit the variables when calling useMutation:

const onDeleteHandler = useMutation(DELETE_POST)

and then pass them in when calling the handler:

onClick={() => onDeleteHandler({ variables: { id } })}>

Note: react-apollo-hooks is now deprecated since react-apollo now supports hooks. The API is a bit different, so usage would look like this:

const [onDeleteHandler, { data, loading, error }] = useMutation(DELETE_POST)

edited Dec 02 '19 at 23:18

answered May 15 '19 at 10:32

Daniel Rearden

80,636
11
185
183

I tried this implementation but I keep getting the error : `TypeError: onDeleteHandler is not a function` I call useMutation and the handler just as you have it above. – Avery-Dante Hinds Dec 02 '19 at 22:20
1

@Avery-DanteHinds please see added note – Daniel Rearden Dec 02 '19 at 23:19
Thanks for the update! However I'm still getting errors when I try delete mutations using the react-apollo hooks. `Uncaught (in promise) Error: Network error: Response not successful: Received status code 400` If you get a chance I would appreciate if you checked out my [repo](https://github.com/thelovesmith/GRANDstack-test/blob/3858f01f5fa1b1d347b7d90bc8e7f1669f515d93/ui/src/CreateUser.js#L75). I don't know where I'm at fault in the code. The useQuery hook and createUser useMutation work but I can not figure out how to delete from the UI – Avery-Dante Hinds Dec 03 '19 at 15:21
@Avery-DanteHinds 400 means your mutation is malformed or otherwise invalid. Check the actual response from the server to determine the cause. – Daniel Rearden Dec 03 '19 at 16:13

score 0 · Answer 2 · edited Dec 03 '19 at 00:12

0

I guess you could do the same with useQuery().

edited Dec 03 '19 at 00:12

Jeff

2,701
2
22
35

answered Jul 26 '19 at 17:12

Favour George

1,525
13
18

How do you use useMutation from react-apollo-hook to execute a delete mutation?

2 Answers2