基于 GraphQL&TypeScript 的大型项目最佳实践

阅读时长 13 分钟读完

GraphQL 和 TypeScript 是目前前端最热门的技术之一,它们的结合可以为大型项目带来更好的可维护性和扩展性。GraphQL 提供了一个强大的查询语言和类型定义,使得前端和后端分离更容易实现,同时 TypeScript 提供了类型检查和更好的 IDE 支持,减少了编写代码时的错误。

在本文中,我们将探讨如何在大型项目中使用 GraphQL 和 TypeScript,以及使用最佳实践进行开发。我们将介绍以下内容:

  • 如何设计 GraphQL schema 和 TypeScript 类型
  • 如何使用 Apollo Client 和 GraphQL Code Generator
  • 代码示例和最佳实践

设计 GraphQL schema 和 TypeScript 类型

在使用 GraphQL 和 TypeScript 开发大型项目时,设计良好的 schema 和类型定义非常重要。它们是我们与后端 API 交互的核心,也是我们在前端代码中使用的基石。下面是一些设计 schema 和类型定义的最佳实践:

1. 将 schema 分层

将 schema 分成多个层次可以提高代码可维护性。例如,我们可以将 User schema 和 Product schema 放在不同的文件中,并使用 extends 关键字将它们组合成一个根 schema。这样,如果我们添加新的 schema,它们将更容易地集成到我们的项目中。

-- -------------------- ---- -------
- -------------------
---- ---- -
  --- ---
  ----- -------
  ------ -------
  - ---
-

- ----------------------
---- ------- -
  --- ---
  ----- -------
  ------ ------
  - ---
-

- -------------------
---- ----- -
  -------- ----- ----
  --------- --------
  ----------- ----- -------
  ------------ -----------
-

------ ---- ----- -
  - ---
-

2. 使用 interface 定义可重用的类型

在 GraphQL 中,我们通常使用 interface 定义可重用的类型,这些类型可以在多个 schema 中使用。在 TypeScript 中,我们可以使用 interface 或 type 定义类型。例如,我们可以定义一个 Address interface,然后在 User 和 Order schema 中使用它。

-- -------------------- ---- -------
- ----------------------
--------- ------- -
  ------- -------
  ----- -------
  ------ -------
  ---- -------
-

- -------------------
---- ---- -
  --- ---
  ----- -------
  ------ -------
  -------- --------
  - ---
-

- --------------------
---- ----- -
  --- ---
  ----- -----
  -------- --------
  - ---
-
-- -------------------- ---- -------
-- ---------------
--------- ------- -
  ------- -------
  ----- -------
  ------ -------
  ---- -------
-

-- ------------
--------- ---- -
  --- -------
  ----- -------
  ------ -------
  -------- --------
  -- ---
-

-- -------------
--------- ----- -
  --- -------
  ----- -----
  -------- --------
  -- ---
-

3. 使用枚举类型定义固定的值

我们可以使用枚举类型定义一组固定的值,然后在 schema 和类型定义中使用它们。

-- -------------------- ---- -------
---- -------- -
  -----
  ----
  -----
-

---- ---- -
  --- ---
  ----- -------
  ------ -------
  ----- ---------
  - ---
-
-- -------------------- ---- -------
---- -------- -
  ----- - --------
  ---- - -------
  ----- - --------
-

--------- ---- -
  --- -------
  ----- -------
  ------ -------
  ----- ---------
  -- ---
-

使用 Apollo Client 和 GraphQL Code Generator

Apollo Client 是一个广泛使用的 GraphQL 客户端,而 GraphQL Code Generator 是一个自动生成 GraphQL 客户端代码的工具。结合使用这两个工具可以大大提高项目开发效率。

1. 安装和配置 Apollo Client

在安装 Apollo Client 之前,我们需要在后端设置好 GraphQL API。一旦这个 API 可用,我们可以在前端安装依赖项并进行配置。

在项目中引入 ApolloClient 类,然后创建一个实例并通过 useApolloClient 钩子在组件中使用它。

-- -------------------- ---- -------
-- ----------------
------ - ------------- ------------- - ---- -----------------

----- ------ - --- --------------
  ---- --------------------------------
  ------ --- ----------------
---

------ ------- -------
-- -------------------- ---- -------
-- -------
------ - --------------- --------------- - ---- -----------------
------ ------ ---- ------------------

-------- ----- -
  ------ -
    --------------- ----------------
      ------------ --
    -----------------
  --
-

2. 自动生成 GraphQL 客户端代码

GraphQL Code Generator 可以根据我们的 GraphQL schema 生成 TypeScript 类型和客户端代码。我们可以在命令行中使用 graphql-codegen 命令行工具,或者使用它的插件在我们的 IDE 中自动生成代码。

首先,我们需要安装 graphql-code-generator 和其插件(例如,@graphql-codegen/typescript 和 @graphql-codegen/typescript-operations)。

然后,我们需要配置一个 codegen.yml 文件,指示 graphql-codegen 读取我们的 schema 并生成我们需要的文件。

最后,我们可以在命令行中运行以下命令自动生成代码。

现在我们可以在自动生成的文件中读取和修改数据。

-- -------------------- ---- -------
------ - --------- --- - ---- -----------------
------ - ------------- - ---- ----------------------

----- --------------- - ----
  ----- -------- -
    -------- -
      --
      ----
      -----
    -
  -
--

-------- ------------- -
  ----- - ----- -------- ----- - - -----------------------------------------

  -- --------- -
    ------ ----------------------
  -

  -- ------- -
    ------ ----------- ----------------------
  -

  ------ -
    ----
      ------------------------- -- -
        --- ------------------------------
      ---
    -----
  --
-

代码示例和最佳实践

最后,让我们来看几个代码示例和最佳实践,以便更好地理解和应用使用 GraphQL 和 TypeScript 的最佳实践。

查询数据和变更数据

查询和变更数据是我们开发前端应用程序的最常见任务之一。在 GraphQL 中,我们可以使用 Query 和 Mutation 类型定义这些操作。在 TypeScript 中,我们可以使用 useQuery 和 useMutation 钩子来发起这些操作,并使用 ApolloClient 类型定义 GraphQL 客户端的类型。

-- -------------------- ---- -------
------ -
  ---------
  ------------
  ----
  -------------
  ------------------------
- ---- -----------------
------ - -------------- ------------------ - ---- ----------------------

----- --------------- - ----
  ----- -------- -
    -------- -
      --
      ----
      -----
    -
  -
--

----- -------------------- - ----
  -------- --------------- ---- ------- ----------------- -
    -------------- ---- ------ ------- -
      --
      ----
      -----
    -
  -
--

-------- ------------- -
  ----- ------- ----------------- - ------------------

  ----- - ----- -------- ----- - - -----------------------------------------

  ----- ------------ - -------- --------- ------ ----------- -- -
    ------------------------------------------------------

  ----- -------- -------------------- ------- ------ ---- -
    ----- -------- ---------------------------- ---- - -
      ---------- - --- ----- --
      --------------- -- ------ --------------- ---
      -------------------- -----
    --

    ----- --------------------
  -

  -- ---
-

使用 fragment 查询复杂数据

如果我们需要查询嵌套的数据,例如一个用户和它所有的订单,我们可以使用 fragment 来标准化查询的结构。在 GraphQL Code Generator 中,我们可以使用 @graphql-codegen/fragment-matcher 插件自动生成 fragment。

-- -------------------- ---- -------
- ---------------------
-------- ------------ -- ---- -
  --
  ----
  -----
  ------- -
    ------------------
  -
-

- ------------------------
-------- --------------- -- ------- -
  ------
  ----
  -----
  ---
-

- -----
----- --------------------- ---- -
  -------- ---- -
    ---------------
    ------ -
      --
      ------- -
        --
        ----
        -----
      -
    -
  -
-
-- -------------------- ---- -------
-- ------------
--------- ---- -
  --- -------
  ----- -------
  ------ -------
  -------- --------
  ------- --------
-

-- ----------------
------ - --------------- - ---- -----------------
------ - ---------------------------- - ---- ------------------------
------ ------------- ---- --------------------------------

----- --------------- - --- ------------------------------
  ----------------------------- --------------
---

----- ------ - --- --------------
  ---- --------------------------------
  ------ --- ---------------
    ----------------
  ---
---

使用 Subscription 实时获取数据

如果我们需要实时获取数据更改的通知,例如聊天应用程序或实时仪表板,我们可以使用 Subscription 类型定义。在 TypeScript 中,我们可以使用 useSubscription 钩子来监听数据更改。

-- -------------------- ---- -------
------ -
  ----------------
  ----
  -------------
- ---- -----------------
------ - ---------------------- - ---- ----------------------

----- ------------------------ - ----
  ------------ ---------- -
    ---------- -
      --
      ----
      ---------
      ------ -
        --
        ----
      -
    -
  -
--

-------- ------------- -
  ----- ------- ----------------- - ------------------

  ----- - ----- -------- ----- - - ------------------------------------------------------------------

  -- ---
-

结论

在本文中,我们介绍了如何在大型项目中使用 GraphQL 和 TypeScript,并使用最佳实践进行开发。我们探讨了 schema 和类型定义的设计、Apollo Client 和 GraphQL Code Generator 的使用,以及查询数据、变更数据、使用 fragment 和 Subscription 操作的示例代码。希望这些内容能够为读者在前端开发中应用 GraphQL 和 TypeScript 提供指导和帮助。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/670cc5fc5f551281025b9e55

纠错
反馈