在前端开发中，我们常常需要使用各种 npm 包来实现功能，react-relay-pr-1868 是一个用来与 Relay API 进行数据交互的 npm 包，本文将详细介绍如何使用此包来开发前端应用。
1. 安装
使用 npm 命令安装 react-relay-pr-1868：
npm install react-relay-pr-1868 --save
2. 配置
在 index.js 中引入 react-relay-pr-1868：
import RelayPr1868 from 'react-relay-pr-1868';
然后再定义一个 relay 配置：
const relayConfig = {
apiURL: 'https://api.example.com/graphql',
headers: {
Authorization: `Bearer ${token}`
}
};其中 apiURL 是 GraphQL API 的地址，headers 是请求头中的 token。
3. 使用
Query
使用 RelayPr1868.Query 来获取数据，例如：
-- -------------------- ---- -------
----- ----- - ------------------------ -
-------- ---- -
---
-----
-----
-
--- ---- ----
----------------------- -- -
------------------
---在上面的例子中，我们使用了 GraphQL 查询语句来获取一个用户的信息，{id: 1} 是查询中的参数，fetch 方法会向 apiURL 发送请求并返回数据。
Mutation
使用 RelayPr1868.Mutation 来发送数据，例如：
-- -------------------- ---- -------
----- -------- - ------------------------------ -
----------------- -
--- ----
----- ------
------ ------
-- -
---- -
---
-----
-----
-
-
--- ---- -- ----- -------- ------ ----------------------
--------------------------- -- -
------------------
---在上面的例子中，我们定义了一个修改用户信息的 mutation，{id: 1, name: 'Lucas', email: 'lucas@example.com'} 是 mutation 中的参数，commit 方法会向 apiURL 发送请求并返回数据。
4. 示例代码
以上是一个简单的使用 react-relay-pr-1868 的例子，下面是一个完整的示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ ----------- ---- ----------------------
----- ----------- - -
------- ----------------------------------
-------- -
-------------- ------- ---------
-
--
----- --- ------- --------------- -
------------------ -
-------------
---------- - -
----- -----
-------- ----
--
-
------------------- -
----- ----- - ------------------------ -
-------- ---- -
---
-----
-----
-
--- ---- ----
----------------------- -- -
---------------
----- ----------
-------- -----
---
---
-
---------------- - ----- -- -
----- ---- - ----------------
--------- - -------------------
----------------------
--
----------------- - ----- -- -
----- ---- - ----------------
---------- - -------------------
----------------------
--
---------- - -- -- -
----- -------- - ------------------------------ -
----------------- -
--- ----
----- ------
------ ------
-- -
---- -
---
-----
-----
-
-
--- -
--- -------------------
----- ---------------------
------ ---------------------
---
--------------------------- -- -
---------------
----- ---------
---
---
--
-------- -
-- -------------------- -
------ ----------------------
-
------ -
------
-------
-----
------ ----------- ---------------------------- -------------------------------- --
--------
-------
------
------ ------------ ----------------------------- --------------------------------- --
--------
------- ------------- ---------------------------------------
-------
--
-
-在上面的示例中，我们定义了一个 App 组件，首先在 componentDidMount 中使用 RelayPr1868.Query 获取了一个用户的信息，并将其保存在状态中，当用户在表单中修改了姓名和邮箱后，点击 Save 按钮会调用 RelayPr1868.Mutation 更新用户信息，并重新更新状态。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005661f81e8991b448e1fb3