Developer Hub
🔮 For applications
SDK
Data Hooks
useSports

This hook is used to fetch sports with 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 { useSports } from '@azuro-org/sdk'
 
const { loading, error, sports } = useSports(props)
ℹ️

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

Props

{
  filter?: {
    limit?: number // limit the number of games returned from a query for each sport
    sportHub?: SportHub // returns games from specific hub
    sportSlug?: string // returns games from specific sport
    countrySlug?: string // returns games from specific country
    leaglueSlug?: string // returns games from specific league
  }
  gameOrderBy?: Game_OrderBy.Turnover | Game_OrderBy.StartsAt // default: Game_OrderBy.StartsAt`
  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 { SportsDocument, SportsQueryResult, SportsQueryVariables, 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<SportsQueryResult, SportsQueryVariables>(SportsDocument, options)

Return Value

{
  loading: boolean
  error: Error | null
  sports: Array<{
    slug: string;
    name: string;
    countries: Array<{
        slug: string;
        name: string;
        turnover: string;
        leagues: Array<{
            slug: string;
            name: string;
            turnover: string;
            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'
}