javascript - Lodash Debounce and Apollo Client useLazyQuery debounces once - Stack Overflow

admin管理员组

文章数量:1352124

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

Share Improve this question Follow asked Oct 7, 2021 at 13:49 ErdnaErdna 15722 silver badges77 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

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)

本文标签： javascriptLodash Debounce and Apollo Client useLazyQuery debounces onceStack Overflow