GraphQL 是一种用于 API 的查询语言,它提供了一种更加高效、强大和灵活的方式来进行数据查询和操作。在前端开发中,我们经常需要使用 GraphQL 来进行表单提交和验证数据。本文将介绍如何在 GraphQL 中处理表单提交及验证数据,并提供示例代码。
表单提交
在前端开发中,表单是一种常见的用户交互方式。表单提交通常包括以下步骤:
- 用户填写表单数据。
- 用户点击提交按钮。
- 前端将表单数据发送到后端进行处理。
- 后端处理表单数据,并返回处理结果给前端。
在 GraphQL 中,表单提交可以通过 Mutation 来实现。Mutation 是一种用于修改数据的 GraphQL 操作,它类似于 RESTful API 中的 POST、PUT、DELETE 等操作。以下是一个简单的 Mutation 示例:
mutation SubmitForm($input: FormInput!) { submitForm(input: $input) { id name email } }
上述 Mutation 定义了一个名为 submitForm 的操作,它接受一个名为 input 的参数,参数类型为 FormInput。FormInput 是一个自定义的输入类型,它包含了表单的各个字段。在 Mutation 的返回结果中,我们可以指定需要返回的字段,例如上述示例中的 id、name 和 email。
在前端中,我们可以使用 Apollo Client 来进行表单提交。以下是一个简单的表单提交示例:
-- -------------------- ---- ------- ------ - ---- ----------- - ---- ----------------- ----- ----------- - ---- -------- ------------------ ----------- - ----------------- ------- - -- ---- ----- - - -- -------- ------ - ----- ------------ - -------- ----- -- - ------------------------- ----- ------------ - ------- -- - ----------------------- ----- ---- - ------------- ----- ----- - - ----- ------------------------- ------ -------------------------- -- ------------ ---------- - ----- - --- -- ------ - ----- ------------------------ ------ ---------------------------- ------ ----------- ----------- --------- -- --- -- ------ ------------------------------ ------ ------------ ------------ ---------- -- --- -- ------- ----------------------------- -------- -- ------------------ ------ -- --------- -------------------- ------- -- -
上述示例中,我们定义了一个名为 SUBMIT_FORM 的 Mutation,它与上述示例中的 Mutation 定义相同。在表单提交时,我们使用 useMutation 钩子来执行 SUBMIT_FORM Mutation,并将表单数据作为 input 参数传递给 Mutation。在 Mutation 执行期间,我们可以通过 loading 和 error 属性来显示加载状态和错误信息。
数据验证
在表单提交时,我们通常需要验证用户输入的数据是否符合要求。在 GraphQL 中,数据验证可以使用 Input Validation 来实现。Input Validation 是一种用于验证输入数据的 GraphQL 规范,它可以在 GraphQL Schema 中定义输入类型的验证规则。以下是一个简单的 Input Validation 示例:
-- -------------------- ---- ------- ----- --------- - ----- ------- ------ ------- - ---- -------- - ----------------- ------------ ----- - ---- ---- - --- --- ----- ------- ------ ------- -
上述示例中,我们定义了一个名为 FormInput 的输入类型,它包含了表单的各个字段,并使用了 ! 标记来指定这些字段为必填字段。在 Mutation 的定义中,我们使用了 FormInput 类型来指定 submitForm 操作的输入参数,并使用了 Form 类型来指定 submitForm 操作的返回结果。
在上述示例中,我们使用了 GraphQL Schema 中的验证规则来验证表单数据。如果表单数据不符合验证规则,则 GraphQL 会返回错误信息,例如以下示例:
-- -------------------- ---- ------- - --------- - - ---------- --------- ---------- --- ------- ----- ---------- ----- ---------- ------ ----- ---------- -- -------- ---- ------- --- --- ----------- ------------ - - ------- -- --------- - - -- ------------- - ------- --------------------------- - - - -
在前端中,我们可以使用第三方库来进行数据验证。例如,使用 Yup 可以轻松地定义表单数据的验证规则。以下是一个使用 Yup 进行数据验证的示例:
-- -------------------- ---- ------- ------ - -- --- ---- ------ ----- ---------------- - -------------------- ----- ------------------------ ------ -------------------------------- --- -------- ------ - ----- ------------ - -------- ----- -- - ------------------------- ----- ------------ - ----- ------- -- - ----------------------- ----- ---- - ------------- ----- ----- - - ----- ------------------------- ------ -------------------------- -- --- - ----- --------------------------------- ----- ------------ ---------- - ----- - --- - ----- ------- - --------------------- - -- ------ - ----- ------------------------ ------ ---------------------------- ------ ----------- ----------- --------- -- --- -- ------ ------------------------------ ------ ------------ ------------ ---------- -- --- -- ------- ----------------------------- -------- -- ------------------ ------ -- --------- -------------------- ------- -- -
上述示例中,我们使用 Yup 定义了表单数据的验证规则,并在 handleSubmit 函数中使用 validationSchema.validate 方法来验证表单数据。如果表单数据符合验证规则,则调用 submitForm 方法提交表单数据,否则会抛出错误信息。
结论
在本文中,我们介绍了如何在 GraphQL 中处理表单提交及验证数据,并提供了示例代码。通过使用 Mutation 和 Input Validation,我们可以轻松地实现表单提交和数据验证,并提高前端开发的效率和可靠性。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/67783e88c1c5215e3cc2a99a