阿波罗客户端和键入提前

Question

目前我有一个apollo客户端有一个文本框，将通过打印格式填充自动完成。我正在使用react-autosuggest来填充建议。

在我的代码中，我有一个HOC，我也触发了一个重新读取并在文本框onChange上设置变量。

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

目前我有两个问题。当我输入信息时，更新的结果不会被提取，而是显示先前的预先结果。例如，如果我有一个字符串是'san'，并且我添加'sand'，它会显示'san'查询的结果。当我重新获取数据时，我无法等待数据的异步。基本上试图找出如何等待重新读取异步。或者这个的其他形式。也许是Obsservable/Watch Query。任何这方面的指导都会有很大的帮助。

function getSuggestionValue(suggestion) { 
    return suggestion.name; 
} 

function renderSuggestion(suggestion) { 
    return (
    <span>{suggestion.name}</span> 
); 
} 
class TypeAhead extends React.Component { 
    constructor() { 
    super(); 

    this.state = { 
     value: '', 
     suggestions: [], 
     isLoading: false 
    }; 
    } 

    componentWillReceiveProps() { 
    this.setState({ 
     suggestions: this.props.data.characters 
    }); 
    } 

    onChange = (event, { newValue }) => { 
    console.log(newValue); 
    //this.props.data.variables.name = newValue; 
    this.props.data.refetch({name: newValue}); 
    this.setState({ 
     value: newValue 
    }); 
    }; 

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

    onSuggestionsFetchRequested = ({ value }) => { 
    //this.props.data.refetch({}); 
    // this.setState({ 
    // suggestions: this.props.data.characters 
    // }); 
    // this.loadSuggestions(value); 
    }; 

    onSuggestionsClearRequested =() => { 
    this.setState({ 
     suggestions: [] 
    }); 
    }; 

    render() { 
    const { value, suggestions, isLoading } = this.state; 
    const inputProps = { 
     placeholder: "Type 'c'", 
     value, 
     onChange: this.onChange 
    }; 
    const status = (isLoading ? 'Loading...' : 'Type to load suggestions'); 

    return (
     <div> 
     <div className="status"> 
      <strong>Status:</strong> {status} 
     </div> 
     <Autosuggest 
      suggestions={suggestions} 
      onSuggestionsFetchRequested={this.onSuggestionsFetchRequested} 
      onSuggestionsClearRequested={this.onSuggestionsClearRequested} 
      getSuggestionValue={getSuggestionValue} 
      renderSuggestion={renderSuggestion} 
      shouldRenderSuggestions={this.shouldRenderSuggestions} 
      inputProps={inputProps} /> 
     </div> 
    ); 
    } 
} 

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

我遇到的主要问题是建议先前加载的建议列表。因为它不等待重新读取，并且在接收到新的一组数据时它不会更新状态。

Answer 1

如果您已经收到来自Apollo的道具建议，则不需要使用该组件的状态。我会改变你的初始状态：

this.state = { 
    value: '', 
    isLoading: false 
}; 

然后，你可以得到您的建议中呈现这样的：

const suggestions = this.props.characters || [] 

在文档寻找react-autosuggest，我也动重新​​读取调用到onSuggestionsFetchRequested 。我想象你应该也应该使用onChange，但是这涵盖了更多潜在的场景，我们希望再次获得这些建议。

onSuggestionsFetchRequested = ({ value }) => { 
    this.props.data.refetch({name: value}); 
};