闪烁着阿波罗查询答案

【问题标题】：Flickering with Apollo Queries闪烁着阿波罗查询
【发布时间】：2019-02-10 16:20:16
【问题描述】：

我们在我们的电子商务网站中广泛使用 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 客户端的预期行为。它将数据缓存在 id 和 typename 下，因此如果您更改查询变量中的 id，apollo 将不会在缓存中找到它。我觉得在数据从查询中返回之前，在这里使用加载状态可能是合适的。如果数据已经在缓存中但在不同的 key 或 id 下，您可以考虑使用cache redirects。

标签： reactjs react-apollo

【解决方案1】：

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，但如果数据被缓存，则立即看到数据 - 不会闪烁。

【讨论】：