Apollo 客户端并提前输入

Question

目前我有一个 apollo 客户端，它有一个文本框，可以通过预输入格式填充自动完成。我正在使用 react-autosuggest 来填充建议。

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

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

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

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 收到作为 props 的建议，则无需使用组件的状态。我会将您的初始状态更改为：

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

然后你可以像这样在渲染中得到你的建议：

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

查看 react-autosuggest 的文档，我也会将 refetch 调用移至 onSuggestionsFetchRequested。我想像您一样利用 onChange 也应该可行，但这涵盖了更多我们希望再次获得建议的潜在场景。

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

Apollo 客户端并提前输入

Apollo client and type ahead

reactjs

autosuggest

react-apollo