Отменить ответ на выбор - PullRequest
Новая
       6

Отменить ответ на выбор

1 голос
/ 11 января 2020

Я пытаюсь отменить запросы graphql, отправленные моим компонентом реагировать на выбор. Я использую wonka вместо rx js, но для 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 есть функция loadOptions, которая вызывает мой запрос на графике. 

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

My функция работает. Однако с debounce он ждет 5 сек и отправляет каждое изменение значения. (ie, если я наберу «рента», он будет искать «р», «ре», «рен» и «рента»). Я полагаю, что это происходит потому, что response-select неоднократно вызывает функцию loadOptions, создавая несколько запросов Graphql. Можно ли в любом случае разрешить loadOptions продолжать передачу новых значений в функцию GraphqlQueryAsync с опровержением (ie отправляет только поисковый термин "аренда")?

Ответы [ 2 ]

1 голос
/ 11 января 2020

Мне удалось решить с помощью функции обратного вызова 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 голос
/ 11 января 2020

Вот как можно отменить функцию с задержкой 1000 мс: 

let timerId = null

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

И в выбранном вами компоненте: 

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