Dispatching actions in Redux while using Apollo Client causes Apollo client to reset query

Question

I have a Component that is a TypeAhead. When the user enters the component page Apollo pulls an initial query of 5 players that is used for the typeahead. Ideally i would like to skip this initial query but thats another thing entirely. So the query is filled with 5 players. Player1 to Player5, When i start typing in the typeahead searching for Player10, I select Player10 and it dispatches an action to make it the currently selected Player. However after I trigger an onBlur or leave the box, Apollo dispatches a Redux action of APOLLO_QUERY_RESULT_CLIENT which sets all the typeAhead back to Player1 to Player5 my initial query instead of having it set correctly to Player10. How do you prevent that APOLLO_QUERY_RESULT_CLIENT from dispatching as it dispatches anytime i dispatch an action that i created myself.

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);

Whenever the name prop changes, the query will be run again. It is very likely that you reset the name just before the query is run again.

If this is not the case, you can know why the graphql container is refetching by debugging the networkStatus. You also need to add options: { notifyOnNetworkStatusChange: true }