1

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

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我通过将 a 放入 来验证debugger）onClick，所以这一定与useLazyQuery钩子有关。

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

有任何想法吗？

4

1 回答 1

0

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

于 2019-11-27T08:26:14.717 回答