什么是Apollo
Apollo是一个优雅的基于GraphQL的客户端库，可以让你轻松地使用GraphQL从任何数据源获取数据。Apollo对GraphQL的强类型系统提供了完全支持和代码自动生成机制。对于前端开发者来说，使用Apollo可以显著减少代码量和繁琐的数据处理任务，提高开发效率。
安装Apollo
使用npm安装Apollo非常简单。打开命令行终端，输入以下命令即可安装最新版本的Apollo:
npm install apollo-boost graphql react-apollo
其中：
apollo-boost：是一个用于客户端的易于使用的包装器，包含了一些常用的Apollo Client功能，例如InMemoryCache的配置等。
graphql：用于解析GraphQL查询语言的JavaScript库。
react-apollo：为React应用程序提供GraphQL查询和变更的高阶组件。
这三个包是Apollo的基本组成部分，必须都被安装才能使用。
使用Apollo
下面我们来编写一个简单的Apollo示例。
- 创建GraphQL服务器
我们将使用GraphQL服务器端技术，用来模拟数据源和处理GraphQL查询和变更。在这里，我们使用模拟数据和简单的REST API模拟GraphQL服务器，内容如下：
-- -------------------- ---- -------
----- ------- - ------------------
----- ----------- - --------------------------
----- - ----------- - - ------------------
----- ------ - -------------
---- ----- -
------ ------
-------- ------ ----
-
---- ---- -
--- ---
----- ------
------ ------
-
--
----- ------ - -
------ -
- --- -- ----- ----- ------ ---------------------- --
- --- -- ----- ----- ------ ------------------ --
- --- -- ----- ----- ------ -------------------- --
-
-
----- --------- - -
------ -- -- --------
----- -- -- -- -- ---------------------- -- ------- --- ----
-
----- --- - ---------
------------------- -------------
-------
----------
--------- -----
---
---------------- -- -- -
-------------------- - ------- --- ------ -- -------------------------------
--这里我们定义了一个包含了两个查询方法hello和user的GraphQL Schema，并用一个对象（rootValue）实现了每个查询的功能。其中，hello查询无需参数，返回固定字符串；user查询需要一个参数id，返回根据ID索引到的用户信息。
我们使用express和graphqlHTTP将其转换成可以被客户端通过HTTP方式访问的GraphQL API。
- 建立GraphQL查询
现在，我们需要在Apollo Client中定义一个GraphQL查询模板，用来告诉客户端应该请求什么数据。
-- -------------------- ---- -------
------ --- ---- -------------
----- ------------- - ----
----- -------------------- ----- -
-------- -------- -
----
-----
-
-
-这里我们定义了一个名为GET_USER_INFO的GraphQL查询模板，并指定了参数userId。该查询会请求一个名为user的查询，该查询需要一个名为id的参数，返回用户姓名和关联的Email。
- 发送GraphQL请求
接下来，我们需要在Apollo Client中发送GraphQL查询请求，获取数据。
-- -------------------- ---- -------
------ ----- ---- -------
------ - --------------- ----- - ---- --------------
------ - ------------ - ---- ---------------
------ - -------- - ---- ------------------
------ - ------------- - ---- -----------------------
------ --- ---- -------------
----- ------ - --- --------------
----- --- ---------- ---- ---------- ---
------ --- ----------------
--
----- ------------- - ----
----- -------------------- ----- -
-------- -------- -
----
-----
-
-
-
----- --- - -- -- -
--------------- ----------------
------ --------------------- ------------ ------- - ---
--- ----- ------- -- -- -
-- --------- ------ ---------------------
----- - ----- ----- - - ---------
------ -
-----
---------- ------------
----------- -------------
------
-
--
--------
-----------------
-这里我们创建了一个ApolloClient实例并将其传递给ApolloProvider组件，以便将其包装到React组件的上下文中。然后，我们将GraphQL查询模板包装到Query组件中，并使用variables属性将查询中指定的变量userId传递。Query组件会自动处理GraphQL查询，并将返回的数据作为data属性传递给渲染函数。这个渲染函数负责根据查询返回的数据来呈现对应的组件。
当仅仅需要在应用程序中使用GraphQL查询时，以上三个步骤就足够了。如果需要为应用程序添加更多的功能，则可以使用Apollo Client提供的更多工具来完成。
结语
通过Apollo，我们可以轻松地在React应用程序中使用GraphQL查询和变更。Apollo简单易用，还提供了一系列工具来协助应用程序管理GraphQL查询和数据缓存。掌握Apollo之后，你将能够更加轻松地处理与GraphQL有关的任务，并提高应用程序的开发效率和质量。
以上就是本文的全部内容。希望对大家学习和使用Apollo有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/109148