usePlayers The usePlayers hook fetches player profiles by their IDs. It automatically handles pagination to retrieve all requested players, fetching up to 100 players per request.
Parameters An array of player IDs to fetch. The hook will automatically paginate through all IDs in batches of 100.
Whether to skip fetching the data. When true, the query will not execute.
Returns An array of player objects containing their profile information. The unique identifier for the player.
The owner ID associated with the player.
customFields
Array<{ property: string; value: string }>
Custom fields associated with the player profile.
identities
Array<{ providerId: string; properties: Array<{ property: string; value: string }> }>
Authentication provider identities linked to the player.
Indicates whether the query is currently loading.
refetch
(playerIds: string[]) => Promise<void>
A function to manually refetch players with new player IDs.
GraphQL Query This hook uses the following GraphQL query:
query players ( $ids : [ ID ! ] ! $page : PageInfo ! ) { players ( ids : $ids page : $page ) { nodes { id username ownerId customFields { property value } identities { providerId properties { property value } } } } }
Usage Example import { usePlayers } from '@wellplayed.gg/react-sdk' ; const PlayerList = ({ playerIds } : { playerIds : string [] }) => { const { results , loading , refetch } = usePlayers ({ playerIds , skip: false , }); if ( loading ) { return < div > Loading players... </ div > ; } return ( < div > { results . map (( player ) => ( < div key = { player . id } > < h3 > { player . username } </ h3 > < p > ID: { player . id } </ p > < p > Owner: { player . ownerId } </ p > </ div > )) } < button onClick = { () => refetch ( playerIds ) } > Refresh Players </ button > </ div > ); };
Type Definition type UsePlayersParams = { playerIds ?: string []; skip ?: boolean ; }; type UsePlayersReturn = { results : Player []; loading : boolean ; refetch : ( playerIds : string []) => Promise < void >; }; type Player = { id : string ; username : string ; ownerId : string ; customFields : Array <{ property : string ; value : string ; }>; identities : Array <{ providerId : string ; properties : Array <{ property : string ; value : string ; }>; }>; }; const usePlayers : ( params : UsePlayersParams ) => UsePlayersReturn ;
Notes
The hook automatically batches requests in groups of 100 player IDs to handle pagination.
All player IDs are fetched automatically when the component mounts (unless skip is true).
Uses the Apollo GraphQL client from useWellPlayed context.