useGame

The useGame hook is used for fetch specific game data.

ℹ️

Hook represents a logic wrapper over TanStack Query’s useQuery hook. Explore TanStack Query docs to understand what data the hook returns.

Usage


import { useGame } from '@azuro-org/sdk'
 
const { data, isFetching, error } = useGame(props)

ℹ️

The useGame hook automatically fetches a live game and returns it, otherwise, it returns the pre-match game.

Props


{
  gameId: string
  chainId?: ChainId
  query?: QueryParameter<GameData | null> // useQuery params
}


type ChainId =
  | 100     // Gnosis
  | 137     // Polygon
  | 80002   // Polygon Amoy
  | 88888   // Chiliz
  | 88882   // Chiliz Spicy
  | 8453    // Base
  | 84532   // Base Sepolia

⚠️

gameId property is not the same as id. Each game fetched using useGames hook contains the gameId:


import { useGame } from '@azuro-org/sdk'
 
// e.g. game page, https://your-site.com/games/{gameId}
const { gameId } = useParams()
 
const { data } = useGame({ gameId })

Return Value


UseQueryResult<GameData | null>


import { type UseQueryResult } from '@tanstack/react-query'
 
type GameData = {
  id: string
  gameId: string
  slug: string
  title: string
  /** to align with the legacy from the subgraph, it's the unix timestamp in seconds, e.g. `"1771707600"` */
  startsAt: string
  state: GameState
  turnover: string
  sport: {
    sportId: string
    slug: string
    name: string
    sporthub: {
      id: string
      slug: string // 'sports' | 'esports'
    }
  }
  league: {
    id?: string
    slug: string
    name: string
  }
  country: {
    id?: string
    slug: string
    name: string
  }
  participants: Array<{
    image?: string
    name: string
  }>
}
 
enum GameState {
  Finished = 'Finished',
  Live = 'Live',
  Prematch = 'Prematch',
  Stopped = 'Stopped',
  Canceled = 'Canceled',
}