reactjs - 闪烁着阿波罗查询
问题描述
我们在我们的电子商务网站中广泛使用 Apollo GraphQl,当路线更改时,我遇到了一些不必要的闪烁问题。
我的ProductTypeFilter
组件被包裹在一个Router
和Query
组件中。使用来自路由的Query
信息作为其变量,在本例中为productTypeId
.
export const ProductTypeFilterContainer = () => (
<Router>
{({ query: { productTypeId } }) => (
<Query query={GET_PRODUCT_FILTERS} variables={{ productTypeId }}>
{({ error, loading, data: { productFilters } }) => {
if (loading || error) {
return null
}
return <ProductTypeFilter productFilters={productFilters} />
}}
</Query>
)}
</Router>
)
null
呈现很短的时间,当数据到达时ProductTypeFilter
呈现。这按预期工作。
但是,当用户导航到不同的产品类型时,ProductTypeFilter
将被卸载,然后使用新数据重新安装。只要查询加载,null
就会呈现这确实会引入不需要的“闪烁”。
这只发生在用户第一次访问一个产品类型时,当它是第二次 Apollo 缓存找到和的相同组合query
并立即variables
呈现时ProductTypeFilter
。
我不能使用state
,因为setState
在渲染函数中不允许调用。唯一可行的方法是引入一个全局变量,用于在新数据到达时进行渲染和更新:
let previousFilters = undefined
...
if (!error && previousFilters && !productFilters) {
productFilters = previousFilters
}
if (error || productFilters) {
return null
}
previousFilters = productFilters
return <ProductTypeFilter productFilters={productFilters} />
有没有更好的,不会让我起鸡皮疙瘩?
解决方案
Apollo 将重新获取您的查询,将 loading 设置为 true 并在每次安装该组件时返回 null。
尽管(如果您有 Apollo 缓存设置)它已经将数据存储在缓存中,但它仍会执行此操作。
我建议像下面的伪代码一样重新排序您的代码:
// it's a good idea to let your users know if something goes wrong
if(error) return ErrorMessage
// note it's before loading
if(data) return ProductTypeFilter
// it's a good idea to let your users know there is some activity
if(loading) return LoadingIndicator
这样,您将在第一次加载时看到加载指示器或 null,但如果数据被缓存,则立即看到数据 - 没有闪烁。
推荐阅读
- php - 如何通过 Post 方法发送 $get 而不将其包含在隐藏的输入中
- java - OAuth2 和 OAuth3 的区别?
- c# - 如何在 Unity 的另一个场景中访问游戏对象
- reactjs - 如何将用户重定向到其组织的网页
- javascript - 将 GET 结果保存在文本文件中会导致无限循环
- compiler-errors - 无法在 SWI prolog (Windows) 中运行我的代码
- sql-server - 在 SQL Server 2012 中启用“已提交的读取快照”是否需要重新映射我们的数据库表
- python-2.7 - Python2.7 - 使用 Python 向 https://www.aconvert.com/pdf/ 发出 GET 和 POST 请求
- file - Dropbox Online Only 文件重新下载
- visual-c++ - VC++,互斥体,但重复执行