Al intentar usar _.debounce(fn, wait); para invocar una llamada useLazyQuery(...) de apollo-client, rebota la consulta la primera vez y luego invoca la función de consulta, pero después de eso sigue invocando la consulta con cada cambio sin ningún rebote.
Sin embargo, si estoy usando una console.log(...) en lugar de la useLazyQuery(...) funcionaría perfectamente.
Funciona la primera vez, pero luego llama a la función de inmediato sin ningún rebote:
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>Funciona perfectamente cada vez:
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>Para este problema, ni siquiera necesita un estado; versión simplificada:
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 } })} /> ); }