apollo-client - Apollo Hooks - 如果传递查询，useLazyQuery 不使用 onCompleted 选项

Question

我有一个用于 apollo 惰性查询的自定义去抖钩子(Hook):

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 之外，此方法有效选项。像这样实现钩子(Hook)时:

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

... onCompleted选项不会触发。但是，如果我将钩子(Hook)更改为:

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

..并像这样实现它，它可以工作:

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

为什么是这样？难道我做错了什么？我有单独的逻辑需要处理传递给 onCompleted 的数据在不同的地方，所以当查询被初始化时我不能通过那个选项。任何帮助是极大的赞赏。

Answer 1

因此，useLazyQuery 钩子(Hook)返回的函数在 options 参数上没有 onCompleted 属性，因此您不能使用它。

根据文档:https://www.apollographql.com/docs/react/api/react-hooks/#result-1 ，该函数返回一个 QueryLazyOptions，这些是参数:

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

我认为您要完成的任务的一个很好的解决方案是使用 useEffect Hook ，观察 useDebouncedQuery Hook 返回的属性数据的变化，然后根据需要处理数据。

下面的代码:

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

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

function handleQuery() {
  doQuery();
}

希望这有帮助!