Question

我有一个TypeAhead组件。当用户进入组件页面时，Apollo会拉出5个用于预先输入的玩家的初始查询。理想情况下，我想跳过这个初始查询但完全是另一回事。所以查询充满了5名玩家。 Player1到Player5，当我开始输入搜索Player10的预先输入时，我选择Player10并调度一个动作使其成为当前选择的Player。然而，在我触发onBlur或离开框后，Apollo会调度APOLLO_QUERY_RESULT_CLIENT的Redux操作，该操作将所有typeAhead设置回Player1到Player5我的初始查询，而不是将其正确设置为Player10。你如何防止APOLLO_QUERY_RESULT_CLIENT调度，因为它在我调度我自己创建的动作时调度。

class TypeAhead extends Component {
  constructor() {
    super();

    this.state = {
      value: ''
    };
  }

  renderInputComponent = (inputProps) => {
    let {selectedSuggestion} = this.props;
    return (
      <div className="inputContainer">
        <img className="type-ahead__image" alt="" src={getImageURL(selectedSuggestion.id)} />
        <TextField floatingLabelText="Search Player" {...inputProps} />
      </div>
    )
  }

  onChange = (event, { newValue }) => {
    this.setState({
      value: newValue
    });
  };

  shouldRenderSuggestions(value) {
    return value.trim().length > MIN_SEARCH_LENGTH;
  }

  onSuggestionsFetchRequested = ({ value }) => {
    // debugger;
    if(/^[a-z .,-]+$/i.test(value)) {
      this.props.data.refetch({name: value});
    }
  };

  onSuggestionsClearRequested = () => {
    // debugger;
    // this.setState({
    //   suggestions: []
    // });
    // this.props.data.Players = [];
  };

  onBlur = () => {
    if (this.state.value.toLowerCase() === this.props.data.Players[0].name.toLowerCase()) {
      let suggestion = this.props.data.Players[0];
      this.props.onSuggestionSelected(null, { suggestion });
    } 
  }

  render() {
    console.log(this.props.data.Players)
    let suggestions = this.props.data.Players || [];
    let { onSuggestionSelected } = this.props;
    let { value } = this.state;
    let inputProps = {
      value,
      onChange: this.onChange,
      onBlur: this.onBlur
    };

    return (
      <div>
        <Autosuggest
          suggestions={suggestions}
          onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
          onSuggestionsClearRequested={this.onSuggestionsClearRequested}
          getSuggestionValue={getSuggestionValue}
          renderSuggestion={renderSuggestion}
          shouldRenderSuggestions={this.shouldRenderSuggestions}
          onSuggestionSelected={onSuggestionSelected}
          renderInputComponent={this.renderInputComponent}
          inputProps={inputProps} 
          />
      </div>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    selectedSuggestion: state.selectedSuggestion
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    onSuggestionSelected(event, {suggestion}) {
      dispatch(actions.selectSuggestion(suggestion));
      // dispatching action causes apollo to requery and pull inital query causing issues.
    },
    onSuggestionUnselected() {
      dispatch(actions.unselectSuggestion());
    }
  }
}

const TypeAheadWithData = graphql(TypeAheadQuery, {
  options: ({ name }) => ({ variables: { name } })
})(TypeAhead);
const TypeAheadWithDataAndState = connect(mapStateToProps, mapDispatchToProps)(TypeAheadWithData);
export default TypeAheadWithDataAndState;

Answer 1

const TypeAheadWithData = graphql(TypeAheadQuery, {
  options: ({ name }) => ({ variables: { name } })
})(TypeAhead);

每当名称prop更改时，查询将再次运行。您很可能在重新运行查询之前重置名称。

如果不是这种情况，您可以通过调试networkStatus来了解graphql容器为什么要重新获取。您还需要添加options: { notifyOnNetworkStatusChange: true }

使用Apollo Client在Redux中调度操作会导致Apollo客户端重置查询

1 个答案: