Graphql 使用apollo useLazyQuery防止多次重新蚀刻

预期行为

我有一个搜索输入，当用户键入一个单词时，我希望在使用appolo useLazyQuery重新提取数据之前等待1s。但是，如果在1s之前用户再次开始键入，则应重置计时器

所以我使用setTimeOut和clearTimeout，但是我注意到Appolo会为每个笔划发送一个请求

有没有一种方法可以防止多次重新蚀刻，并且仅在用户停止键入1s后发送请求

import React, { useState } from 'react'
import {   useLazyQuery } from '@apollo/react-hooks'
import {GET_BUSINESSES} from '../../../qraphQl/businessType'


const  SearchTool = () => {

    const [name, setName] = useState('')
    const [busSug, setBusSug] = useState({busSug:[], showBusSug: false})

    //  prevent sending many hhtp request

    const  [getBusiness , {  loading , data, error }] = useLazyQuery(GET_BUSINESSES)

    let typingWaitTimer = null

    const handleNameChange = (event) => {
        clearTimeout(typingWaitTimer)
        const val = event.target.value
        setName(()=> val)

        typingWaitTimer = setTimeout(() =>  getBusiness( {variables: { query: name }} ) , 1000) 

    }

---

您可以使用一个效果挂钩，使每个超时设置的最后一个都被清除/覆盖

看一下下面的代码段：您可以验证，当您停止键入整个1s时，它只会登录到控制台

从React导入React，{useffect，useState}； //嘲笑那些只是为了演示，但它 //应该使用真正的graphql钩子。感觉 //可以忽略这一部分 const GET_businesss=您的graphql文件； const useLazyQuery==>{ 返回[{variables:{query}}=>console.log`query:${query}`]； }; 常数延迟（单位：毫秒）=1000； 导出默认功能应用程序{ const[name，setName]=useState； //在这里省略{数据、错误、加载} //因为示例中没有使用它们 const[getBusiness]=使用LazyQueryGet_业务； //每当'name'改变时，这个钩子就会 //触发 useEffect=>{ const handler=setTimeout=>{ getBusiness{variables:{query:name}}； }，以毫秒为单位延迟； //这将确保超时不会发生 //如果再次调用该效果，则清除 返回=>{ clearTimeouthandler； }; }，[name，getBusiness]； const handleNameChange=事件=>{ setNameevent.target.value； }; 回来 } 顺便说一下，调用函数之前的这段短时间间隔的名称称为debounce。很好地解释了如何使用React钩子实现去Bounce，我的示例就是基于此