为什么我的查询使用useLazyQuery一遍又一遍地调用?阿波罗钩子

Question

我正在使用阿波罗的useLazyQuery钩子并进入无限循环。 这是我的组件：

import styled from 'styled-components'
import { useLazyQuery } from "@apollo/react-hooks"
import GENERATE_EFT_REFERENCE_NUMBER from "./graphql/generate-eft-reference-number.graphql"
let Link = styled.a`
color: ${props => props.theme.color.turquoise500};
cursor: pointer;
text-decoration: underline;
`

const GenerateEftReferenceLink = ({
externalAccountId,
financialMethodId,
internalAccountId,
highestReferenceNumber,
methodId,
updateMethod
}) => {
const [generateEftReference = {}, { called, loading, data }] = useLazyQuery(
GENERATE_EFT_REFERENCE_NUMBER,
{
variables: {
externalAccountId,
financialMethodId,
internalAccountId,
highestReferenceNumber
},
onCompleted: ({ generateEftReferenceNumber: reconciliationSerialNumber }) => {
updateMethod({ reconciliationSerialNumber }, methodId)
}
}
)
return <Link onClick={generateEftReference}>Click Me</Link>
}
export default GenerateEftReferenceLink

在onCompleted选项中，我获取结果并使用回调(updateMethod(来更新我的对象。

我遇到的问题是查询被一遍又一遍地调用。 我每次都按onCompleted，它召唤updateMethod，我停留在这个无限循环中。 仅当单击Link时才调用onClick(我通过在onClick中放置debugger来验证这一点(，因此这必须与useLazyQuery钩子有关。

我通过更改为使用ApolloConsumer组件来解决此问题，但我想了解为什么我在钩子上处于这种状态。

有什么想法吗？

Answer 1

这是阿波罗中的一个错误，他们在@apollo/react-hooks v3.1.3中修复了它。 看到这里

Answer 2

我遇到了同样的问题，但是useQuery钩子，并且我无法将库更新到最新版本，这将在我的项目中引起一些副作用，所以我以这种方式解决了它，我的同时更新了库。

onCompleted: useCallback(() => {//your code}