React Query HooksEventos

Events Hooks

React Query hooks for managing events.

useEvents

Fetch a list of events:

import { useEvents } from '@meaple/react-query'
 
function EventsList() {
  const { data, isLoading, error } = useEvents({
    page: 1,
    limit: 20
  })
 
  if (isLoading) return <div>Loading...</div>
  if (error) return <div>Error: {error.message}</div>
 
  return (
    <div>
      {data?.map(event => (
        <div key={event.id}>{event.name}</div>
      ))}
    </div>
  )
}

useEventTickets

Get tickets for a specific event:

import { useEventTickets } from '@meaple/react-query'
 
function EventTickets({ eventId }: { eventId: string }) {
  const { data: tickets, isLoading } = useEventTickets(eventId)
 
  if (isLoading) return <div>Loading tickets...</div>
 
  return (
    <div>
      {tickets?.map(ticket => (
        <div key={ticket.id}>
          {ticket.name} - ${ticket.price}
        </div>
      ))}
    </div>
  )
}

useEventProducts

Fetch products for an event:

import { useEventProducts } from '@meaple/react-query'
 
function EventProducts({ eventId }: { eventId: string }) {
  const { data: products, isLoading } = useEventProducts(eventId)
 
  return (
    <div>
      {products?.map(product => (
        <div key={product.id}>
          {product.name} - ${product.price}
        </div>
      ))}
    </div>
  )
}

useUserEventTickets

Get tickets for a user’s event:

import { useUserEventTickets } from '@meaple/react-query'
 
function MyEventTickets({ eventId }: { eventId: string }) {
  const { data: tickets } = useUserEventTickets(eventId)
 
  return (
    <div>
      <h2>My Tickets</h2>
      {tickets?.map(ticket => (
        <div key={ticket.id}>
          Ticket #{ticket.id} - {ticket.status}
        </div>
      ))}
    </div>
  )
}

useChannelEvent

Fetch event by channel and slug:

import { useChannelEvent } from '@meaple/react-query'
 
function ChannelEvent({ channelSlug, eventSlug }) {
  const { data: event, isLoading } = useChannelEvent(
    channelSlug,
    eventSlug
  )
 
  if (isLoading) return <div>Loading...</div>
 
  return (
    <div>
      <h1>{event?.name}</h1>
      <p>{event?.description}</p>
    </div>
  )
}

Hook Options

All hooks accept React Query options:

const { data } = useEvents(
  { page: 1, limit: 20 },
  {
    staleTime: 5 * 60 * 1000,
    cacheTime: 10 * 60 * 1000,
    refetchOnWindowFocus: false,
    retry: 3,
  }
);
Visão GeralPedidos