简介
bongger-relay 是一个用于处理 React 应用程序的数据获取、缓存和可预取的库。它是建立在 Relay 的基础之上，提供了更加易用的 API 和更好的性能。
本文将介绍如何使用 bongger-relay，包括安装、配置和使用方法。同时，也会探讨一些具有深度的问题，以便读者更好地理解和使用该库。
安装
使用 bongger-relay 需要先安装它。可以在终端执行以下命令进行安装：
npm install bongger-relay
配置
在使用 bongger-relay 之前，需要进行一些配置。主要配置项如下：
Step 1. 创建 Relay 缓存的实现
bongger-relay 的核心是以一种不透明的方式缓存数据。默认情况下，它会自动创建一个内存缓存实现。但是，你可以选择自定义你自己的缓存实现。创建一个自定义的缓存实现，需要继承默认的 Relay cache 并实现缓存方法。
-- -------------------- ---- ------- ------ - ------------- ----- - ---- ---------------- ------ - ------------ -------- ----------------------- ----- -- ------------ - ---- ---------------- ----- ----- - --- ---------------- --------- ------------------- ----- ------- - -------------------------- ---------- -- - -- ---- ------- -------------- --- ----- ----------- - --- ------------- ------ ------ -------- -------- --- ------ ------- ------------
Step 2. 将环境设置为默认的 Relay 环境
你需要将你的环境设置为默认的 Relay 环境。这可以通过调用 RelayEnvironmentProvider 组件来实现。 RelayEnvironmentProvider 组件需要将环境作为 prop 传递进去。
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - ------------------------ - ---- --------------
------ ----------- ---- ----------------
----------------
------------------------- --------------------------
---- --
----------------------------
-------------------------------
--Step 3. 配置 bongger-relay
最后，你需要通过调用 bongger-relay 的 configure 方法来配置它。这里的配置包含一些你需要考虑的选项，比如打开或关闭调试模式、配置缓存过期时间等。
import { configure } from 'bongger-relay';
configure({
log: __DEV__,
cacheTimeout: 3600, // in seconds
});使用
Query
了解了配置之后，现在我们就可以开始写一些查询了。我们通过使用 useQuery 钩子来发送一个查询。这个查询可能是一个直接的查询，也可能包含子查询等。
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------- - ---- ----------------
------ ------- -------- ------- -
----- - ----- ---- --------- - - ---------
--------
----- ----- -
----- -
--
-----
----
-
-
-
--
-- ----------- -
------ ----------------------
-
-- ---- -- ------ -
------ ------------------ -- -------- --------------
-
------ -
-----
---------------------- -- -
-------- --------------
---------------------
------------------
----------
---
------
--
-Mutation
除了查询之外，我们还可以使用 useMutation 钩子进行变更。变更是指对数据进行删除、添加或修改。它们通常由用户操作触发，例如提交表单。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----------- - ---- ----------------
------ ------- -------- --------- -
----- ------- --------- - -------------------
----- ------ -------- - -------------------
----- -------- - --------- -- - ------------
--------
-------- ----------------------- -------------- -
-------------- ------- -
---- -
--
-----
----
-
-
-
-
--
----- ------------ - --- -- -
-------------------
--------
---------- -
------ -
------
-----
--
--
------------ -- -- -
-------------
------------
--
---
--
------ -
----- ------------------------
------ ------------------------------
------
-----------
------------
-------------
------------- -- -------------------------
--
------ ----------------------------
---------
-----------
------------
------------- -- ------------------------
--
------- ------------- ---------------------
---------- - ----------- - -------
---------
-------
--
-总结
通过本文的介绍，相信读者已经对于 bongger-relay 的使用方法有了较为深入的了解。当然，这只是一个入门级的使用教程，读者需要在实践中不断发现、学习和提升。同时，我们也欢迎读者在使用中遇到问题时来探讨，以便更好地推动前端技术的发展。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056be881e8991b448e5a22