import { useQuery } from '@apollo/client' import { Invoice } from '../../components/invoice' import { QrSkeleton } from '../../components/qr' import LayoutCenter from '../../components/layout-center' import { useRouter } from 'next/router' import { INVOICE } from '../../fragments/wallet' export default function FullInvoice () { return ( <LayoutCenter> <LoadInvoice /> </LayoutCenter> ) } function LoadInvoice () { const router = useRouter() const { loading, error, data } = useQuery(INVOICE, { pollInterval: 1000, variables: { id: router.query.id } }) if (error) { console.log(error) return <div>error</div> } if (!data || loading) { return <QrSkeleton status='loading' /> } return <Invoice invoice={data.invoice} /> }