@apollo/react-hooks ，如何先查询缓存？

Question

我正在寻找一种方便的方法来设置我的 apollo 挂钩以首先查询缓存，如果缓存为空，则进行端点调用。

我似乎找不到正确的文档，我只找到了如何查询缓存并进行正常查询。

Answer 1

Apollo 客户端允许您为使用useQuery 进行的单个查询指定fetchPolicy。可能的值include:

• cache-first：这是默认值，我们总是首先尝试从您的缓存中读取数据。如果完成查询所需的所有数据都在缓存中，则将返回该数据。如果缓存的结果不可用，Apollo 只会从网络中获取。此获取策略旨在最大限度地减少渲染组件时发送的网络请求数。
• cache-and-network：此获取策略将让 Apollo 首先尝试从您的缓存中读取数据。如果完成查询所需的所有数据都在缓存中，则将返回该数据。但是，无论完整数据是否在您的缓存中，此 fetchPolicy 将始终使用网络接口执行查询，这与 cache-first 不同，后者仅在查询数据不在您的缓存中时才会执行您的查询。此获取策略优化了用户获得快速响应，同时还尝试以额外的网络请求为代价使缓存数据与您的服务器数据保持一致。
• 仅限网络：此获取策略永远不会从缓存中返回初始数据。相反，它将始终使用您的网络接口向服务器发出请求。此获取策略优化了与服务器的数据一致性，但代价是在可用时立即响应用户。
• 仅缓存：此获取策略永远不会使用您的网络接口执行查询。相反，它总是会尝试从缓存中读取。如果缓存中不存在查询的数据，则会引发错误。此获取策略允许您仅与本地客户端缓存中的数据进行交互，而无需发出任何网络请求，从而使您的组件保持快速，但这意味着您的本地数据可能与服务器上的数据不一致。如果您只想与 Apollo 客户端缓存中的数据进行交互，请务必查看 ApolloClient 实例上可用的 readQuery() 和 readFragment() 方法。
• no-cache：此获取策略永远不会从缓存中返回您的初始数据。相反，它将始终使用您的网络接口向服务器发出请求。与仅网络策略不同，它也不会在查询完成后将任何数据写入缓存。

由于cache-first 是默认值，因此您无需对钩子进行任何其他操作即可获得所需的行为。