How to use the react-apollo.useLazyQuery function in react-apollo

const TelegramVerifyAttestation = ({
  identity,
  onComplete,
  onError,
  isMobile
}) => {
  const [loadStatus, { data, error }] = useLazyQuery(CheckTelegramStatusQuery, {
    variables: {
      identity,
      maxTries: 30
    },
    notifyOnNetworkStatusChange: true,
    fetchPolicy: 'network-only'
  })

  useEffect(() => {
    if (!isMobile) {
      loadStatus()
      return
    }

    // Note: Starting the poll after a few seconds of delay
    // This is because, on mobile, the query gets terminated when

// Warn of any unsaved changes before navigating away
      if (isDirty) {
        e.returnValue = unsavedAlertMessage;
        return unsavedAlertMessage;
      }
    },
    [isDirty]
  );

  useEffect(() => {
    // Add beforeunload listener to alert user of unsaved changes
    window.addEventListener('beforeunload', handleBeforeUnload);
    return () => window.removeEventListener('beforeunload', handleBeforeUnload);
  }, [handleBeforeUnload]);

  const [loadQuestion, questionQuery] = useLazyQuery(QUESTION_QUERY, { variables: { questionId } });

  const [addQuestionMutation] = useMutation(ADD_QUESTION_MUTATION);
  const [updateQuestionMutation] = useMutation(UPDATE_QUESTION_MUTATION);
  const [deleteQuestionMutation] = useMutation(DELETE_QUESTION_MUTATION);

  useEffect(() => {
    // Have overall loading state reflect query loading state
    setIsLoading(questionQuery.loading);
    // If the query loaded, set the question or an error
    if (!questionQuery.error && !questionQuery.loading && questionQuery.data) {
      if (questionQuery.data.question) {
        setQuestion(questionQuery.data.question);
        setIsExpanded(true);
      } else {
        setError('Error loading question: question not found');
      }

const CollectivePickerAsync = ({ types, limit, hostCollectiveIds, preload, filterResults, searchQuery, ...props }) => {
  const [searchCollectives, { loading, data }] = useLazyQuery(searchQuery);
  const [term, setTerm] = React.useState(null);
  const { formatMessage } = useIntl();
  const collectives = (data && data.search && data.search.collectives) || [];
  const filteredCollectives = filterResults ? filterResults(collectives) : collectives;
  const placeholder = getPlaceholder(formatMessage, types);

  // If preload is true, trigger a first query on mount or when one of the query param changes
  React.useEffect(() => {
    if (term || preload) {
      throttledSearch(searchCollectives, { term: term || '', types, limit, hostCollectiveIds });
    }
  }, [types, limit, hostCollectiveIds, term]);

  return (

devConfig.menuLoader().then(setMenu);
      }
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []); // Make sure to run this effect only once, otherwise we might end up in an infinite loop!

  // Prepare to fetch config.
  // We set up the apollo query as lazy, in order to execute it conditionally
  // since hooks cannot be defined conditionally.
  const mcProxyApiUrl = useApplicationContext(
    context => context.environment.mcProxyApiUrl
  );
  const [
    loadMenuData,
    { called: hasApplicationsMenuQueryBeenCalled, data: menuQueryResult },
  ] = useLazyQuery(FetchApplicationsMenu, {
    ...shallowlyMergedConfig.queryOptions,
    fetchPolicy:
      shallowlyMergedConfig.queryOptions.fetchPolicy || 'cache-first',
    context: {
      // Allow to overwrite the API url from `env.json`
      uri: `${mcProxyApiUrl || defaultApiUrl}/api/graphql`,
    },
  });

  // Return the local config
  if (shallowlyMergedConfig.skipRemoteQuery) {
    const devConfig = getDevConfig(shallowlyMergedConfig.options);
    const fakeGraphqlResponse = menu
      ? {
          [devConfig.menuKey]: Array.isArray(menu) ? menu : [menu],
        }

allowedIps: Yup.array()
        .of(
          Yup.string().test(
            'allowedIps',
            'Allowed IPs must contain only valid IP ranges in CIDR notation',
            value => validator.isIPRange(value)
          )
        )
        .nullable(),
      persistentKeepalive: Yup.number()
        .positive()
        .nullable(),
    }),
  })

  const [getLink, getLinkQuery] = useLazyQuery(GET_LINK, {
    variables: { id: urlParams.linkId },
    fetchPolicy: 'cache-and-network',
    onCompleted: data => {
      formik.setValues(
        {
          fromInterfaceId: data.result.fromInterfaceId,
          toInterfaceId: data.result.toInterfaceId,
          allowedIps: data.result.allowedIps,
          persistentKeepalive: data.result.persistentKeepalive,
        },
        true
      )
    },
    onError: () => {
      toast.error('Error fetching link details')
      navigate(-1)

.nullable(),
      persistentKeepalive: Yup.number()
        .positive()
        .nullable(),
    }),
  })

  const [getSourceInterfaces, getSourceInterfacesQuery] = useLazyQuery(GET_INTERFACES, {
    variables: { hostId },
  })

  const [getTargetNetworks, getTargetNetworksQuery] = useLazyQuery(GET_NETWORKS)

  const [getTargetHosts, getTargetHostsQuery] = useLazyQuery(GET_HOSTS)

  const [getTargetInterfaces, getTargetInterfacesQuery] = useLazyQuery(GET_INTERFACES, {
    variables: { hostId },
  })

  const [createLink, createLinkMutation] = useMutation(CREATE_LINK, {
    onCompleted: () => {
      toast.success('Link created')
      navigate(`/ui/hosts/${hostId}/links`)
    },
    onError: () => {
      toast.error('Error creating link')
    },
  })

  useEffect(() => {
    window.scrollTo(0, 0)

)
        )
        .nullable(),
      persistentKeepalive: Yup.number()
        .positive()
        .nullable(),
    }),
  })

  const [getSourceInterfaces, getSourceInterfacesQuery] = useLazyQuery(GET_INTERFACES, {
    variables: { hostId },
  })

  const [getTargetNetworks, getTargetNetworksQuery] = useLazyQuery(GET_NETWORKS)

  const [getTargetHosts, getTargetHostsQuery] = useLazyQuery(GET_HOSTS)

  const [getTargetInterfaces, getTargetInterfacesQuery] = useLazyQuery(GET_INTERFACES, {
    variables: { hostId },
  })

  const [createLink, createLinkMutation] = useMutation(CREATE_LINK, {
    onCompleted: () => {
      toast.success('Link created')
      navigate(`/ui/hosts/${hostId}/links`)
    },
    onError: () => {
      toast.error('Error creating link')
    },
  })

  useEffect(() => {

'Allowed IPs must contain only valid IP ranges in CIDR notation',
            value => validator.isIPRange(value)
          )
        )
        .nullable(),
      persistentKeepalive: Yup.number()
        .positive()
        .nullable(),
    }),
  })

  const [getSourceInterfaces, getSourceInterfacesQuery] = useLazyQuery(GET_INTERFACES, {
    variables: { hostId },
  })

  const [getTargetNetworks, getTargetNetworksQuery] = useLazyQuery(GET_NETWORKS)

  const [getTargetHosts, getTargetHostsQuery] = useLazyQuery(GET_HOSTS)

  const [getTargetInterfaces, getTargetInterfacesQuery] = useLazyQuery(GET_INTERFACES, {
    variables: { hostId },
  })

  const [createLink, createLinkMutation] = useMutation(CREATE_LINK, {
    onCompleted: () => {
      toast.success('Link created')
      navigate(`/ui/hosts/${hostId}/links`)
    },
    onError: () => {
      toast.error('Error creating link')
    },
  })