react-apollo-hooks useMutation答案

【问题标题】：react-apollo-hooks useMutationreact-apollo-hooks useMutation
【发布时间】：2020-01-25 03:05:46
【问题描述】：

为什么“handleAdd”方法中的“addTodo”给我“方法表达式不是函数类型”？

    import React, {useState} from 'react';
    import useAddTodo from "../../hooks/todos/useAddTodo";

    function Home() {
        const [value, setValue] = useState('');
        const addTodo = useAddTodo();

        const handleChange = e => {
            setValue(e.target.value)
        };
        const handleAdd = e => {
            e.preventDefault();
            const todo = {
                title: value,
                status: false,
            };
            addTodo({
                variables: todo,
            })
        };
        return (
            <form onSubmit={handleAdd}>
                <input onChange={handleChange} value={value} type="text" placeholder="todo title"/>
                <input onClick={handleAdd} type="submit" value="add"/>
            </form>
        );
    }

    export default Home;

这是我的钩子

import {useMutation} from 'react-apollo-hooks'
import AddTodoMutation from "./graphql/mutations/AddTodoMutation";

function useAddTodo() {
    return useMutation(AddTodoMutation);
}

export default useAddTodo

还有我的突变

import gql from 'graphql-tag'

export const AddTodoMutation = gql`
    mutation AddTodoMutation($title: String! $status: Boolean!) {
        addTodo(title: $title status: $status) {
            _id
            title
            status
        }
    }
`

export default AddTodoMutation

你们能向我解释一下似乎是什么问题吗？我将不胜感激！

【问题讨论】：

请注意，react-apollo 从 3.0 版开始支持挂钩，因此 react-apollo-hooks 已被弃用。
大声笑，我也有这种感觉（没有分配数组）。应该有办法控制这些开发人员错误

标签： reactjs graphql apollo

【解决方案1】：

根据文档，useMutation 返回一个数组（不是单个值）。

例如：

const [addTodo, { data }] = useMutation(ADD_TODO);

但是，您似乎正在返回并调用整个数组值。

要继续按原样使用您的自定义挂钩，请尝试按如下方式更新它：

import {useMutation} from 'react-apollo-hooks'
import AddTodoMutation from "./graphql/mutations/AddTodoMutation";

function useAddTodo() {
   // Destructure the addTodo mutation
   const [addTodo] = useMutation(AddTodoMutation);
   // Return the value to continue using it as is in the other files
   return addTodo;
}

export default useAddTodo

【讨论】：