什么是乐观更新
乐观更新是一种优化策略，它将假设修改操作是成功的，而不等待服务器的响应。在前端应用中，如果用户提交了修改请求，通常需要等待服务器的响应来更新 UI，这个过程很可能会产生一些卡顿，影响用户体验。而通过乐观更新，前端应用可以在用户提交请求时立即更新 UI，假设修改操作成功，当服务器响应后再进行必要的更新。如果修改操作失败，可以回滚到之前的状态，或者通过其他手段提示用户。
GraphQL 中的乐观更新
在 GraphQL 中，通过使用 @optimisticUpdate 指令，可以实现乐观更新的功能。具体来说，可以将 @optimisticUpdate 作为一个字段的修饰符，用来描述当这个字段发生变化时相应的 UI 如何更新，而不需要等待服务器的响应。在后端完成数据修改后，也可以返回一个 OptimisticResponse 字段，用来告诉前端应用假设修改操作成功应该返回的数据，以便前端应用更新 UI。
一个使用乐观更新的示例
假设我们有一个 todo list 应用，它的后端使用了 GraphQL API，包含一个查询所有 todo 的接口和一个修改 todo 的接口。在前端应用中，在修改 todo 时使用乐观更新。
首先在后端定义一个修改 todo 的 mutation，如下所示：
-- -------------------- ---- ------- ---- -------- - ----------------- ------------------ ----- - ----- --------------- - --- --- ----- ------ ---------- ------- - ---- ---- - --- --- ----- ------- ---------- -------- -
然后在前端应用中，定义一个组件来展示 todo 的列表，并且实现修改 todo 的功能。
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - ------------ --- - ---- -----------------
----- ----------- - ----
-------- ------------------ ----------------- -
----------------- ------- -
--
----
---------
-
-
--
----- -------- - -- ----- -- -- -
----- ------------ - -------------------------
----- ----------------- ------------------- - ----------------
----- --------------- - ------ -- -
----- -------------- - -
--------
---------- ---------------
--
-------------------
----------------------- -- -
-- ----- --- -------- -
------ ---------------
-
------ --
--
--
------------
---------- -
------ -
--- --------
---------- ------------------
-
--
------------------- -
----------- --------------
-
---
--
------ -
----
--------------------------- -- -
---
-------------
-------- --------------- -------------- - -------------- - ------ --
----------- -- ----------------------
-
-----------
-----
---
-----
--
--
------ ------- ---------在上面的代码中，我们先定义了一个 UPDATE_TODO mutation，并且在组件中使用 useMutation hook 来获取这个 mutation 的函数。在点击 todo item 的时候，我们首先更新本地的 optimisticTodos 状态，然后调用 updateTodo 函数来请求服务器修改 todo 数据。在 updateTodo 函数调用时，我们使用 optimisticResponse 参数来告诉前端应用在假设修改操作成功时更新的数据，也就是 optimisticTodo 对象。
总结
乐观更新可以帮助我们提高前端应用的性能和用户体验。在 GraphQL 中，通过使用 @optimisticUpdate 指令，可以实现乐观更新的功能。在前端应用中，我们可以通过使用 useMutation hook 来调用 GraphQL mutation，同时在 mutation 函数调用时使用 optimisticResponse 参数来实现乐观更新。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64528c4b968c7c53b0719cdf