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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/sun_DongLiang/article/details/87970223

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

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

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

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

帮助链接:
Graphql中前段apollo请求过程中缓存的问题,选择性使用缓存
官方文档

猜你喜欢

转载自blog.csdn.net/sun_DongLiang/article/details/87970223