Apollo 客户端 fetchPolicy 问题 - 查询调用了两次

Posted 2023-03-10

【中文标题】Apollo 客户端 fetchPolicy 问题 - 查询调用了两次

【英文标题】：Apollo client fetchPolicy issues - query called twice

【发布时间】：2021-03-20 18:21:03

【问题描述】：

我正在使用 @apollo/client 3.2.0 和 react。我有一个使用 useQuery 挂钩检索数据的组件。该查询类似于以下查询：

query getChartData($year: Int!, $type: String!) 
  first_series_data(kpi: "SOME_KPI", year: $year, orderBy: "week", type: $type) 
    edges 
      node 
        value
        week
      
    
  
  second_series_data(kpi: "SOME_KPI", year: $year, type: $type) 
    edges 
      node 
        date
        value
      
    
  

正如您在查询中看到的，我有两个变量：year 和 type。两者都在组件中作为 props 传递，并且该组件在同一个视图中呈现两次，使用不同类型的 props。

问题与 fetchPolicy 选项有关。如果我使用cache-and-network 或network-only 获取策略之一，则会调用其中一个查询两次。当我使用no-cache 时不会发生这种情况。所以我认为这是一个缓存冲突，因为查询是相似的，但我不确定，我不知道如何解决这个问题。

你有什么想法吗？

【问题讨论】：

您找到解决方案了吗？我也有同样的问题...

不，我不得不改变我的观点和查询以避免这种情况，但它有时仍然会发生。我也打开了这张相关的票，也许那里的东西可以帮助你：github.com/apollographql/apollo-client/issues/7436

【参考方案1】：

此问题已在 3.4 中“修复”：https://github.com/apollographql/apollo-client/issues/7436

enter image description here