javascript - Lodash Debounce 和 Apollo Client 使用LazyQuery 去抖动一次

Question

尝试使用 _.debounce(fn, wait); 时调用 apollo 客户端 useLazyQuery(...)调用它第一次去抖动查询，然后调用查询函数，但之后它会在每次更改时继续调用查询而没有任何去抖动。
但是，如果我使用 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>

Answer 1

对于这个问题，你甚至不需要状态；简化版:

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 } })}
        />
    );
}