Skip to main content

Introduction

The 5Stack GraphQL API provides a powerful and flexible interface for managing Counter-Strike 2 matches, tournaments, players, and servers. Built on top of Hasura, it offers real-time subscriptions, efficient querying, and a type-safe schema.

GraphQL Endpoint

The GraphQL API is available at:
POST https://{API_DOMAIN}/v1/graphql
For WebSocket connections (subscriptions):
WSS wss://{API_DOMAIN}/v1/graphql

Key Features

Type-Safe Queries

Strongly-typed schema with full TypeScript support using Zeus codegen

Real-Time Updates

WebSocket subscriptions for live match data and tournament updates

Efficient Data Fetching

Request exactly the data you need with GraphQL field selection

Batch Operations

Execute multiple queries or mutations in a single request

Client Configuration

5Stack uses Apollo Client with custom configuration for optimal performance:
import { createHttpLink, from, split } from '@apollo/client/core';
import { GraphQLWsLink } from '@apollo/client/link/subscriptions';
import { createClient } from 'graphql-ws';

const httpLink = createHttpLink({
  credentials: 'include',
  uri: `https://${config.public.apiDomain}/v1/graphql`,
});

const wsClient = createClient({
  url: `wss://${config.public.apiDomain}/v1/graphql`,
  connectionParams: {
    credentials: 'include',
  },
});

const wsLink = new GraphQLWsLink(wsClient);

// Split traffic between HTTP and WebSocket
const splitLink = split(
  ({ query }) => {
    const definition = getMainDefinition(query);
    return (
      definition.kind === 'OperationDefinition' &&
      definition.operation === 'subscription'
    );
  },
  wsLink,
  httpLink,
);

Zeus Code Generation

5Stack uses GraphQL Zeus for type-safe GraphQL operations. Zeus generates TypeScript types and helper functions from your schema:
import { Selector, $ } from '@/generated/zeus';
import { generateQuery, generateMutation, generateSubscription } from '@/graphql/graphqlGen';

// Define reusable field selectors
export const playerFields = Selector('players')({
  name: true,
  steam_id: true,
  avatar_url: true,
  elo: true,
  country: true,
});

Fetch Policies

The default Apollo Client configuration uses these fetch policies:
  • Queries: network-only - Always fetch fresh data from the server
  • Watch Queries: cache-and-network - Return cached data immediately, then update with network data

Error Handling

The API uses Apollo’s error link to handle GraphQL errors gracefully:
const errorLink = onError((error) => {
  if (error.graphQLErrors) {
    for (const graphqlError of error.graphQLErrors) {
      // Handle specific error types
      if (graphqlError.message === 'Unauthorized') {
        // Handle authentication errors
      } else {
        // Display error to user
        toast({
          variant: 'destructive',
          title: 'Error',
          description: graphqlError.message,
        });
      }
    }
  }
});

Rate Limiting

The API includes automatic retry logic with exponential backoff:
  • Initial delay: 300ms
  • Maximum delay: 60 seconds
  • Maximum retries: 30 attempts
  • 401 (Unauthorized) errors are not retried

Next Steps

Authentication

Learn how to authenticate your API requests

Queries

Explore available GraphQL queries

Mutations

Learn about data modification operations

Subscriptions

Set up real-time data subscriptions

Build docs developers (and LLMs) love