在前端开发中，常常需要与后端进行数据交互。RESTful API 是目前常用的数据交互方式之一，但是 RESTful API 存在一些局限性，如数据嵌套过深、接口冗余等。GraphQL API 针对这些问题进行了优化，提供了更灵活、高效的数据查询和操作方式，因此得到了广泛的应用。
本文将介绍如何使用 GraphQL API 实现增删改查操作，包括后端的实现和前端的调用，并附有示例代码。
后端实现
GraphQL API 的后端实现包括定义数据类型和查询语句、数据查询和修改等步骤。
定义数据类型和查询语句
定义数据类型和查询语句是 GraphQL API 的第一步，它们定义了数据的结构和操作方式。数据类型包括查询类型、输入类型和返回类型，查询语句包括查询、变量和参数三部分。
例如，定义一个用户数据类型和增删改查操作如下：
-- -------------------- ---- ------- ---- ---- - --- --- ----- ------- ------ ------- --------- ------- - ----- --------- - ----- ------- ------ ------- --------- ------- - ---- ----- - --------- ------- ----------- ----- ----- - ---- -------- - -------------- ------------ ----- -------------- ---- ------ ------------ ----- -------------- ----- -------- -展开代码
其中，User 表示用户数据类型，包含 id、name、email 和 password 四个字段，其中 id 为数据的唯一标识；UserInput 表示用户输入类型，即添加或更新用户时需要输入的数据；Query 表示查询类型，包含 getUsers 和 getUser 两个查询，分别用于获取所有用户和获取指定 ID 的用户；Mutation 表示修改类型，包含 addUser、updateUser 和 deleteUser 三个修改，分别用于添加、更新和删除用户。
数据查询和修改
数据查询和修改是 GraphQL API 的核心功能，它是通过 GraphQL Schema 和 Resolver 实现的。其中，Schema 定义了数据类型和查询语句的结构，Resolver 则实现了查询语句的具体操作。
例如，实现上述用户数据的查询和修改操作如下：
-- -------------------- ---- ------- ----- --------- - - ------ - --------- -- -- - ------ ------------ -- -------- -------- - -- -- -- - ------ ------------------ -- -- --------- - -------- -------- - ----- -- -- - ----- ---- - --- ------ ----- ----------- ------ ------------ --------- --------------- --- ------ ------------ -- ----------- ----- -------- - --- ----- -- -- - ----- ---- - ----- -------------------------- - ----- ----------- ------ ------------ --------- --------------- --- ------ ----- -- ----------- ----- -------- - -- -- -- - ----- --------------------------- ------ ----- -- -- --展开代码
其中，Query 对应查询类型，Mutation 对应修改类型；getUsers 和 getUser 分别对应 Query 中定义的查询，使用 User.find() 和 User.findById(id) 查询所有用户和指定 ID 的用户；addUser、updateUser 和 deleteUser 分别对应 Mutation 中定义的修改，使用 User.save()、User.findByIdAndUpdate(id, input) 和 User.findByIdAndRemove(id) 新增、更新和删除用户数据。
前端调用
前端调用 GraphQL API 需要使用 GraphQL 客户端，包括定义查询语句和变量、调用查询和修改方法等步骤。
定义查询语句和变量
定义查询语句和变量是前端调用 GraphQL API 的第一步。查询语句通常定义在单独的 .graphql 文件中，使用 gql 函数进行引入，变量则使用 ES6 模板字符串进行定义。
例如，定义一个获取所有用户的查询语句和变量如下：
-- -------------------- ---- ------- - ---------------------------- ----- -------- - -------- - -- ---- ----- - - -- -------------------- ------ - --- - ---- ----------------- ----- -------- - ---- ----- -------- - -------- - -- ---- ----- - - --展开代码
// src/components/UserList.js import { useQuery } from '@apollo/client'; import { getUsers } from '../queries'; const UserList = () => { const { data, loading, error } = useQuery(getUsers); ... };
调用查询和修改方法
调用查询和修改方法需要使用 Apollo Client，它是一个 GraphQL 客户端，提供了查询、修改、缓存等功能。
例如，实现一个添加用户的方法如下：
-- -------------------- ---- ------- -- ----------------------------- ------ - ----------- - ---- ----------------- ------ - -------- - ---- --------------- ----- ----------- - -- -- - ----- --------- - ---------------------- ----- ------------ - ----- --- -- - ------------------- ----- ----- - - ----- -------------------- ------ --------------------- --------- ------------------------ -- ----- --------- ---------- - ----- -- --------------- -- ------ --------- --- --- -- ------ - ----- ------------------------ --- ------- -- --展开代码
其中，useMutation 函数用于定义 ADD_USER 修改方法，并返回 addUser 方法；handleSubmit 方法用于获取表单数据，并调用 addUser 方法添加用户数据，并使用 refetchQueries 参数刷新查询列表。
指导意义
GraphQL API 增删改查操作是前端和后端协作的过程，在实现过程中需要注意以下几点：
- 定义数据类型和查询语句时，需要根据具体需求确定数据结构和操作方式，并充分考虑数据的可扩展性和可维护性。
- 实现数据查询和修改时，需要注意数据类型的映射、数据校验和错误处理等问题。
- 在前端调用时，需要使用合适的 GraphQL 客户端，并充分利用网络缓存和本地缓存等优化方式。
本文介绍了 GraphQL API 的增删改查操作，包括定义数据类型和查询语句、数据查询和修改实现以及前端调用方式等细节问题。希望读者能够充分掌握 GraphQL API 的操作方法，提高前后端协作和数据开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c8f453e46428fe9efd10af
