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

【问题标题】：Why is my query called over and over using useLazyQuery? Apollo Hooks为什么使用 useLazyQuery 一遍又一遍地调用我的查询？阿波罗钩子
【发布时间】：2020-01-09 09:21:07
【问题描述】：

我正在使用来自 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 时被调用（我通过在onClick 中放置debugger 验证了这一点），所以这一定与useLazyQuery 挂钩。

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

有什么想法吗？

【问题讨论】：

标签： react-apollo react-apollo-hooks

【解决方案1】：

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

【讨论】：