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

【问题标题】：How do you use useMutation from react-apollo-hook to execute a delete mutation?你如何使用 react-apollo-hook 中的 useMutation 来执行删除突变？
【发布时间】：2019-10-02 03:10:33
【问题描述】：

我正在尝试使用来自react-apollo-hooks 的useMutation 钩子来执行删除突变，但我在将帖子的 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>
        )
    })    
}

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

【问题讨论】：

阅读docs

标签： reactjs graphql react-apollo react-hooks react-apollo-hooks

【解决方案1】：

来自react-apollo-hooksdocs：

您可以将任何突变选项作为参数提供给 useMutation 钩子或它返回的函数

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

const onDeleteHandler = useMutation(DELETE_POST)

然后在调用handler时传入：

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

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

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

【讨论】：

我尝试了这个实现，但我一直收到错误消息：TypeError: onDeleteHandler is not a function 我调用 useMutation 和处理程序，就像你上面所说的那样。
@Avery-DanteHinds 请查看添加说明
感谢您的更新！但是，当我尝试使用 react-apollo 挂钩删除突变时，我仍然遇到错误。 Uncaught (in promise) Error: Network error: Response not successful: Received status code 400 如果您有机会查看我的repo，我将不胜感激。我不知道我在代码中的错误在哪里。 useQuery 钩子和 createUser useMutation 工作，但我不知道如何从 UI 中删除
@Avery-DanteHinds 400 表示您的突变格式错误或无效。检查服务器的实际响应以确定原因。

【解决方案2】：

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

【讨论】：