Блог

При попытке использовать _.debounce(fn, wait); для вызова вызова apollo-клиента useLazyQuery(...) он отменяет запрос в первый раз, а затем вызывает функцию запроса, но после этого он продолжает вызывать запрос с каждым изменением без какой-либо отмены.

Однако, если я использую a console.log(...) вместо useLazyQuery(...) вызова, это будет работать идеально.

Работает в первый раз, но затем немедленно вызывает функцию без какой-либо отмены:

 const [value, setValue] = useState('');

const [search, { loading, data }] = useLazyQuery(SEARCH_QUERY, { variables: { searchString: value } });

const debouncer = React.useCallback(_.debounce(search, 1500), []);

...
<call to debouncer() with onChange event>
 

Работает идеально каждый раз:

 const [value, setValue] = useState('');

const [search, { loading, data }] = useLazyQuery(SEARCH_QUERY, { variables: { searchString: value } });

const debouncer = React.useCallback(_.debounce(val => (console.log(val)), 1500), []);

...
<call to debouncer() with onChange event>
 

Для этой проблемы вам даже не нужно состояние; упрощенный версрион:

 import { useCallback } from 'react';
import { useLazyQuery } from '@apollo/client';
import _ from 'lodash';

function App() {
    const [search, { loading, data }] = useLazyQuery(SEARCH_QUERY);

    const debouncer = useCallback(_.debounce(search, 1000), []);

    return (
        <input
            type='text'
            onChange={e => debouncer({ variables: { code: e.target.value } })}
        />
    );
}