文章/答案/技术大牛

发布

社区首页 >问答首页 >取消反弹react-select graphql查询

问取消反弹react-select graphql查询
EN

Stack Overflow用户

提问于 2020-01-11 12:40:23

回答 2查看 1.2K关注 0票数 1

我正在尝试去掉我的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函数并去掉(即只发送“租借”搜索词)？

javascript

reactjs

graphql

react-select

debouncing

回答 2

Stack Overflow用户

回答已采纳

发布于 2020-01-12 03:36:09

我能够使用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);
};

票数 1

Stack Overflow用户

发布于 2020-01-11 17:51:53

以下是如何在延迟为1000 ms的情况下解除函数的影响：

let timerId = null

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

在您的select组件中：

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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/59691690

复制

相似问题

问取消反弹react-select graphql查询
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问取消反弹react-select graphql查询EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问取消反弹react-select graphql查询
EN