When trying to use _.debounce(fn, wait); to invoke an apollo-client useLazyQuery(...) call it debounces the query the first time and then invokes the query function, but after that it keeps invoking the query with every change without any debouncing.

However, if I'm using a console.log(...) instead of the useLazyQuery(...) call it would work perfectly.

Works the first time but then calls the function immediately without any debouncing:

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>

Works perfectly every time:

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>

When trying to use _.debounce(fn, wait); to invoke an apollo-client useLazyQuery(...) call it debounces the query the first time and then invokes the query function, but after that it keeps invoking the query with every change without any debouncing.

However, if I'm using a console.log(...) instead of the useLazyQuery(...) call it would work perfectly.

Works the first time but then calls the function immediately without any debouncing:

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>

Works perfectly every time:

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>

• javascript
• reactjs
• graphql
• lodash
• apollo

2 Answers 2

For this problem, you don't even need a state; simplified versrion:

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

I created a custom hook for debouncing any apollo client queries hook:

import { OperationVariables, QueryHookOptions, QueryResult } from '@apollo/client'
import { debounce } from 'lodash/fp'
import { useEffect, useState } from 'react'

export const useDebouncedQuery = <TData = any, TVariables extends OperationVariables = OperationVariables>(
  useQueryFn: (options: QueryHookOptions<TData, TVariables>) => QueryResult<TData, TVariables>,
  options: QueryHookOptions<TData, TVariables>,
  delay = 500
): QueryResult<TData, TVariables> => {
  const [debouncedVariables, setDebouncedVariables] = useState<TVariables | undefined>(options.variables)
  const [currentVariables, setCurrentVariables] = useState<TVariables | undefined>(options.variables)

  const debouncedSetVariables = debounce(delay, (variables: TVariables | undefined) => {
    setCurrentVariables(variables)
  })

  useEffect(() => {
    setDebouncedVariables(options.variables)
    debouncedSetVariables(options.variables)
  }, [options.variables])

  return useQueryFn({
    ...options,
    variables: currentVariables || debouncedVariables,
    skip: JSON.stringify(currentVariables) !== JSON.stringify(debouncedVariables)
  })
}

Used like this:

const { data, loading } = useDebouncedQuery(useMyQuery, {
    variables: {
      ... my variables
    }
  })

In the poster's specific case, the onChange event should change 'my variables' in order to run the query (in bination with the skip option, lazy query is useless)