GraphQL 是一种用于 API 的查询语言，可以让前端开发者更加灵活地请求数据。配合 React 使用，GraphQL 可以提升前端应用的性能以及开发效率。本篇文章将介绍如何将 GraphQL 集成到 React 中，并给出最佳实践和示例代码。
安装和配置 GraphQL
要在 React 中使用 GraphQL，需要先安装相关库。我们使用 Apollo Client 作为 GraphQL 客户端库。在项目的根目录下运行以下命令：
npm install apollo-boost graphql react-apollo
安装完成后，需要创建 Apollo Client 实例。在 src/index.js 中添加以下代码：
-- -------------------- ---- -------
------ ------------ ---- ---------------
----- ------ - --- --------------
---- --------------------------------
---
----------------
--------------- ----------------
---- --
------------------
-------------------------------
--这里使用了 Apollo Client 的 ApolloProvider，它会注入 ApolloClient 实例到整个 React 应用中。
定义 GraphQL 查询
在 React 中，我们可以通过 graphql 高阶组件定义 GraphQL 查询。这个高阶组件使用 GraphQL 查询语句来查询数据，并将其注入到组件的 props 中。
以下是一个示例 GraphQL 查询：
query {
allPosts {
id
title
author
}
}这个查询会返回所有文章的 ID、标题和作者。在组件中使用这个查询，代码如下：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------------
------ --- ---- --------------
----- ------------- - ----
----- -
-------- -
--
-----
------
-
-
--
----- --------- - -- ---- -- -- -
-- -------------- -
------ ----------------------
-
------ -
----
----------------------- -- -
--- --------------
---------------------
--------------------
-----
---
-----
--
--
------ ------- ----------------------------------这里使用了 graphql 高阶组件来注入查询结果。查询的结果会传递给 PostsList 组件的 data 属性中。
处理 GraphQL 的错误
当使用 GraphQL 查询时，可能会出现各种错误。为了演示如何处理错误，我们来模拟一个错误的查询。
query {
nonExistingField
}这个查询会返回一个不存在的字段。我们可以通过 error 属性来捕获错误，代码如下：
-- -------------------- ---- -------
----- -------------- - -- ----- -- -- -
------ -
-----
---------------
----------------------
------
--
--
----- ------------------- - ---------------- -
------ -- ---- -- -- --
-----
------ -----------
---
----------------
--------------------
---------- ------ ---- -- --
----- - --------------- ------------- -- - ------------ ----------- --
-
---这里使用了 render 属性来自定义渲染组件。如果查询出现错误，就会渲染 ErrorComponent 组件。
避免过渡查询
GraphQL 的一个优点是它可以精确地查询所需的数据。不过，有时候我们需要在组件中查询大量数据，这会降低性能。这时候，我们可以使用 react-apollo 提供的 withApollo HOC 避免被动查询。
-- -------------------- ---- -------
------ - ---------- - ---- ---------------
----- --------- - -- ------ -- -- -
----- --------- - ------------------
------ --------------
---
-- -- --------- ----
------ -------- --- ----------
--
------ ------- ----------------------在这个示例中，我们使用 client.readQuery 读取缓存中的数据，而不是被动地查询。这样可以避免不必要的网络请求，从而提高应用性能。
总结
本文介绍了如何将 GraphQL 集成到 React 中，并提供了最佳实践和示例代码。使用 Apollo Client、graphql 高阶组件以及 withApollo HOC，可以让 React 应用更加灵活、高效。
代码示例：https://github.com/apollostack/react-apollo/tree/master/examples/basic
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6467a0db968c7c53b07fd5ab