常规情况下的GraphQL
GraphQL 是一个用于API的查询语言与运行时环境，它使得客户端可以精确地请求数据，并仅仅获取需要的内容，从而提高数据请求效率。通常情况下，在前端开发中，GraphQL 会配合 Apollo 客户端使用，可以快速开发出强大而又灵活的应用程序。
在使用GraphQL时，我们通常会定义自己的Schema、Resolver以及Types等一系列相关的类型。其中，Schema 定义的是数据的结构，而 Types（包括Query、Mutation等）则是针对这个结构的操作。在对这些类型进行定义时，我们需要在其中添加对应的数据类型和变量。
GraphQL 与 TypeScript 结合
虽然GraphQL和Apollo的配合在开发中已经显得越来越流行，不过当应用切换到 TypeScript 开发时，我们会发现在这种架构下使用这种组件变得不那么直观、不那么明显，需要更多的类型定义和较多的类型检查等等。因此，开发者也提出了自己独特的解决方案，那就是 TypeScript 与 GraphQL 深度结合，让我们来具体了解一下。
首先，让我们来看一下GraphQL的一个Query：
query GET_USER_INFO($id: ID!) {
user(id: $id) {
name
age
}
}上述代码表示我们希望从服务端获取用户信息，需要给出该用户的 ID，从而得到对应的名字和年龄等信息。但是在写这样的Query时，我们会发现变量的类型并没有被声明，只有在构建使用它的代码时才会发现。
如果我们再使用 TypeScript 的话，则可以通过声明类型的方式，不仅使得变量的代码层面更加强健，还能够将GraphQL的定义和现实代码结合更加紧密。下面就让我们来看下面的 TypeScript 代码实现这个Query：
-- -------------------- ---- -------
------ - --- - ---- ----------------
--------- ---- -
----- -------
---- -------
-
--------- ------------ -
----- -----
-
----- -------- --------------- -------- ------------ -
----- -------- - ----- ----------------- -
------- -------
-------- -
--------------- ------------------
--
----- ----------------
------ ----
----- ------------------ ---- -
-------- ---- -
----
---
-
-
--
---------- -
--
-
--
---
----- ------ - ----- ----------------
------ -------
-上面的代码中，我们使用了 interface 来声明类型，通过这种方式来对Query中所需的数据类型进行声明。在接下来的函数 getUserInfo 的实现中，还需要额外处理哪些字段是必要的、哪些是可选的等问题，这样做也可以有效避免由于开发疏忽所产生的不必要错误。
案例
下面让我们来看一个具体的案例吧。
在这个案例中，我们需要开发一个支持登录和注册的前后端分离的应用程序。前端通过GraphQL来请求后端数据，并将相关数据展示给用户。其中，前端应用采用React进行开发，使用TypeScript来支持GraphQL服务。启动方式为，进入 src 目录后，运行 npm run start 即可。
后端服务
提供GraphQL API，代码如下：
-- -------------------- ---- -------
------ - ------------- --- - ---- ----------------
------ ------ ---- -----------
------ - ----------- - ---- ----------------
--------- ---- -
--- -------
--------- -------
--------- -------
-
--------- ------------------- -
------ -------
----- ---------- ---- - ------------
-
--------- ---------------------- -
----- ---------- ---- - ------------
-
--- ------- - --
--- ------ ------ - -
-
--- ----------
--------- --------
--------- ------------------------ ---
-
--
----- -------- - ----
---- ----- -
------------ ----- ----
-
---- -------- -
--------------- -------- --------- --------- -------------------
------------------ -------- --------- --------- ----------------------
-
---- ---- -
--- ---
--------- -------
-
---- ----- -
------ -------
-
---- ------------------- -
------ -------
----- ----
-
---- ---------------------- -
----- ----
-
--
----- --------- - -
------ -
--------- -------- ---- ----- ---- -- -
----- - -- - - -----
----- ---- - --------------- -- ------- --- ----
------ -----
-
--
--------- -
------ -------- ---- ----- ---- -- -
----- - --------- -------- - - -----
----- ---- - --------------- -- ------------- --- ----------
-- ------- -
----- --- --------- ---- --------
-
----- ----------------- - ---------------------------- ---------------
-- -------------------- -
----- --- ---------------- -----------
-
----- ----- - ---------------------
------ -
------
----
--
--
--------- -------- ---- ----- ---- -- -
----- - --------- -------- - - -----
----- ---- - --------------- -- ------------- --- ----------
-- ------ -
----- --- ----------- ------- ---------
-
----- -------------- - ------------------------- ----
----- ------- - -
--- ----------
---------
--------- --------------
--
--------------------
------ -
----- -------
--
-
-
--
----- ------ - --- -------------- --------- --------- ---
----------------------- --- -- -- -
------------------- ----- -- ---------
---前端代码
然后，我们需要为前端代码添加几个必要的包。可以通过以下命令来添加：
npm install --save graphql apollo-boost apollo-link-http apollo-client graphql-tag
该程序需要我们在 React 项目中启动 Apollo Client 来使得前端可以访问 GraphQL API。而在使用 Apollo Client 时，我们需要先创建这个客户端，然后将其传递给其中的其他组件，使得这些组件可以通过这个 API 来请求数据。
代码如下：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ --- ---- --------------
------ - ------------ -------- - ---- ----------------------
--------- ---------------------- -
--------- -------
--------- -------
-
--------- ------------------- -
------ -
------ -------
----- -
--- -------
--------- -------
-
-
-
--------- ---------------------- -
--- -------
-
--------- ------------------- -
--------- -
--------- -------
-
-
----- ----- - ----
-------- ------------------------ -------- ---------- -------- -
--------------- ---------- --------- ---------- -
-----
---- -
--
--------
-
-
-
--
----- --------- - ----
----- ------------------ ---- -
------------ ---- -
--------
-
-
--
-------- ------- -
----- ---------- ------------ - -------------
----- ---------- ------------ - -------------
----- ------- - -------------------------------- ------------------------------ -
------------ ---- -- -
----------------------------- ------------------
------------------------------ -------------------------------
-------------------- - ----
-
---
----- ------------ - ------- --------------------------------- -- -
-----------------------
-------
---------- -
---------
--------
-
---
--
------ -
----- ------------------------
-------
---------
------ ----------- ---------------- ----------- -- ---------------------------- --
--------
--- --
-------
---------
------ --------------- ---------------- ----------- -- ---------------------------- --
--------
--- --
------- -----------------------------
-------
--
-
-------- ---------- -
----- ------ - -------------------------------
----- - -------- ------ ---- - - ----------------------------- ---------------------------------- -
---------- -
--- ---------------------- -- ---
-
---
-- --------- ------ ------------------
-- ------- ------ -------- -------
------ --------- -------------------------------
-
-------- ------ -
----- ----- - ------------------------------
------ ----- - --------- -- - ------ ---
-
------ ------- -----运行结果
启动后端服务，并运行前端应用。首先，我们需要在浏览器中输入 http://localhost:3000，然后就可以通过登录或者注册操作来获取一个Token。这个 Token 可以用于后续的持久化登录操作。
接着，在获取到Token后，通过在 http header 中设置该 Token 的值来实现持久化登录，这样，用户在进行资料查询时，可以实现自动登录的效果。
总结
通过对以上代码理解和实践，相信你已经了解了 GraphQL 和 TypeScript 结合的过程。如果你正在开发一个大型的应用程序，这些实践将非常有用，因为它们使得您能够更好地管理和维护代码，并确保您的代码不会产生意外的错误。
当然，本文所给出的示例只是冰山一角，更多详细信息可以上官网获取：https://www.graphql.com/learn/type-system/。
希望本文能够帮助到您！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/654df0a67d4982a6eb74c332