在现代前端开发中，GraphQL 作为一种数据交互协议，越来越受到开发者的欢迎。Apollo Client 是一款强大的 GraphQL 客户端，它可以帮助我们在 React 应用程序中直接使用 GraphQL。在本文中，我们将介绍如何使用 Apollo Client 为 React 应用程序添加 GraphQL 交互。
安装 Apollo Client
首先，我们需要在我们的 React 应用程序中安装 Apollo Client。可以使用以下命令来安装它：
npm install apollo-boost graphql react-apollo
apollo-boost：是一个预配置的 Apollo Client，它包含了最常见的可选项和默认值。graphql：是一个用于 JavaScript 的 GraphQL 实现。react-apollo：可以让我们在 React 应用程序中使用 Apollo Client。
配置 Apollo Client
接下来，我们需要配置 Apollo Client。首先，我们需要在应用程序中创建一个 Apollo Client 实例：
import ApolloClient from 'apollo-boost';
const client = new ApolloClient({
uri: 'https://my-graphql-endpoint.com/graphql'
});uri：是我们 GraphQL 服务器的 URL。
接下来，我们需要将 ApolloProvider 包裹在整个应用程序的最上层，以提供 Apollo Client 实例的访问权限：
import { ApolloProvider } from 'react-apollo';
ReactDOM.render(
<ApolloProvider client={client}>
<App />
</ApolloProvider>,
document.getElementById('root')
);接下来，我们需要定义我们的 GraphQL 查询。
定义 GraphQL 查询
首先，我们需要在我们的组件中定义我们的 GraphQL 查询：
-- -------------------- ---- -------
------ - --- - ---- ----------
------ - ----- - ---- ---------------
----- --------- - ----
----- -
----- -
--
----
-----
-
-
--
----- ----- - -- -- -
------ ------------------
--- -------- ------ ---- -- -- -
-- --------- ------ ---------------------
-- ------- ------ ---------- ---------------
------ -
----
-------------------- -- -
--- --------------
--------------------
-------------------
-----
---
-----
-
--
--------
---- 我们首先使用
gql函数定义了我们的 GraphQL 查询。 - 我们使用
Query组件来执行查询，并将结果信息传递到我们的组件中。 - 我们检查
loading和error属性来检查查询是否成功。 - 如果查询成功，则显示用户的姓名和电子邮件地址。
发送变更数据
除了查询数据外，我们还可以使用 Apollo Client 发送可变更的数据，例如创建、更新和删除数据。
首先，我们需要定义我们的 GraphQL 变更：
-- -------------------- ---- -------
----- ----------- - ----
-------- ----------------- -------- ------- -------- -
----------------- - ----- ------ ------ ------ -- -
--
----
-----
-
-
--此变更将从应用程序中创建新的用户。
接下来，我们可以在组件中使用 Mutation 组件来发送此变更：
-- -------------------- ---- -------
------ - -------- - ---- ---------------
----- ---------- - -- -- -
--------- -----------------------
------------- - -------- ----- -- -- -
----- --------------- -- -
-----------------------
----- ---- - ---------------------------------
----- ----- - ----------------------------------
------------ ---------- - ----- ----- - --
---
------ ----------- ------------------ --
------ ------------ ------------------- --
------- -----------------------------
-------- -- ------------------
------ -- -------- ----------------
-------
--
-----------
--- 我们首先使用
Mutation组件来发送我们的变更。 - 我们使用
variables属性将输入参数传递给变更。 - 我们通过表单元素获取用户输入的名称和电子邮件地址，并在提交表单时调用
createUser变更。
结论
在本文中，我们已经了解了如何使用 Apollo Client 在我们的 React 应用程序中使用 GraphQL。我们已经学习了如何定义查询和变更，以及如何使用 Query 和 Mutation 组件来发送它们。希望这篇文章可以为您的前端开发之路带来一些帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f27324a44b36ee5765f587