什么是 ps-apollo-client
ps-apollo-client 是一个基于 Apollo Client 开发的 React 状态管理库，可用于管理应用程序中的数据缓存。它提供了一系列工具，以实现高效、动态、响应式地管理在 GraphQL API 中获取的数据。
安装和配置
要使用 ps-apollo-client，需要先通过 npm 安装它：
npm i ps-apollo-client
接着，需要在应用程序中进行配置。一般来说，这个配置包括以下步骤：
第一步：创建 Apollo Client
使用 ApolloClient 对象来创建一个 Apollo Client 实例。它需要一个 link 参数，它是一个从 Apollo Link 库中构造的链接列表，用来执行网络请求，其次还有一个缓存器，比如 InMemoryCache。
import { ApolloClient, InMemoryCache } from '@apollo/client';
const client = new ApolloClient({
link: yourLink,
cache: new InMemoryCache()
});第二步：创建 Provider
接下来，需要将 ApolloClient 实例传递给一个 React 上下文提供程序。这个提供程序将包裹整个应用程序并将 client 传递给所有使用 useQuery 和 useMutation hooks 的组件。
import { ApolloProvider } from '@apollo/client';
ReactDOM.render(
<ApolloProvider client={client}>
<App />
</ApolloProvider>,
document.getElementById('root')
);使用教程
查询
useQuery
使用 useQuery hook 可以轻松地将 GraphQL 查询与组件关联。
-- -------------------- ---- -------
------ - --------- --- - ---- -----------------
----- ---------- - ----
----- -
--------- -
--
----
-
-
--
-------- --------------- -
----- - -------- ------ ---- - - ---------------------
-- --------- ------ -------------
-- ------- ------ ------- ------------------
------ -
-----
------------------------ -- -
---- -------------------------------
---
------
--
-变异
useMutation
使用 useMutation hook 可以轻松地将 GraphQL 变异与组件关联。
-- -------------------- ---- -------
------ - ------------ --- - ---- -----------------
----- ------------- - ----
-------- ----------------------- ---------------- -
---------------------- ------- -
--
----
-
-
--
-------- --------------- -
----- ----------------- - ---- -- - ---------------------------
-------- --------------- -
-------------------
-----------------
---------- -
------ -
----- -----------
-
-
---
-
------ -
----- ------------------------
------- -------------------- ------------------
----- -- -------------------------------- ---------------
-------
--
-缓存
useCache
使用 useCache hook，可以轻松地获取 Apollo Client 中的缓存。
-- -------------------- ---- -------
------ - -------- - ---- -------------------
-------- --------------- -
----- ----- - -----------
----- ------------- - -----------------
------ ----------
---
------ ------------------- -- -------------------------------
-状态管理
useLocalState
使用 useLocalState hook，可以轻松地将状态存储在本地缓存中。
-- -------------------- ---- -------
------ - ------------- - ---- -------------------
-------- --------------- -
----- ------- --------- - ---------------------- ---
-------- ----------------- -
-------------- - ---
-
-------- ----------------- -
-------------- - ---
-
------ -
-----
------- ------------------------------------
-------
------- ------------------------------------
------
--
-总结
ps-apollo-client 是一个强大、易于使用的 React 状态管理库，它使得管理 GraphQL 数据变得容易。本文中我们介绍了如何安装和配置 ps-apollo-client，并讲解了查询、变异、缓存和状态管理。我们希望这篇文章对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005525a81e8991b448cfdf5