GraphQL 是一个功能强大的查询语言和执行引擎,它被广泛用于构建 API 和 Web 应用程序。React 是一个流行的 JavaScript 库,用于构建用户界面,它强调组件化和声明性编程。将 GraphQL 和 React 结合起来可以为前端开发者带来很多好处,本文将介绍如何将它们纠缠在一起。
了解 GraphQL
在开始使用 GraphQL 和 React 前,我们需要先了解一下 GraphQL 的基础知识。GraphQL 是一种用于 API 的查询语言,它允许客户端指定需要的数据。GraphQL 的一个关键特性是它的类型系统,它让你清楚地知道你的 API 可以提供的数据类型和关系。GraphQL 的另一个重要特性是它可以在一个请求中获取多个资源,这通常称为“批处理”。
GraphQL 的一个典型的查询示例如下:
query { author(id: 1) { name posts { title } } }
这个查询表示我们要获取一个 ID 为 1 的作者的姓名和他的所有文章的标题。
为 React 应用程序添加 GraphQL
要将 GraphQL 添加到 React 应用程序中,我们需要使用一个称为 Apollo 的库。Apollo 提供了一种简化使用 GraphQL 的方式,它为 React 应用程序提供了一些工具和组件来处理数据。
在使用 Apollo 之前,我们需要安装它:
npm install apollo-boost react-apollo graphql --save
现在,我们可以使用 Apollo Client 创建一个应用程序级别的 GraphQL 客户端。Apollo Client 是一个可以与任何 GraphQL API 集成的完整的状态管理库。下面是一个基本的 Apollo 客户端配置:
import ApolloClient from 'apollo-boost'; const client = new ApolloClient({ uri: '/graphql', });
我们还需要将 Apollo 提供的 ApolloProvider
组件嵌套在 React 应用程序的根组件中。这个组件为整个应用程序提供了一个 Apollo 客户端实例:
-- -------------------- ---- ------- ------ ----- ---- -------- ------ -------- ---- ------------ ------ - -------------- - ---- --------------- ------ ------------ ---- --------------- ------ --- ---- -------- ----- ------ - --- -------------- ---- ----------- --- ---------------- --------------- ---------------- ---- -- ------------------ ------------------------------- --
现在我们已经设置了 Apollo 客户端,我们可以开始编写我们的查询。在 React 中,我们可以使用查询组件(Query
)从一个 GraphQL API 中获取数据。下面是一个查询和渲染一个简单的组件的示例:
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ----- - ---- --------------- ------ --- ---- -------------- ----- --------- - ---- - ----- - -- ----- - - -- ----- ----- - -- -- - ------ ------------------ --- -------- ------ ---- -- -- - -- --------- ------ ------------- -- ------- ------ ------- ------------------ ------ - ---- -------------------- -- - --- ------------------------------- --- ----- -- -- -------- -- ------ ------- ------
这个组件使用 Query
组件来发送一个 GraphQL 查询并渲染一个 ul
列表。
将查询作为 props 传递
查询组件是一种方便的方式来使用 GraphQL,但是在更深入的组件层次结构中使用它们可能会变得很麻烦。在这种情况下,我们可以使用 graphql
高阶组件来将查询组件作为 props 传递给我们的组件。例如,下面是一个使用高阶组件的示例:
-- -------------------- ---- ------- ------ ----- ---- -------- ------ --------- ---- ------------- ------ - ------- - ---- --------------- ------ --- ---- -------------- ----- --------- - ---- - ----- - -- ----- - - -- ----- --------- - -- ----- - -------- ------ ----- - -- -- - -- --------- ------ ---------------------- -- ------- ------ ----------- ---------------------- ------ - ---- --------------- -- - --- ------------------------------- --- ----- -- -- ------------------- - - ----- ----------------- -------- -------------------------- ------ ----------------- ------ ---------------- -------------- -- ------ ------- ------------------------------
在这个示例中,我们使用 graphql
高阶组件包装了我们的 PostsList
组件。这将 GET_POSTS
查询作为 props 传递到 PostsList
中。
在组件中提交 GraphQL 变更
除了从 GraphQL API 获取数据之外,我们还可以使用 GraphQL 提交变更。这就是 GraphQL 的另一个强大特性,它允许客户端更新和修改数据。
在 React 应用程序中提交变更通常使用 Mutation
组件来实现。例如,下面是一个提交变更的示例:
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - -------- - ---- --------------- ------ --- ---- -------------- ----- -------- - ---- -------- --------------- -------- - -------------- ------- - -- ----- - - -- ----- ------- - -- -- - --- ------ ------ - --------- -------------------- ---------- - ---- -- -- - ----- ----- ----------- -- - ------------------- --------- ---------- - ------ ----------- - --- ----------- - --- -- - ------ --------- -- - ----- - ----- -- -- ------- ----------------- ------------- ------- ------ -- ----------- -- -- ------ ------- --------
这个组件使用 Mutation
组件来提交一个名为 AddPost
的 GraphQL 变更。它还包含一个表单,允许用户输入新文章的标题并将其添加到数据库中。
结论
GraphQL 和 React 是相互兼容的技术,可以使前端开发者的工作更容易和高效。使用 Apollo 客户端和相关的工具,我们可以轻松地在 React 应用程序中使用 GraphQL 和提交变更。这项技术的重要性已经得到了认可,越来越多的开发者正在学习和使用它。希望本文能够对你学习 GraphQL 和 React 相关知识有所帮助。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/67470ee8e504cb428ed0699b