Downshift: Apollo with debounce example

[davidalekna]

Hi, thanks for an awesome library! I'm trying to figure out the correct way of throttling / debouncing the input for Apollo, would be awesome if someone could help to figure it out!

Cheers!

[donysukardi]

Hi @davidalekna, I extended the Apollo integration example with debounce feature - https://codesandbox.io/s/20x5plo070.

Basically what you need to do is to store the current query value as a separate state slice and apply debounce on the update (i leverage on onStateChange) and pass that value to Apollo instead.

Hope that helps!

[davidalekna]

Awesome @donysukardi, thanks a lot!

[Pau1fitz]

@donysukardi the sandbox is showing a 404 😞

@davidalekna you hardly still have an example have you?

[Manubi]

would need the same actually 🙏

[Pau1fitz]

So this should work for you @Manubi

This is what I understood from @donysukardi comment 😁

import { debounce } from 'lodash';

const SearchComponent = () => {
   const [value, setValue] = useState('');

   const updateValue = debounce(value => {
    setVal(value);
    }, 1000);

     return (
    <Downshift onInputValueChange={val => updateValue(val)}>
             // rest of code here. 
             // Use `value` from the hook as the value you pass 
             // as the value to Apollo instead of `InputValue`
        </Downshift>
   );
}

[donysukardi]

@Pau1fitz, something like that. However, you might want to consider persisting the debounced callback with useRef. Otherwise, whenever your component re-renders, you'd get a new instance of the function, which could possibly cause some unwanted side effects.

const [currValue, setCurrValue] = useState('');
const debounceSetCurrValue = useRef(null);
if (!debounceSetCurrValue.current) {
  debounceSetCurrValue.current = debounce(setCurrValue, 1000);
}

return (
  <Downshift onInputValueChange={debounceSetCurrValue.current}>
  </Downshift>
);