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

Posted 2023-03-08

【中文标题】Lodash Debounce 和 Apollo Client 使用LazyQuery 去抖动一次

【英文标题】：Lodash Debounce and Apollo Client useLazyQuery debounces once

【发布时间】：2021-11-27 14:49:57

【问题描述】：

当尝试使用 _.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>

【参考方案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  )
        />
    );