Question

我有一个自定义的反跳钩，用于处理阿波罗惰性查询：

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挂钩返回的属性数据中的更改，然后根据需要处理数据。

以下代码：

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

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

function handleQuery() {
  doQuery();
}

希望获得帮助！

Answer 2

在初始化useLazyQuery时传递onCompleted函数

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

doQuery()

Apollo挂钩-如果在查询中传递，useLazyQuery不使用onCompleted选项

2 个答案: