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

【问题标题】：Apollo seems to refresh, when state is mapped to props, how can i prevent it?Apollo 似乎刷新了，当 state 映射到 props 时，我该如何防止呢？
【发布时间】：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 推送新状态？

【问题讨论】：

标签： reactjs react-redux apollo

【解决方案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)

【讨论】：