Question

我正在使用来自Apollo的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，我一直处于这个无限循环中。仅在单击onClick时才调用Link（我通过在debugger中放入onClick来验证），因此这与{ {1}}钩子。

我通过更改为使用useLazyQuery组件来解决此问题，但我想了解为什么我会因使用钩子而进入这种状态。

有什么想法吗？

Answer 1

这是Apollo中的错误，他们在@ apollo / react-hooks v3.1.3中修复了它 See this

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

1 个答案: