Debounce react-select graphql 查询

Question

我正在尝试消除由我的 react-select 组件发送的 graphql 查询。我正在使用 wonka 而不是 rxjs，但是没有 wonka 的标签。

const GraphqlQueryAsync = (query, outputFn) => (value) => {
  console.log({ value });
  return pipe(
    fromValue(value),
    // debounce(() => 5000),
    mergeMap((input) => client.executeQuery(createRequest(query, { input }))),
    map(outputFn),
    take(1),
    toPromise,
  );
};

React-select 有一个调用我的 graphql 查询的 loadOptions 函数。

             <AsyncSelect
              defaultValue={value}
              styles={selectStyles(error)}
              placeholder={title}
              onChange={onChangeSelect(onChange, name, lefts)}
              defaultOptions
              loadOptions={GraphqlQueryAsync(query, outputFn)}
            />

我的功能有效。但是对于 debounce，它会等待 5 秒并且仍然会发送每个值更改。（即，如果我键入 "rent"，它会搜索 "r"、"re"、"ren" 和 "rent"）。我相信这是因为 react-select 重复调用 loadOptions 函数，创建多个 Graphql 查询。无论如何，是否允许 loadOptions 继续将新值传递给带有去抖动的 GraphqlQueryAsync 函数（即仅发送 "rent" 搜索词）？

Answer 1

以下是如何使用 1000 毫秒的延迟对函数进行去抖：

let timerId = null

const loadOptionsDebounced = (query, outputFn) => {
    clearTimeout(timerId)
    timerId = setTimeout(() => {
        GraphqlQueryAsync(query, outputFn)
    }, 1000)
}

并且在您的 select 组件中：

<AsyncSelect
    loadOptions={loadOptionsDebounced(query, outputFn)}
</AsyncSelect>

Answer 2

我能够使用 loadOptions 的回调功能解决。

let _GraphqlQueryDebounce;
const GraphqlQueryAsync = (query, outputFn) => (value, callback) => {
  console.log({ value });
  if(_GraphqlQueryDebounce) clearTimeout(_GraphqlQueryDebounce);
  _GraphqlQueryDebounce = setTimeout(async () => callback(
    await pipe(
      fromValue(value),
      mergeMap((input) => client.executeQuery(createRequest(query, { input }))),
      map(outputFn),
      take(1),
      toPromise,
    )
  ), 5000);
};

Debounce react-select graphql 查询

Debounce react-select graphql query

javascript

reactjs

graphql

react-select

debouncing