在 GraphQL 中如何处理表单提交及验证数据

阅读时长 8 分钟读完

GraphQL 是一种用于 API 的查询语言,它提供了一种更加高效、强大和灵活的方式来进行数据查询和操作。在前端开发中,我们经常需要使用 GraphQL 来进行表单提交和验证数据。本文将介绍如何在 GraphQL 中处理表单提交及验证数据,并提供示例代码。

表单提交

在前端开发中,表单是一种常见的用户交互方式。表单提交通常包括以下步骤:

  1. 用户填写表单数据。
  2. 用户点击提交按钮。
  3. 前端将表单数据发送到后端进行处理。
  4. 后端处理表单数据,并返回处理结果给前端。

在 GraphQL 中,表单提交可以通过 Mutation 来实现。Mutation 是一种用于修改数据的 GraphQL 操作,它类似于 RESTful API 中的 POST、PUT、DELETE 等操作。以下是一个简单的 Mutation 示例:

上述 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

纠错
反馈