你如何使用 react-apollo-hook 中的 useMutation 来执行删除突变？

Question

我正在尝试使用 react-apollo-hook 中的 useMutation 挂钩来执行删除更改，但我无法将 post 的 ID 值传递给以下代码中的突变挂钩：

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>
        )
    })    
}

我不能将 useMutation 包含在 onClick() 属性中，因为挂钩不能用作回调函数。我尝试使用 const inputRef = useRef() 并传递 inputRef.current.value，但一直未定义。

Answer 1

来自react-apollo-hooks docs:

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

所以调用时可以省略变量 useMutation:

const onDeleteHandler = useMutation(DELETE_POST)

然后在调用处理程序时将它们传入：

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

注意：react-apollo-hooks 现已弃用，因为 react-apollo 现在支持挂钩。 API 有点不同，因此用法如下所示：

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

Answer 2

我想你也可以对 useQuery() 做同样的事情。

你如何使用 react-apollo-hook 中的 useMutation 来执行删除突变？

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

reactjs

graphql

react-apollo

react-hooks

react-apollo-hooks