React Query HooksVisão Geral

React Query Hooks

Hooks React Query pré-construídos para busca de dados e mutações perfeitas.

Instalação

yarn add @meaple/react-query @tanstack/react-query

Configuração

Envolva sua aplicação com QueryClientProvider:

import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 
const queryClient = new QueryClient()
 
function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <YourApp />
    </QueryClientProvider>
  )
}

Hooks Disponíveis

Eventos

  • useEvents - Listar todos os eventos
  • useEventTickets - Obter ingressos de um evento
  • useEventProducts - Obter produtos de um evento
  • useUserEventTickets - Obter ingressos do usuário para um evento
  • useChannelEvent - Obter evento por canal e slug

Pedidos

  • useCreateOrder - Criar um novo pedido

Ingressos

  • useEditUserTicket - Editar ingresso do usuário
  • useTransferTicket - Transferir ingresso para outro usuário

Usuários

  • useUserEvents - Obter eventos do usuário

Categorias

  • useCategories - Listar todas as categorias

Endereço

  • useAddress - Obter previsões de endereço
  • useAddressByZipCode - Obter endereço por CEP

Cupom

  • useCheckCoupon - Validar código de cupom

Exemplo de Uso

import { useEvents, useCreateOrder } from '@meaple/react-query'
 
function EventsPage() {
  const { data: events, isLoading, error } = useEvents({
    page: 1,
    limit: 10
  })
 
  const createOrder = useCreateOrder()
 
  const handleCreateOrder = async () => {
    await createOrder.mutateAsync({
      eventId: 'event-123',
      tickets: [{ id: 'ticket-1', quantity: 2 }]
    })
  }
 
  if (isLoading) return <div>Carregando...</div>
  if (error) return <div>Erro: {error.message}</div>
 
  return (
    <div>
      {events?.map(event => (
        <div key={event.id}>{event.name}</div>
      ))}
      <button onClick={handleCreateOrder}>Criar Pedido</button>
    </div>
  )
}

Suporte TypeScript

Todos os hooks são totalmente tipados:

import { useEvents } from '@meaple/react-query';
import type { Event } from '@meaple/types';
 
const { data } = useEvents();
PaginaçãoEventos