How to use the @apollo/client.useQuery function in @apollo/client

export function useGetMessagesQuery(baseOptions?: ApolloReactHooks.QueryHookOptions) {
  return ApolloReactHooks.useQuery(Operations.GetMessages, baseOptions);
}
export function useGetMessagesLazyQuery(baseOptions?: ApolloReactHooks.LazyQueryHookOptions) {

const ClientsListView = () => {
  const location = useLocation()

  const [searchFilter, setSearchFilter] = useState('')
  const getNodesQuery = useQuery(GET_NODES, {
    variables: {},
  })

  useEffect(() => {
    window.scrollTo(0, 0)
    getNodesQuery.refetch()
  }, [location])

  const handleClientCardClick = (id) => {
    navigate(`/ui/clients/${id}`)
  }

  const nodes = getNodesQuery.data ? getNodesQuery.data.result : []

  const isError = getNodesQuery.error
  const isLoading = getNodesQuery.loading

function LogDetail({ requestId: id }: Props): JSX.Element {
  const { loading, error, data } = useQuery(HTTP_REQUEST_LOG, {
    variables: { id },
  });

  if (loading) {
    return ;
  }
  if (error) {
    return (
      
        Error fetching logs details: {error.message}
      
    );
  }

  if (!data.httpRequestLog) {
    return (

export function useFetchVehicleGraphLocationOnlyObjectsQuery( options: Omit, 'query'> ) {
          const query = useQuery(FetchVehicleGraphLocationOnlyDocument, options );
          return { ...query, objects: query && query.data && query.data.vehicle }
      }

const [selectedInterfaceId, setSelectedInterfaceId] = useState()
  const [selectedConnectionId, setSelectedConnectionId] = useState()

  const [isJoinNetworkModalOpen, setJoinNetworkModalOpen] = useState(false)
  const [isConnectPeerModalOpen, setConnectPeerModalOpen] = useState(false)

  const getNodeQuery = useQuery(GET_NODE, {
    variables: { id: nodeId },
  })

  const getNodeInterfacesQuery = useQuery(GET_INTERFACES, {
    variables: { nodeId, networkId: '' },
  })

  const getNodeConnectionsQuery = useQuery(GET_CONNECTIONS, {
    variables: { nodeId, interfaceId: '', networkId: '' },
  })

  const [createConnection, createConnectionMutation] = useMutation(CREATE_CONNECTION)
  const [createInterface, createInterfaceMutation] = useMutation(CREATE_INTERFACE)
  const [updateInterface, updateInterfaceMutation] = useMutation(UPDATE_INTERFACE)
  const [updateConnection, updateConnectionMutation] = useMutation(UPDATE_CONNECTION)
  const [deleteInterface, deleteInterfaceMutation] = useMutation(DELETE_INTERFACE)
  const [deleteConnection, deleteConnectionMutation] = useMutation(DELETE_CONNECTION)

  useEffect(() => {
    window.scrollTo(0, 0)
    getNodeQuery.refetch()
    getNodeInterfacesQuery.refetch()
    getNodeConnectionsQuery.refetch()
  }, [location])

validateOnMount: true,
    validateOnChange: true,
  })

  const handleGetConnectionsQueryData = (data) => {
    const fromInterfaceSettings = data.result.PeerSettings[fromInterfaceId]
    formik.setFieldValue('allowedIPs', fromInterfaceSettings.RoutingRules.AllowedIPs)
    formik.setFieldValue('persistentKeepalive', data.result.PersistentKeepalive)
  }

  const getConnectionQuery = useQuery(GET_CONNECTION, {
    variables: { connectionId: id },
    onCompleted: handleGetConnectionsQueryData,
  })

  const getSelfQuery = useQuery(GET_PEER, {
    variables: { interfaceId: fromInterfaceId },
  })

  const getPeerQuery = useQuery(GET_PEER, {
    variables: { interfaceId: toInterfaceId },
  })

  useEffect(() => {
    if (isExpanded) {
      getConnectionQuery.refetch()
      getSelfQuery.refetch()
      getPeerQuery.refetch()
    }
  }, [isExpanded])

  const handleClick = () => {

const NetworksView = () => {
  const [searchFilter, setSearchFilter] = useState('')
  const location = useLocation()

  const { success } = useToast()
  const { confirm } = useConfirmationDialog()

  const getNetworksQuery = useQuery(GET_NETWORKS, {})

  const [deleteNetwork, deleteNetworkMutation] = useMutation(DELETE_NETWORK, {
    variables: { id: undefined },
    onCompleted: () => {
      success('Network deleted')
      getNetworksQuery.refetch()
    },
  })

  useEffect(() => {
    window.scrollTo(0, 0)
    getNetworksQuery.refetch()
  }, [location])

  const handleNetworkSelect = (id) => {
    navigate(`networks/${id}`)

const NetworkDetails = () => {
  const location = useLocation()
  const navigate = useNavigate()
  const { networkId } = useParams()

  const { confirm } = useConfirmationDialog()

  const [isAdmitNodeModalOpen, setAdmitNodeModalOpen] = useState(false)

  const getNetworkQuery = useQuery(GET_NETWORK_WITH_INTERFACES, {
    variables: { id: networkId },
  })

  const [createInterface, createInterfaceMutation] = useMutation(CREATE_INTERFACE, {
    variables: { networkId },
  })

  const [deleteInterface, deleteInterfaceMutation] = useMutation(DELETE_INTERFACE)

  useEffect(() => {
    window.scrollTo(0, 0)
    getNetworkQuery.refetch()
  }, [location])

  const handleAdmitNodeButtonClick = () => {
    setAdmitNodeModalOpen(true)

const ConnectPeerModal = ({ isOpen, onJoin, onClose }) => {
  const { nodeId } = useParams()

  const [networks, setNetworks] = useState([])
  const [selectedNetwork, setSelectedNetwork] = useState()

  const [peers, setPeers] = useState([])
  const [selectedPeer, setSelectedPeer] = useState()

  const [searchString, setSearchString] = useState('')

  const getNodeQuery = useQuery(GET_NODE_WITH_INTERFACES, {
    variables: { id: nodeId },
  })

  const handleGetNetworksQueryData = (data) => {
    setNetworks(data.result)
  }

  const handleGetPeersQueryData = (data) => {
    setPeers(data.result)
  }

  const getNetworksQuery = useQuery(GET_NETWORKS, {
    onCompleted: handleGetNetworksQueryData,
  })

  const [getPeers, getPeersQuery] = useLazyQuery(GET_PEERS, {

export function useFetchVehicleGraphObjectsQuery( options: Omit, 'query'> ) {
          const query = useQuery(FetchVehicleGraphDocument, options );
          return { ...query, objects: query && query.data && query.data.vehicle }
      }