Skip to Content
React QueryOrders

Orders (Pedidos)

Hooks para criar e consultar pedidos.

useCreateOrder

Cria um novo pedido.

import { useCreateOrder } from '@meaple-com/react-query';
 
function CheckoutButton({ eventId }: { eventId: string }) {
  const createOrder = useCreateOrder();
 
  const handleCheckout = async () => {
    try {
      const { order } = await createOrder.mutateAsync({
        eventId,
        buyer: {
          name: 'João Silva',
          email: 'joao@example.com',
        },
        tickets: [{ id: 'ticket-id', amount: 2 }],
      });
 
      console.log('Pedido criado:', order.id);
    } catch (error) {
      console.error('Erro ao criar pedido:', error);
    }
  };
 
  return (
    <button onClick={handleCheckout} disabled={createOrder.isPending}>
      {createOrder.isPending ? 'Processando...' : 'Finalizar Compra'}
    </button>
  );
}
  • Parâmetros (mutateAsync):
    • data: CreateOrderProps – dados do pedido (evento, comprador, ingressos, cupom, etc.).

Retorno (CreatedOrderProps):

  • data: { type: 'success'; order: CreatedOrderOrderProps; clientSecret: string } – pedido criado e token para concluir o pagamento.

Método Core: orders.create — veja o exemplo de resposta no Core.

useOrder

Busca um pedido específico.

import { useOrder } from '@meaple-com/react-query';
 
function OrderDetails({ orderId }: { orderId: string }) {
  const { data: order, isLoading } = useOrder(orderId);
 
  if (isLoading) return <div>Carregando...</div>;
  if (!order) return <div>Pedido não encontrado</div>;
 
  return (
    <div>
      <h2>Pedido #{order.id}</h2>
      <p>Status: {order.status}</p>
      <p>Total: R$ {order.totalPrice}</p>
    </div>
  );
}
  • Parâmetros:
    • orderId: string – ID do pedido.

Retorno (GetOrderProps):

  • data: GetOrderProps | undefined – objeto com order, paidTickets e opcionalmente paymentIntent.

Método Core: orders.get — veja o exemplo de resposta no Core.

useUserOrders 🔒

Lista pedidos do usuário autenticado.

import { useUserOrders } from '@meaple-com/react-query';
 
function OrdersList() {
  const { data: orders, isLoading } = useUserOrders({ status: 'PAID' });
 
  if (isLoading) return <div>Carregando...</div>;
 
  return (
    <div>
      {orders?.map(order => (
        <div key={order.id}>
          Pedido #{order.id} - R$ {order.totalPrice}
        </div>
      ))}
    </div>
  );
}
  • Parâmetros:
    • { status?: 'PAID' | 'REFUNDED' | 'PENDING' } – filtro de status.

Retorno:

Método Core: users.getOrders — veja o exemplo de resposta no Core.

Last updated on
EventsUsers