Hook is used for fetch pre-match 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, Game_OrderBy, OrderDirection } from '@azuro-org/data'
const { loading, error, data } = useGames(props)
const games = data?.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
sportSlug?: string // returns games from specific sport
}
orderBy?: Game_OrderBy // default: Game_OrderBy.CreatedBlockTimestamp` - orders rows by passed rule
orderDir?: OrderDirection // order direction: asc, desc
cacheTime?: number // the frequency with which to update data, **measured in seconds**
}
Numerous completed games exist in the Subgraph database. Displaying these already-initiated games in the pre-match list is generally unnecessary. To filter out such games, we employ the startsAt_gt
parameter in the GraphQL query variables. This only retrieves games for which the startsAt
time is later than now()
.
However, using the direct now()
value for this parameter can be problematic as it can lead to frequent data re-fetches with each hook call. To mitigate this, we've introduced a caching mechanism that, by default, stores the results for 3 minutes. This caching duration can be modified by using the cacheTime
parameter.
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 } from '@azuro-org/data'
const options = {
// your options
}
const { loading, error, data } = useQuery<GamesQueryResult, GamesQueryVariables>(GamesDocument, options)
Return Value
{
loading: boolean
error: Error | null
data: {
games: Array<{
id: string
gameId: any
title?: string | null
startsAt: any
sport: {
slug: string
name: string
}
league: {
slug: string
name: string
country: {
slug: string
name: string
}
}
participants: Array<{
image?: string | null
name: string
}>
}>
}
}