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

Question

我有一个用于 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 挂钩返回的函数的 options 参数没有 onCompleted 属性，因此您无法使用它。

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

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

我认为解决您要实现的任务的一个好方法是使用 useEffect 挂钩，监视 useDebouncedQuery 挂钩返回的属性数据的更改，然后根据需要处理数据。

代码如下：

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

希望这有帮助！