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

面试官：小伙子，你的数组去重方式惊艳到我了

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

阅读全文

猜你喜欢

  • Express.js 中模块化开发的最佳实践

    在开发 Node.js 的 Express.js 应用程序时，尤其是在大型应用程序中，代码的组织和管理是一个非常重要的问题。如果不采用良好的组织结构，代码可读性和可维护性将降低，这将使您在未来增加新功...

    6 天前
  • Jest测试中的Watch模式及使用技巧

    Jest是Facebook推出的一款流行的JavaScript测试框架。它提供了一个简单、快速且强大的方式编写测试用例以确保代码的质量。其中，Watch模式是Jest的重要功能之一，可以帮助开发人员快...

    6 天前
  • Mongoose 导入数据记录出现 CastError 的解决方法

    在使用 Mongoose 时，导入数据记录时常常会遇到 CastError 的错误。这种错误通常是由于数据类型不匹配导致的。本文将详细介绍 CastError 错误的产生原因以及解决方法，让读者能够更...

    6 天前
  • Fastify 应用程序中集成 JWT 认证教程

    什么是 JWT 认证? JWT (JSON Web Token) 认证是当今最流行的 API 认证方式之一。它可以让前端开发者在无需重复登录的情况下访问应用程序的私有资源。

    6 天前
  • SASS 中的 @mixin 与 @extend 使用场景及注意事项（附例子）

    SASS 中的 @mixin 与 @extend 使用场景及注意事项（附例子） SASS 是一种 CSS 预处理器，能够提供更多的灵活性和可重用性，其中 @mixin 和 @extend 是 SASS...

    6 天前
  • ESLint 使用详细指南

    ESLint 是一个在 JavaScript 代码中检查问题的静态工具，它可以帮助你更好地编写代码。本文将介绍如何使用 ESLint，并提供一些实际的示例。 安装 ESLint 首先，你需要在你的项目...

    6 天前
  • 在 Vue.js 中使用 GraphQL 的技术攻略

    GraphQL 是一种用于 API 的查询语言，它使用类似 JSON 的语法来请求数据。由于其出色的性能、灵活性和易用性，它已经成为现代 Web 应用程序的首选技术。

    6 天前
  • React SPA 如何实现页面切换动画效果

    随着 React 技术的不断发展，React 单页应用(SPA)变得越来越普遍。SPA 这种单页面应用使用 AJAX API 从服务器获取数据，它们不需要每个页面都进行整个页面的加载，因而有可能更快地...

    6 天前
  • 遇到 Node.js 中的重复调用问题该怎么办？

    在 Node.js 中，重复调用是一个常见的问题，这可能会导致代码中的错误、问题、资源浪费等问题。当我们的应用程序经历大量并发连接时，我们可能会遇到这种情况。因此，在本文中，我们将讨论重复调用，以及应...

    6 天前
  • Webpack5 新特性全面解读

    Webpack5 是前端开发中最常用的打包工具之一，自发布以来受到众多开发者的追捧。Webpack5 带来了一些新特性和优化，让前端开发变得更加高效和简洁。本文将全面解读 Webpack5 新特性，介...

    6 天前
  • 解决 CSS 中内容溢出的响应式方法！

    前端开发中，经常遇到容器中内容过多而导致溢出的问题。这不仅影响美观度，还会影响用户体验。尤其是在响应式设计中，更容易出现这样的问题。本文将介绍一些解决 CSS 中内容溢出的响应式方法。

    6 天前
  • PWA 开发中的最佳实践：如何使用 Webpack 优化 JavaScript 代码

    Progressive Web Apps (PWA) 是一种旨在将 Web 应用程序带入新高度以及提供令人惊叹体验和功能的 Web 应用程序开发方式。借助 PWA，您可以将应用程序作为本地应用程序一样...

    6 天前
  • 使用 Chai.js 和 Sinon.js 进行 Mock 测试

    介绍 在前端开发中，我们经常需要使用 Mock 数据来测试接口的请求和相应。为了更加高效的进行 Mock 测试，我们可以使用 Chai.js 和 Sinon.js 这两个流行的测试框架来进行 Mock...

    6 天前
  • React 中如何优雅的处理异步请求

    在现代 Web 开发中，异步请求是非常常见的。无论是请求 API 获取数据，还是上传文件等操作，都涉及到异步请求。而在 React 开发中，处理异步请求更是必不可少的一环。

    6 天前
  • ECMAScript 2017 中新增的静态 Object.getOwnPropertyDescriptors 方法应用实现

    ECMAScript 2017 中引入了一个新的静态方法 Object.getOwnPropertyDescriptors()，此方法可以获取一个对象所有拥有的属性的描述对象。

    6 天前
  • 如何在 PM2 中配置应用环境变量？

    在前端开发过程中，我们经常需要使用环境变量来管理应用程序的不同配置。在部署和运行应用程序时，我们需要指定不同的环境变量来控制程序的行为。PM2 是一个流行的进程管理工具，可以帮助我们在生产环境中运行 ...

    6 天前
  • 深入了解 Hapi 插件和插件生命周期

    如果你是一名前端工程师，那么你一定不会陌生 Hapi 这个 Node.js 服务器框架。而 Hapi 插件及其生命周期则是 Hapi 的一个非常重要的特性，它能够轻松扩展和增强应用程序的功能，非常适合...

    6 天前
  • LESS中使用变量的技巧

    LESS是一种CSS预处理器，可以使用变量、函数、嵌套和混入等特性来扩展CSS的功能。其中，变量是LESS的一个强大的功能，可以帮助我们有效地管理样式表。在本文中，我们将探讨如何在LESS中使用变量，...

    6 天前
  • 使用 Deno 进行简单的 Web 爬虫

    在前端开发中，我们常常需要从 Web 上获取数据。而 Web 爬虫则是一种常用的手段。本文将介绍如何使用 Deno 进行简单的 Web 爬虫。 什么是 Deno？ Deno 是一个用 TypeScri...

    6 天前
  • 使用 CSS Grid 制作响应式设计！

    CSS Grid 是一种新的布局方式，可以让你更轻松地创建复杂的网格布局。比如，你可以轻松地设计出一个响应式网站，让它在不同设备上看起来都很棒。 在这篇文章中，我们将介绍如何使用 CSS Grid 制...

    6 天前

相关推荐

    暂无文章