Question

我正在尝试使用useMutation中的react-apollo-hook钩子来执行删除突变，但是在以下代码中我很难将帖子的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：

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

因此，您可以在调用useMutation时忽略变量：

const onDeleteHandler = useMutation(DELETE_POST)

，然后在调用处理程序时将它们传递给

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

Answer 2

我想您可以用useQuery()做同样的事情。丹尼尔·雷登（Daniel Rearden）

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

2 个答案: