Почему мой запрос снова и снова вызывается с помощью 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и я остаюсь в этом бесконечном цикле. ВonClick вызывается только тогда, когда Link нажата (я проверил это, поставив debugger в onClick), так что это должно быть связано с useLazyQuery крючок.

Я исправил это, изменив использование ApolloConsumer компонент, но я хочу понять, почему я попал в это состояние с помощью хука.

Есть идеи?

Answer 1

У меня была такая же проблема, но с useQueryловушка, и я не смог обновить библиотеку до последней версии, что вызовет некоторые побочные эффекты в моем проекте, поэтому я решил это таким образом, мой, пока я обновляю библиотеку.

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

Answer 2

Это была ошибка в Apollo, они исправили ее в @apollo/react-hooks v3.1.3См. Это