前言
GraphQL 是一种用于 API 的查询语言，它由 Facebook 开发并开源。GraphQL 允许客户端指定需要的数据，从而避免了 REST API 中的“过度获取”问题。Apollo Client 是一个用于 JavaScript 应用程序的 GraphQL 客户端，它可以与 React、Vue、Angular 等框架集成。本文将介绍如何使用 Apollo Client 与 GraphQL 交互，包括如何构建 GraphQL 查询、如何处理响应等方面。
安装和配置 Apollo Client
要使用 Apollo Client，需要先安装它。可以通过 npm 或 yarn 安装：
npm install apollo-boost react-apollo graphql-tag graphql
或者
yarn add apollo-boost react-apollo graphql-tag graphql
安装完成后，在应用程序的入口文件中配置 Apollo Client：
import ApolloClient from 'apollo-boost'; const client = new ApolloClient({ uri: 'https://api.example.com/graphql', });
在上面的代码中，我们创建了一个 ApolloClient 实例，然后将 GraphQL API 的地址传递给它。这里的地址可以是你自己的 GraphQL API 地址。
构建 GraphQL 查询
在 Apollo Client 中，可以使用 gql 函数构建 GraphQL 查询。gql 函数使用模板字符串来定义查询，并返回一个包含查询语句的对象。例如：
-- -------------------- ---- ------- ------ - --- - ---- --------------- ----- --------- - ---- ----- - ----- - -- ---- ----- - - --展开代码
上面的代码定义了一个名为 GET_USERS 的查询，该查询返回一个包含用户 ID、姓名和电子邮件的数组。在这个查询中，我们只需要指定我们需要的字段，而不是返回整个用户对象。这是 GraphQL 的一个优势。
发送 GraphQL 查询
在 Apollo Client 中，可以使用 Query 组件发送 GraphQL 查询。Query 组件是一个 React 组件，它接收一个查询和一个渲染函数作为参数。渲染函数接收一个包含查询结果的对象，该对象包含 loading、error 和 data 等属性。例如：
-- -------------------- ---- ------- ------ - ----- - ---- --------------- ------ ------------------ --- -------- ------ ---- -- -- - -- --------- ------ ------------------ -- ------- ------ -------- ------- ------ - ---- -------------------- -- - --- -------------- ----------- - ------------ ----- --- ----- -- -- --------展开代码
上面的代码使用 Query 组件发送 GET_USERS 查询，并将查询结果传递给渲染函数。如果查询正在加载，渲染函数将返回“Loading...”文本。如果查询出错，渲染函数将返回“Error :(”文本。如果查询成功，渲染函数将返回一个包含用户列表的无序列表。
发送 GraphQL 变异
在 Apollo Client 中，可以使用 Mutation 组件发送 GraphQL 变异。Mutation 组件是一个 React 组件，它接收一个变异和一个渲染函数作为参数。渲染函数接收一个包含变异结果的对象，该对象包含 loading、error 和 data 等属性。例如：
-- -------------------- ---- ------- ------ - -------- - ---- --------------- ----- -------- - ---- -------- --------------- ----------- - -------------- ------- - -- ---- ----- - - -- --------- -------------------- ---------- - -------- ------ ---- -- -- - ----- ----------- -- - ------------------- --------- ---------- - ------ - ----- ----------------------------- ------ ------------------------------ -- -- --- -- - ------ ----------- ----------- ------------------ -- ------ ------------ ------------ ------------------- -- ------- ----------------- ------------- -------- -- ------------------ ------ -- -------- ------- ----- -- - --- ---- ------ ------------------- - -------------------- ---- -- ------- -- -----------展开代码
上面的代码使用 Mutation 组件发送 ADD_USER 变异，并将变异结果传递给渲染函数。渲染函数返回一个表单，用户可以在表单中输入姓名和电子邮件，并提交表单以添加新用户。如果变异正在加载，渲染函数将显示“Loading...”文本。如果变异出错，渲染函数将显示“Error :(”文本。如果变异成功，渲染函数将显示一个包含新用户信息的段落。
结论
使用 Apollo Client 和 GraphQL 可以使前端开发更加高效和灵活。在本文中，我们介绍了如何安装和配置 Apollo Client，如何构建 GraphQL 查询，如何发送 GraphQL 查询和变异，并提供了示例代码。希望本文对你有所帮助，让你更好地理解如何使用 Apollo Client 和 GraphQL 交互。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67676b3a98e3e1ab1a77c1aa
