GraphQL 是一种不同于 RESTful 的后端 API 架构解决方案，同时也支持前端开发者以声明式的方式获取具有高度定制能力的数据。在 GraphQL 中，变量传递是一个重要且常用的功能，特别是在需要根据请求参数返回不同结果的场景下。本文将深入探讨 GraphQL 中的变量传递技巧及实践案例，并带来一些方法指导及示例代码。
一、GraphQL 变量传递的基本运用
先看看一个 GraphQL 中的变量传递的基本使用示例：
----- ----- ----- -
-------- ---- -
--
----
-
-以上语句定义了一个查询获取用户信息的请求，并使用了一个名为 $id 的变量来表示用户ID。其中 Int! 表示变量的类型为整数且不能为 null。当我们发起这个请求时，需要在请求中同时包含变量及其值：
- ----- --- -
如上请求包含了一个 id 值为 123 的变量，运行后返回的数据则是：
-
------- -
------- -
----- ----
------- ----- ------
-
-
-这也是 GraphQL 变量传递的基本用法。在 GraphQL 中，我们可以将变量在请求中进行定义，并通过 $ 符号来关联请求体中的变量名与传入的值。
二、GraphQL 变量传递的实践案例
现在，我们来看一个具体的实践案例，了解 GraphQL 变量传递的运用原理。
1. 前言
我们经常会遇到分类查询的场景，而在这些场景中，URL 查询字符串的方式已经无法满足对复杂多变的请求进行分类查询，因此我们需要更为动态和灵活的数据查询和展示。而 GraphQL 正好可以通过请求参数传递和响应实体来满足这一场景。
2. 案例说明
假设我们有一个电商网站，我们需要按照用户需求的时间段和价格区间查询商品列表。我们可以使用 GraphQL 实现分类查询的功能。以下是具体实现过程。
首先，我们需要在服务器端实现日期格式的转换及价格范围的查询：
----- - ----------------- - - -------------------
-- --------------
----- -------- - --- -------------------
----- -------
------------ -- ---- ------
---------------- -
------ --------------------
--
----------------- -
------ --- ------------
--
----------------- -
-- --------- --- ------------ -
------ --- ----------------
-
------ -----
-
---
-- ------
----- ----------- - --- -------------------
----- ----------
------- -
--- - ----- --- ------------------------- --
----- - ----- ------------- --
------ - ----- ------------ -
-
---
-- ---------
----- --------------- - --- ------------------------
----- --------------
------- -
--------- - ----- ------------ --
--------- - ----- ------------ -
-
---
-- ---------
----- ----------------- - --- ------------------------
----- ----------------
------- -
------------ - ----- --------------- --
--------- - ----- -------- --
------- - ----- -------- -
-
---
-- -----------
----- ----------------- - --- -------------------
----- ----------------
------- -
----------------- -
----- --- -------------------------
----- -
------- - ----- ----------------- -
--
------------- - ------ -- -
-- -----------------------
----- -------- - ------------------------------------------ --------
------ ---------
-
-
-
---接下来，我们可以写下以下查询语句：
----- --------------------------- ------------- ---------- ------ -------- ------ -
------------------------ - ------------ ------------- --------- ---------- ------- ------- -- -
--
----
-----
-
-变量传递部分则是：
-
-------------- -
----------- ---
----------- --
--
----------- ---------------------------
--------- --------------------------
-如此便可以获取到满足时间范围内，且价格范围在 20~50 元内商品的信息。
三、技巧总结
针对以上案例及示例代码，总结出以下技巧：
1. 变量的正确使用方法
在 GraphQL 中，变量名必须以 $ 开头，且类型可以是标量、对象或列表。同时，变量传递必须在变量定义和查询（或者异步操作）之间进行映射关联，即使用参数 $变量名 来取得传递过来的值。
2. 参数化查询的使用
参数化查询表明声明一个变量，并在查询语句中使用 $变量名 来代表该变量，然后在请求体中使用 JSON 给该变量赋值。这种方法可以避免 SQL 注入等安全问题，也可以更为灵活地传递参数值。
3. 必要的参数校验
在后端的 GraphQL API 中，需要对接收到的请求进行必要的参数校验，避免出现请求参数符号与变量类型不匹配，从而导致应用程序崩溃的问题。
结语
本文介绍了 GraphQL 中变量传递的相关技巧及实践案例，并总结出了相关的技巧及注意事项。在实践过程中，需要开发者熟练掌握 GraphQL 的语法及其变量传递的使用方法，并在后端 API 中进行参数校验，以保证应用程序的稳定性和安全性。同时，对于使用 GraphQL 进行 API 开发的开发者而言，考虑到数据的查询请求方式对响应结果的影响，在实际开发中合理使用变量传递也是非常重要的一点。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/651e116d95b1f8cacd5c25fc