使用Apollo Client设置缓存交互方式，实现进入页面自动刷新

秒速五厘米 2022-03-16 09:26 471阅读 0赞

在前面的文章中描述了`cache`在`react native`中的作用。[React Native项目使用react-apollo实现更新缓存的两种方式][React Native_react-apollo]。在这篇文章中描述了使用`react-apollo`进行管理缓存的两种方式。  
**query和readQuery的区别**

query的数据查询来源有两个：
    1：服务器
    2：缓存
    readQuery的数据查询来源只有一个：
    1：缓存

例如在首次进入A页面时他是使用`react-apollo`的`Query`组件从服务器查询，等到第二次进入时他不会再次从服务器中获取数据，而是从`cache`中获取数据。  
但是在有些场景中，我们必须要实现一进入页面就自动刷新获取服务器中数据。因此必须设法**将query从cache中获取数据这个途径给切断，让他始终从服务器获取数据**。此时就可以实现一进入页面就会自动下拉刷新。  
官网中已经给出了相应的解决办法：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9Eb25nTGlhbmc_size_16_color_FFFFFF_t_70]  
**绕过缓存**：在特殊环境下，你可以根据特定的需要设置不一样的策略。  
针对`fetchPolicy`的描述下面有我在官网中找到的描述  
![在这里插入图片描述][20190302112704150.png]  
`fetchPolicy`是`Query`组件的属性之一，用于设置你的`Query`组件与`Apollo Cache`的交互方式，默认是`cache-first`。  
上面这个是从`react-apollo`中找到的，但是对于`fetchPolicy`的具体的描述是在`apollo-client`中的：  
![在这里插入图片描述][20190302113121574.png]  
默认情况下是`cache-first`。你可以手动设置为`network-only`，【根据具体的使用场景进行设置】。此时在每次进入同一个页面时，他都可以做到重新获取数据。  
实例：

return <Query query={ // query document }
          fetchPolicy= 'network-only'
          variables={ // 参数 } >
          { ({ loading, error, data }) => {
            return (
          // 渲染组件
            )
          }
          }
        </Query>

**帮助链接：**  
[Graphql中前段apollo请求过程中缓存的问题，选择性使用缓存][Graphql_apollo]  
[官方文档][Link 1]

[React Native_react-apollo]: https://blog.csdn.net/sun_DongLiang/article/details/87443918
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9Eb25nTGlhbmc_size_16_color_FFFFFF_t_70]: /images/20220316/f7d0381f406640caa74fc69af74e7aeb.png
[20190302112704150.png]: /images/20220316/712e45ce93164746a95c7514c5de1c8c.png
[20190302113121574.png]: /images/20220316/ddc88644a73343349754de86a75e2e74.png
[Graphql_apollo]: https://blog.csdn.net/qq_28929589/article/details/79430508
[Link 1]: https://www.apollographql.com/docs/react/advanced/caching.html