Apollo Clientを使用中にReduxでアクションをディスパッチすると、Apolloクライアントはクエリをリセットします。

Question

私はTypeAheadであるコンポーネントを持っています。ユーザーがコンポーネントページを入力すると、Apolloは先行検索に使用された5人のプレイヤーの初期クエリを取得します。理想的には、私はこの最初のクエリをスキップしたいが、それは全く別のことだ。したがって、クエリは5人のプレイヤーで満たされます。 Player1からPlayer5、Player10を検索する先行入力を開始すると、Player10が選択され、現在選択されているPlayerになるようにアクションが送出されます。しかし、私がonBlurを起動したりボックスを離したりすると、ApolloはAPOLLO_QUERY_RESULT_CLIENTのReduxアクションを送出し、typeAheadをPlayer10に正しく設定するのではなく、Player1からPlayer5の最初のクエリに戻します。自分が作成したアクションをディスパッチするたびに、どのように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 }