React、GraphQL、Apollo 通过表单向数据库添加数据答案

【问题标题】：React, GraphQL, Apollo add data to the database via formReact、GraphQL、Apollo 通过表单向数据库添加数据
【发布时间】：2023-02-08 09:22:16
【问题描述】：

我已经设置了基本的 GraphQL Playground，并且能够查询或添加在我的例子中是汽车的对象。我什至可以查询汽车并在前端显示它们，但是我在通过将数据输入到表单中来通过 GraphQL 添加或更新数据库方面遇到问题。我正在使用使用状态挂钩，一旦我添加使用状态挂钩，页面就会停止加载，我想出了一个空白页面，因为它停止加载：

代码如下：

export default function CarForm() {
    const [formState, setFormState] = useState({
        name: '',
        mileage: '',
        dailyPrice: '',
        monthlyPrice: '',
        gas: '',
        gearType: '',
        thumbnailUrl: ''
    })

    const [carForm] = useMutation(ADD_NEW_CAR, {
        variables: {
            name: formState.name,
            mileage: formState.mileage,
            dailyPrice: formState.dailyPrice,
            monthlyPrice: formState.monthlyPrice,
            gas: formState.gas,
            gearType: formState.gearType

        }
    });

    return (

        <div>

            <h1>
                Submit your car
            </h1>
            <Form>
                <h5 >make and model of car :
                    <input className="field" type="text" value={formState.name}
                        onChange={(e) =>
                            setFormState({
                                ...formState,
                                name: e.target.value
                            })
                        } />
                </h5>

                <h5>
                    Mileage
                    <input className="field" type="text" value={formState.mileage}
                        onChange={(e) =>
                            setFormState({
                                ...formState,
                                mileage: e.target.value
                            })
                        } />
                </h5>
                <h5>gearType
                    <input className="field" type="text" value={formState.gearType}
                        onChange={(e) =>
                            setFormState({
                                ...formState,
                                gearType: e.target.value
                            })
                        } />
                </h5>
                <h5>gas
                    <input className="field" type="text" value={formState.gas}
                        onChange={(e) =>
                            setFormState({
                                ...formState,
                                gas: e.target.value
                            })
                        } />
                </h5>
                <h5>dailyPrice
                    <input className="field" type="text" value={formState.dailyPrice}
                        onChange={(e) =>
                            setFormState({
                                ...formState,
                                dailyPrice: e.target.value
                            })
                        } />
                </h5>
                <h5>monthlyPrice
                    <input className="field" type="text" value={formState.monthlyPrice}
                        onChange={(e) =>
                            setFormState({
                                ...formState,
                                monthlyPrice: e.target.value
                            })
                        } />
                </h5>
                <h5>thumbnailUrl
                    <input className="field " type="text" value={formState.thumbnailUrl}
                        onChange={(e) =>
                            setFormState({
                                ...formState,
                                thumbnailUrl: e.target.value
                            })
                        } />
                </h5>

            </Form>

            <Button onSubmit={(e) => {
                e.preventDefault();
            }}>
                submit
            </Button>
        </div >
    );
}```

我可以通过 GraphQL 游乐场使用突变或查询，但无法通过向表单添加数据来更新数据库。它只是返回一个空白页。我在这里做错了什么？有没有更简单的方法来输入数据？

我想通过表格添加汽车的数据，但它返回一个空白页。

【问题讨论】：

标签： javascript reactjs graphql apollo

【解决方案1】：

在 onSubmit 回调中，您需要实际调用 carForm 函数，将变量传递到那里。只需将 useMutation 保留一个参数，并在提交处理程序中添加变量。看看这个伪代码：

const [carForm] = useMutation(ADD_NEW_CAR)

const submitHandler = async (e) => {
  e.preventDefault();
  await carForm({
   variables: {...} // useState variables.
  });
}

【讨论】：