# An Introduction to the Client
The `taClient`(client for short) is how most of the actions will be carried out. It is used when you want to query the database, connect to servers, and listen to things that are not saved in the state, such as live data

The `stateManager` is the way you would fetch tournaments, get matches, or do anything related to getting specific data that does not require a database query. It is best if you are familiar with what methods it has and how you can use them. 

## Standard Response Object
There are a couple of important notes for client responses. Since most client responses are async, they will return a promise. This will be shown as `Promise<Response>` in IntelliSense. In reality, what happens under the hood is that ProtoBuf sends back a packet of the form:
```ts
{
    details: {
        packetType: data,
        oneofKind: 'packetType'
    },
    respondingToPacketId: 'packet-guid-uuidv4',
    type: Response_ResponseType
}
```
For the definition of the `Response_ResponseType` look at the [Modals -> Response_ResponseType](/documentation#Modals/4-Response_ResponseType).

Generally for responses `details.packetType` will contain the actual data of the response. In order to retreive data from the response in TypeScript, we have to use the `as any` syntax.
```ts
const response = await client.doAction();

let data = (response as any).details.doAction;
```
Where `doAction` is the same as the `response.details.oneofKind`.

<div class="warning-box">
    <span class="material-icons">question_mark</span>
    <div>
        <strong>Why is this important?</strong> TypeScript <strong>DOES NOT</strong> recognise these `packetType` objects, hence when dealing with responses we often use `as any` to get rid of type errors.
    </div>
</div>

Let me provide an example of how the client is used in ShyyTAUI:
```ts
onMount(async() => {
    // Check if the user is logged in
    if ($authTokenStore) {
        // Using the client listen for events that will not be stored in the state, 
        // such as scores and song finish events
        client.on('realtimeScore', handleRealtimeScoreUpdate);
        client.on('songFinished', handleSongFinished);
    } else {
        // If the user is not authenticated, 
        // they will be thrown to the discord authentication page
        window.location.href = "/discordAuth"
    }
});

onDestroy(() => {
    // Remove the listeners that were added on mount
    client.removeListener('realtimeScore', handleRealtimeScoreUpdate);
    client.removeListener('songFinished', handleSongFinished);
});
```
<div class="info-box">
    <span class="material-icons">info</span>
    <div>
        <strong>Example:</strong> This is an example from the page of ShyyTAUI within the match coorination page. 
    </div>
</div>