React-select: Integration with Apollo

[alfonsoperez]

Hi!,

I am working integrating react-select with redux-form and apollo-client, so far the integration with redux-form is seamless, but my use case here being that when the user types something in the input, I will be grabbing data dynamically performing graphql calls through apollo. This leads me to two options.

• Make use of onInputChange and trigger a new query, and pass the new options as props. However when I do this, the current input value gets reseted

• Use Select.Async and the loadOptions props. However, how Apollo client works is that I trigger a new query and then I receive the new data when it's available via props, so there seems to be no easy solution to call the callback back with the new data, as I don't have access to the request itself, right?.

Any ideas how / if this could be accomplished?

[alfonsoperez]

This doesn't seem related to react-select, as the input is controlled by inputValue and the issue must be somewhere else. Sorry for the noise

[davidalekna]

Hi @alfonsoperez how did you solve it?

[alfonsoperez]

Hi @davidalekna, by the way, nice profile pic!.

This is a simplified version on how we do it, We have a SelectInput component of the likes of:

export default class SelectInput extends Component<
  SelectInputProps,
  SelectInputState,
> {
  constructor(props: SelectInputProps) {
    super(props);
    this.state = {
      inputValue: "",
    };
  }

  componentDidMount() {
    this.debouncedInputHandler = debounce(inputValue => {
      this.props.onInputChange(inputValue);
    }, 700);
  }

  onChange = (value: {}) => {
    if (this.props.input.onChange) {
      this.props.input.onChange(value);
    }
  };

  onInputChange = (inputValue: string) => {
    this.debouncedInputHandler(inputValue);
    this.setState({ inputValue });
  };

  render() {
    return (
      <Select
        {...this.props}
        autoFocus
        delimiter=","
        isLoading={this.props.isLoading}
        joinValues
        onBlur={this.onBlur}
        onChange={this.onChange}
        onInputChange={this.onInputChange}
        onMenuScrollToBottom={this.onMenuScrollToBottom}
        options={this.props.options}
        ref={ref => {
          this[this.props.refKey] = ref;
        }}
        style={this.props.style}
        value={this.props.input.value || this.props.defaultValue}
      />
    );
  }
}

And then we use redux-form and have something like:

<Field
            component={SelectInput}
            isLoading={this.props.APOLLO_DATA.loading}
            onInputChange={(inputValue: string) => {
              if (inputValue !== "") {
                this.props.setQueryVariables({
                  name: inputValue,
                });
              }
            }}
            onOptionsScrollToBottom={() => {
                this.props.setQueryVariables({
                       ....
                      // For instance set cursor as previous endCursor
                });
            }}
            options={this.props.APOLLO_DATA_HERE}
            setQueryVariables={this.props.setQueryVariables}
            withRef
          />

And this works nicely

[davidalekna]

Thanks a lot @alfonsoperez! I also use it with redux form so very useful to me :) was battling all day to find a solution and there you go, thanks!! :) 🥇

[Natansab]

Hey @alfonsoperez, how did you solve the Select.Async part with Apollo?
Thanks