在使用Apollo客戶端時在Redux中分派操作導致Apollo客戶端重置查詢

Question

我有一個TypeAhead組件。當用戶進入組件頁面時，Apollo會拉出一個用於打字的5個玩家的初始查詢。理想情況下，我想跳過這個初始查詢，但那完全是另一回事。所以查詢中有5名玩家。玩家1到玩家5，當我開始鍵入搜索玩家10的前進類型時，我選擇玩家10並且分派動作使其成爲當前選擇的玩家。但是，當我觸發一個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); 

每當名道具的變化，查詢將被再次運行。在查詢再次運行之前，很有可能重置該名稱。

如果不是這種情況，您可以通過調試networkStatus來知道爲什麼graphql容器正在重新獲取。您還需要添加options: { notifyOnNetworkStatusChange: true }