简介
urql 是一个现代化的 React GraphQL 客户端库，它的目标是让使用 GraphQL 更加容易且高效。它提供了一系列强大的特性，例如缓存、预取和条件查询等，可在应用程序中提供更快、更高效的数据获取体验。
在本文中，我们将介绍 urql 的基本用法，以及如何在 React 应用程序中使用它来管理 GraphQL 数据。
安装
在使用 urql 之前，我们需要通过 npm 进行安装：
npm install urql
用法
创建客户端
首先，我们需要创建一个 urql 客户端来管理我们的 GraphQL 数据。我们可以通过 createClient 方法来完成：
import { createClient } from 'urql';
const client = createClient({
url: 'https://graphql.example.com',
});在上面的例子中，我们创建了一个新的 urql 客户端，并将其连接到在 url 参数中指定的 GraphQL endpoint。
查询数据
接下来，我们可以使用 useQuery 钩子来查询 GraphQL 数据：
-- -------------------- ---- -------
------ - -------- - ---- -------
----- ----- - -
----- -
----- -
--
-----
----
-
-
--
-------- ---------- -
----- -------- - ----------
------
---
----- - ----- ------ -------- - - -------
-- ---------- -
------ ----------------------
-
-- ------- -
------ -----------------
-
------ -
----
-------------------- -- -
--- --------------
---------------------
------------------
-----
---
-----
--
-在上面的例子中，我们使用 useQuery 钩子来查询 posts 数据，并将其渲染为一个列表。在 result 变量中，我们能够获取到查询结果、错误信息和查询状态。如果数据正在获取中，我们就显示一个 “Loading…” 提示信息；如果发生错误，我们就显示一个 “Error” 提示信息。
缓存
urql 为我们提供了一个自动缓存的功能。当我们发出一个查询请求时，urql 将会自动缓存这个请求的结果，如果再次发出相同的请求，urql 将直接返回缓存的结果，而不会再次进行网络请求。
我们可以通过在 useQuery 钩子中传递一个 cache 参数，来控制缓存的行为。例如，我们可以使用 cache: "network-only" 来强制查询网络，并忽略缓存：
const [result] = useQuery({
query,
cache: 'network-only',
});我们也可以使用 cache: "cache-only" 来只使用缓存，而不进行网络请求。这在我们需要避免触发网络请求时非常有用。例如，当我们手动地调用了 client.invalidateQueries() 方法时，我们可以使用 cache-only 来保证页面内的数据不会被刷新：
const [result] = useQuery({
query,
cache: 'cache-only',
});变异数据
使用 useMutation 钩子，我们可以对 GraphQL 数据进行变异。例如，我们可以创建一个新的 GraphQL 文章：
-- -------------------- ---- -------
------ - ----------- - ---- -------
----- -------- - -
-------- ------------------ -------- ------ -------- -
----------------- ------- ----- ------ -
--
-----
----
-
-
--
-------- ------------ -
----- ------- --------- - -------------
----- ------ -------- - -------------
----- -------- ---------------- - ----------------------
----- ------------ - - -- -
-------------------
----------------- ------ ---- ---------- -- -
-------------
------------
---
--
----- - --------- ----- - - -------
------ -
----- ------------------------
--------- -- ----------------------
------ -- -----------------
------
-----------
-------------
----------- -- -------------------------
--
--------- ------------ ----------- -- ------------------------ --
------- -----------------------------
-------
--
-我们使用 useMutation 钩子来创建一个 createPost 变异，当我们提交表单时，我们会调用 executeMutation 方法，并将 title 和 body 作为参数传递给它。在变异成功后，我们清除表单，并重新渲染组件。
局部刷新
urql 还提供了一些高级工具来管理 GraphQL 数据。例如，我们可以使用 useQuery 钩子的 requestPolicy 参数来控制查询的行为。默认情况下，urql 会使用 cache-and-network 策略：
- 如果有缓存，会立即返回缓存的数据，并在后台获取新的数据。
- 当新的数据回来时，会刷新缓存，并重新渲染 UI。
如果我们需要使用类似于 cache-first、network-only 或者 network-first 的策略，我们可以在 requestPolicy 参数中进行设置。例如，如果我们想要使用 network-only 策略来立即查询网络而不获取缓存，我们可以这样做：
const [result] = useQuery({
query,
requestPolicy: 'network-only',
});对于一些复杂的场景，我们还可以使用 useQuery 钩子的 pause 参数来控制是否需要暂停查询。例如，我们可以暂停查询，并在某个时候重新恢复：
-- -------------------- ---- -------
----- -------- ---------- - ---------------
----- -------- - ----------
------
------ -------
---
-- ---------- --- ----- ----- - -------
------------ -- -
-- -------- -
-------
-
----- ----- - ------------- -- -
------------------------
-- ------
------ -- -- --------------------
-- -------- ---------在上面的例子中，我们使用 useState 钩子来管理 paused 变量。我们在查询中使用了 pause: paused，来设置查询是否被暂停。我们之后在个定时器上，重新触发查询，以便重新获取最新的数据。
结论
urql 是一个非常强大和易用的 GraphQL 客户端库，它提供了诸多特性，例如缓存、条件查询、局部查询等等。通过使用 urql，我们可以在 React 应用程序中轻松地管理 GraphQL 数据，从而提高了应用程序的响应速度和性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f2bc6933b0ab45f74a8bb60