Lodash Debounce 和 Apollo Client useLazyQuery debounce 一次

Question

当尝试调用_.debounce(fn, wait);apollo-client 调用useLazyQuery(...)时，它会第一次对查询进行反跳，然后调用查询函数，但此后它会在每次更改时继续调用查询，而不会发生任何反跳。

但是，如果我使用 aconsole.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 } })}
        />
    );
}