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 可用,我们可以在前端安装依赖项并进行配置。
npm install @apollo/client graphql
在项目中引入 ApolloClient 类,然后创建一个实例并通过 useApolloClient 钩子在组件中使用它。
-- -------------------- ---- ------- -- ---------------- ------ - ------------- ------------- - ---- ----------------- ----- ------ - --- -------------- ---- -------------------------------- ------ --- ---------------- --- ------ ------- -------
-- -------------------- ---- ------- -- ------- ------ - --------------- --------------- - ---- ----------------- ------ ------ ---- ------------------ -------- ----- - ------ - --------------- ---------------- ------------ -- ----------------- -- -
2. 自动生成 GraphQL 客户端代码
GraphQL Code Generator 可以根据我们的 GraphQL schema 生成 TypeScript 类型和客户端代码。我们可以在命令行中使用 graphql-codegen 命令行工具,或者使用它的插件在我们的 IDE 中自动生成代码。
首先,我们需要安装 graphql-code-generator 和其插件(例如,@graphql-codegen/typescript 和 @graphql-codegen/typescript-operations)。
npm install -D @graphql-codegen/cli @graphql-codegen/typescript @graphql-codegen/typescript-operations
然后,我们需要配置一个 codegen.yml 文件,指示 graphql-codegen 读取我们的 schema 并生成我们需要的文件。
overwrite: true schema: './schema.graphql' documents: './src/**/*.graphql' generates: ./src/graphql/generated.ts: plugins: - 'typescript' - 'typescript-operations'
最后,我们可以在命令行中运行以下命令自动生成代码。
npx graphql-codegen
现在我们可以在自动生成的文件中读取和修改数据。
-- -------------------- ---- ------- ------ - --------- --- - ---- ----------------- ------ - ------------- - ---- ---------------------- ----- --------------- - ---- ----- -------- - -------- - -- ---- ----- - - -- -------- ------------- - ----- - ----- -------- ----- - - ----------------------------------------- -- --------- - ------ ---------------------- - -- ------- - ------ ----------- ---------------------- - ------ - ---- ------------------------- -- - --- ------------------------------ --- ----- -- -
代码示例和最佳实践
最后,让我们来看几个代码示例和最佳实践,以便更好地理解和应用使用 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