Apollo 似乎刷新了，当 state 映射到 props 时，我该如何防止呢？

Posted 2023-03-10

【中文标题】Apollo 似乎刷新了，当 state 映射到 props 时，我该如何防止呢？

【英文标题】：Apollo seems to refresh, when state is mapped to props, how can i prevent it?

【发布时间】：2018-01-20 18:19:35

【问题描述】：

我已经构建了一个组件，它基本上列出了表格中的条目，除此之外，我还有另一个可以应用过滤器的组件。这一切都与 Apollo 配合得非常好。

我正在尝试将深层链接添加到过滤器中，这在纸上看起来非常简单，而且我几乎已经开始工作了。

让我分享一些代码。

const mapStateToProps = ( activeObject ) => ( activeObject );

@withRouter
@connect(mapStateToProps, null)
@graphql(FILTER_REPORT_TASKS_QUERY, 
  name: 'filteredTasks',
  options: (ownProps) => 
    const filters = queryString.parse(location.search,  arrayFormat: 'string' );

    return 
      variables: 
        ...filters,
        id: ownProps.match.params.reportId,
      ,
    ;
  ,
)
export default class TasksPage extends Component 
  static propTypes = 
    filteredTasks: PropTypes.object.isRequired,
    activeObject: PropTypes.object.isRequired,
    match: PropTypes.object.isRequired,
  ;

  constructor(props) 
    super(props);

    const filters = queryString.parse(location.search,  arrayFormat: 'string' );
    this.state =  didSearch: false, initialFilters: filters ;
    this.applyFilter = this.applyFilter.bind(this);

  

  applyFilter(values) 
    const variables =  id: this.props.match.params.reportId ;
    variables.searchQuery = values.searchQuery === '' ? null : values.searchQuery;
    variables.categoryId = values.categoryId === '0' ? null : values.categoryId;
    variables.cardId = values.cardId === '0' ? null : values.cardId;

    /*
    this.props.history.push(
      pathname: `$ this.props.history.location.pathname `,
      search: '',
    ); 
    return null;
    */

    this.props.filteredTasks.refetch(variables);
    this.setState( didSearch: true );
  

  ..... Render functions.

Basically it calls the apply filter method, when a filter is chosen.

这一切都很好，我的问题是当 activeObject 更新时（通过选择列表中的条目）。它似乎在运行我的 HOC graphql，它将再次应用 URL 中的过滤器，忽略用户选择的过滤器。

我试图从 url 中删除查询字符串，一旦应用了过滤器，但我得到了一些意外的行为，基本上就像它不再获取一样。

我怎样才能阻止 Apollo 获取，仅仅因为 redux 推送新状态？

【参考方案1】：

我实际上是通过更改 HOC 的顺序来解决这个问题的。

@graphql(FILTER_REPORT_TASKS_QUERY, 
  name: 'filteredTasks',
  options: (ownProps) => 
    const filters = queryString.parse(location.search,  arrayFormat: 'string' );
    return 
      variables: 
        ...filters,
        id: ownProps.match.params.reportId,
      ,
    ;
  ,
)
@withRouter
@connect(mapStateToProps, null)