Developer Hub
🔮 For applications
SDK
Data Hooks
useGames

This hook is used to fetch pre-match and live games.

Hook represents a logic wrapper over standard Apollo's useQuery hook. Explore Apollo's docs (opens in a new tab) to understand what data the hooks return.

You can find the list of available sports here (opens in a new tab).

Usage

import { useGames } from '@azuro-org/sdk'
 
const { loading, error, games } = useGames(props)
ℹ️

If the isLive state of the LiveProvider is true, the useGames hook will retrieve live games.

Props

{
  filter?: {
    limit?: number // limit the number of rows returned from a query
    offset?: number // omit a specified number of rows before the beginning of the result set
    sportHub?: SportHub // returns games from specific hub
    sportSlug?: string // returns games from specific sport
    leaglueSlug?: string // returns games from specific league
  }
  orderBy?: Game_OrderBy // default: Game_OrderBy.CreatedBlockTimestamp` - orders rows by passed rule
  orderDir?: OrderDirection // order direction: asc, desc
}
 
enum SportHub {
  Sports = 'sports',
  Esports = 'esports'
}

Custom query options

To accommodate additional arguments within your GraphQL query, the optimal approach is to create a custom hook. This can be achieved by leveraging the fundamental Apollo useQuery hook as your starting point.

import { useQuery } from '@apollo/client'
import type { GamesDocument, GamesQueryResult, GamesQueryVariables, useApolloClients } from '@azuro-org/sdk'
 
const { prematchClient, liveClient } = useApolloClients()
 
const options = {
  // your options
  client: prematchClient // or, use liveClient if you require games specifically from the live
}
 
const { loading, error, data } = useQuery<GamesQueryResult, GamesQueryVariables>(GamesDocument, options)

Return Value

{
  loading: boolean
  error: Error | null
  games: Array<{
    id: string
    gameId: string
    title?: string | null
    startsAt: string
    status: GraphGameStatus
    sport: {
      sportId: string
      slug: string
      name: string 
    }
    league: {
      slug: string
      name: string
      country: { 
        slug: string
        name: string 
      } 
    }
    participants: Array<{ 
      image?: string | null
      name: string 
    }>
  }> 
}
 
enum GraphGameStatus {
  Canceled = 'Canceled',
  Created = 'Created',
  Paused = 'Paused',
  Resolved = 'Resolved'
}
useSportsuseSportsNavigation