Apollo boost 触发器在组件之外重新获取

Posted 2023-03-08

【中文标题】Apollo boost 触发器在组件之外重新获取

【英文标题】：Apollo boost trigger refetch outside of component

【发布时间】：2018-08-31 22:23:40

【问题描述】：

我在 React (web) 中使用 Apollo 的新 apollo-boost，我想知道两件事：a) 为什么 Apollo 不自动重新获取变量更改的数据和 b) 如何在外部调用 refetch Query 组件？

在我的特定用例中，我需要从父组件的状态传递某些过滤器。考虑以下代码：

class GalleryPage extends Component 
  constructor () 
    super();
    this.state = 
      filters:           
        brands:    [1, 3],
        filetypes: [4, 5, 6],
      ,
    ;
  

  render() 
    return (
      <div>
        <Query query=FilesQuery variables=this.state.filters>
          result => (result.networkStatus === 7 ? result.data.files.map(file => <div>file.name</div>) : '')
        </Query>
      </div>
    );
  

当this.state.filters 更改时，我希望 Apollo 重新获取数据。但由于这不起作用，我正在尝试致电refetch。我可以通过从数据中解构它并调用它来调用refetch：<button type="button" onClick=() => refetch()>Refetch</button>。显然，这在组件之外是行不通的。而且我不知道如何在组件之外调用它。我觉得事件系统在这里可能会有所帮助，但我不确定这是否是正确的方法。

提前致谢！

【参考方案1】：

示例代码中的问题似乎是嵌套对象似乎不会触发重新获取。所以，为了触发重新获取，我所做的是改变状态的组织：

// Instead of
this.state = 
  filters: 
    brands: [1, 3],
    filetypes: [4, 5, 6],
  


// I'm now doing
this.state =  
  filteredBrands: [1, 3],
  filteredFiletypes: [4, 5, 6]