9

我有一个用于 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不同位置的数据，因此在查询初始化时我无法传递该选项。任何帮助是极大的赞赏。

4

3 回答 3

5

因此，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();
}

希望这有帮助！

于 2019-09-05T16:41:21.543 回答
1

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

所以这不起作用：

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

但这会起作用：

const [doQuery] = useDebouncedQuery(query, {
    onCompleted: data => {
        console.log(data);
    }
});
doQuery()
于 2021-10-11T11:38:49.990 回答
-3

onCompleted初始化 useLazyQuery 时传递函数

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

doQuery()
于 2020-08-24T11:45:50.323 回答