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

【问题标题】：Apollo Hooks - useLazyQuery not using onCompleted option if passed on queryApollo Hooks - 如果传递查询，useLazyQuery 不使用 onCompleted 选项
【发布时间】：2019-12-17 10:46:33
【问题描述】：

我有一个用于 apollo 惰性查询的自定义 debounce 钩子：

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 的数据，因此在初始化查询时我无法传递该选项。非常感谢任何帮助。

【问题讨论】：

标签： apollo-client react-apollo-hooks

【解决方案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 挂钩返回的属性数据的变化，然后根据需要处理数据。

代码如下：

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

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

function handleQuery() {
  doQuery();
}

希望对您有所帮助！

【讨论】：

【解决方案2】：

当你调用useLazyQuery时你不能设置onCompleted，但是当你定义 useLazyQuery时你可以。

所以这行不通：

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

但这会工作：

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

【讨论】：

【解决方案3】：

在初始化 useLazyQuery 时传递 onCompleted 函数

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

doQuery()

【讨论】：

onCompleted 不存在于useLazyQuery