Apollo Hooks - useLazyQuery не использует параметр onCompleted, если передается по запросу

Question

У меня есть пользовательский крюк debounce для отложенных запросов apollo:

import {useLazyQuery} from '@apollo/react-hooks';
import debounce from "lodash/debounce";

export function useDebouncedQuery(schema) {
    const [doQuery, {...rest}] = useLazyQuery(schema);

    const query = React.useCallback(debounce(doQuery, 1000), []);

    return [query, {
        ...rest
    }]
}

Это работает, кроме onCompleted вариант. При реализации хука вот так:

const [doQuery] = useDebouncedQuery(query);
doQuery({
    onCompleted: data => {
        console.log(data);
    }
})

... onCompleted опция не срабатывает Но если я поменяю крючок на:

export function useAsyncSelectQuery(schema, options) {
    const [doQuery, {...rest}] = _useLazyQuery(schema, options);
    ...

.. и реализовать это так, это работает:

const [doQuery] = useDebouncedQuery(query, {
    onCompleted: data => {
        console.log(data);
    }
});

Почему это? Я делаю что-то неправильно? У меня есть отдельная логика, которая должна обрабатывать данные, передаваемые в onCompleted в разных местах, поэтому я не могу передать эту опцию, когда запрос инициализируется. Любая помощь очень ценится.

Answer 1

Итак, функция, возвращаемая ловушкой useLazyQuery, не имеет свойства onCompleted в параметре options, поэтому вы не можете ее использовать.

Согласно документам: https://www.apollographql.com/docs/react/api/react-hooks/, функция возвращает QueryLazyOptions, это параметры:

export interface QueryLazyOptions<TVariables> {
    variables?: TVariables;
    context?: Context;
}

Я думаю, что хорошим решением задачи, которую вы пытаетесь достичь, является использование ловушки useEffect, чтобы отслеживать изменения в данных свойств, возвращаемых ловушкой useDebouncedQuery, а затем обрабатывать данные так, как вы хотите.

Код ниже:

const [doQuery, { data, loading, error }] = useDebouncedQuery(
  QUERY
);

useEffect(() => {
  if (data && data.property && !loading) {
    // handle data here
  }
}, [data, loading]);

function handleQuery() {
  doQuery();
}

Надеюсь на эту помощь!

Answer 2

Вы не можете установить onCompletedкогда вы звоните, но вы можете, когда определяете useLazyQuery.

Так что это не сработает:

      const [doQuery] = useDebouncedQuery(query);
doQuery({
    onCompleted: data => {
        console.log(data);
    }
})

Но это будет работать:

      const [doQuery] = useDebouncedQuery(query, {
    onCompleted: data => {
        console.log(data);
    }
});
doQuery()

Answer 3

Пройти onCompleted функция при запуске useLazyQuery

const [doQuery] = useDebouncedQuery(query, {
    onCompleted: data => {
        console.log(data);
    }
});

doQuery()