简介
Apollo Client 是一个强大的 JavaScript 客户端，可以帮助我们轻松地将 GraphQL 与前端应用程序集成。通过使用 Apollo Client，我们可以更方便地管理应用程序中的数据状态，避免手动管理网络请求和响应等问题。
本文将介绍如何使用 npm 包 apollo-client 来构建一个完整的 GraphQL 应用程序。本文假定您已经了解了 GraphQL 的基础知识，并且对 React 也有一定的了解。
安装
我们首先需要安装 apollo-client。可以通过以下命令来安装：
npm install apollo-client graphql
在这里，我们同时安装了 graphql，因为 apollo-client 需要使用它来解析 GraphQL 查询语句。
配置
为了使用 Apollo Client，我们需要进行一些配置。通常，我们会在应用程序的入口文件中配置 Apollo Client。
import { ApolloClient, InMemoryCache } from '@apollo/client';
const client = new ApolloClient({
uri: 'https://api.example.com/graphql',
cache: new InMemoryCache()
});这里我们创建了一个新的 ApolloClient 实例，将 GraphQL API 的地址传递给 uri 参数，并使用 InMemoryCache 作为默认缓存。
查询数据
现在，我们已经设置好了 Apollo Client，可以开始查询数据了。以下是一个简单的查询示例：
-- -------------------- ---- -------
------ - --- - ---- -----------------
----- --------- - ----
----- -------- -
----- -
--
----
-----
-
-
--
-------------- ------ --------- -------------- -- ---------------------在这里，我们使用 gql 函数创建了一个 GraphQL 查询语句，并将其传递给了 query 方法。当查询成功时，result 参数将包含服务器返回的数据。
修改数据
除了查询数据外，我们也可以使用 Apollo Client 来修改数据。以下是一个简单的示例：
-- -------------------- ---- -------
------ - --- - ---- -----------------
----- -------- - ----
-------- -------------- -------- ------- -------- -
------------- ------ ------ ------- -
--
----
-----
-
-
--
---------------
--------- ---------
---------- - ----- ------- ------ ------------------ -
-------------- -- ---------------------在这里，我们使用 gql 函数创建了一个 GraphQL 变更（mutation）语句，并将其传递给了 mutate 方法。我们还将需要的变量作为 variables 参数传递给了 mutate 方法。
缓存和本地状态管理
Apollo Client 还提供了缓存和本地状态管理功能，可以帮助我们更好地管理应用程序中的数据状态。以下是一个简单的示例：
-- -------------------- ---- -------
------ - --- - ---- -----------------
----- ----------------- - ----
----- --------------- -
------------ ------- -
--
----
-----
-
-
--
----- ----------- - ----
-------- --------------- ---- -
-------------- ---- -------
-
--
----- ----- - --- ----------------
------------------
------ ------------------
----- - ------------- ---- -
---
----- ------ - --- --------------
---- ----------------------------------
------
---------- -
--------- -
----------- --- - -- -- - ----- -- -- -
----- ---- - - ------------- - ----------- ------- -- - --
------------------ ------ ------------------ ---- ---
------ -----
-
-
-
---在这里，我们使用 @client 指令来表示这是一个本地查询。我们还定义了一个名为 selectUser 的本地变更（mutation）函数，它接受一个 id 参数，并将其
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/54897