useNavigation

The useNavigation hook is used for fetch full sports navigation data with countries and leagues.

ℹ️

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

Usage


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

Props


{
  filter?: {
    sportHub?: SportHub
    sportIds?: Array<string | number>
  }
  isLive?: boolean // if `true`, the hook will retrieve live navigation
  returnAsPrematchAndLiveMap?: boolean // if `true`, returns data as object with 'prematch', 'live', and 'all' keys
  chainId?: ChainId
  query?: QueryParameterWithSelect<UseNavigationQueryFnData, TData>
}


type ChainId =
  | 100     // Gnosis
  | 137     // Polygon
  | 80002   // Polygon Amoy
  | 88888   // Chiliz
  | 88882   // Chiliz Spicy
  | 8453    // Base
  | 84532   // Base Sepolia
 
enum SportHub {
  Sports = 'sports',
  Esports = 'esports',
  Unique = 'unique'
}

Return Value

When returnAsPrematchAndLiveMap is false (default):


UseQueryResult<NavigationSportData[]>

When returnAsPrematchAndLiveMap is true:


UseQueryResult<Record<'prematch' | 'live' | 'all', NavigationSportData[]>>


import { type UseQueryResult } from '@tanstack/react-query'
 
type NavigationSportData = {
  sportId: string
  slug: string
  name: string
  countries: Array<{
    slug: string
    name: string
    leagues: Array<{
      slug: string
      name: string
      activePrematchGamesCount: number
      activeLiveGamesCount: number
    }>
  }>
}

When returnAsPrematchAndLiveMap is true, the data is returned as an object with three keys:

prematch: Navigation data filtered for prematch games only
live: Navigation data filtered for live games only
all: Complete navigation data without filtering


// ReturnMapValue inferred from `returnAsPrematchAndLiveMap` prop value
type UseNavigationQueryFnData<ReturnMapValue extends boolean = false> = ReturnMapValue extends true
  ? Record<'prematch' | 'live', NavigationSportData[]>
  : NavigationSportData[]

Query Options Helper

getUseNavigationQueryOptions lets you build query options outside a component — useful for prefetching, SSR, or composing queries.


import { getUseNavigationQueryOptions } from '@azuro-org/sdk'
 
const options = getUseNavigationQueryOptions({ ...props, chainId })
await queryClient.prefetchQuery(options)


type GetUseNavigationQueryOptionsProps = UseNavigationProps & {
  chainId: ChainId
}