Skip to content

🔧 Standardize TanStack Query Implementation #298

Description

@zalexa19

Standardize the TanStack Query setup across the client by properly organizing queries, mutations, types, and query key factories according to best practices.
🎯 Goals

  • Separate queries from mutations into dedicated files
  • Create proper TypeScript interfaces for all API requests/responses
  • Implement query key factories for all features
  • Ensure consistent file structure across all features

📝 Implementation Guidelines
Each feature's data/ folder should follow this structure:

feature/
└── data/
    ├── types.ts           # Request/Response types
    ├── queries.ts         # GET operations with hooks
    ├── mutations.ts       # POST/PUT/PATCH/DELETE with hooks
    └── queryKeys.ts       # Query key factory

Query Key Factory Pattern
Reference the existing pattern in search/data/queries.ts
Types File Structure

// types.ts
export interface FeatureRequest {
  // Request payload fields
}

export interface FeatureResponse {
  // Response data fields
}

export interface FeatureListResponse {
  // Array or paginated response
}

Definition of done:

  • All features have separated queries.ts and mutations.ts files
  • All features have types.ts with proper Request/Response interfaces
  • All features have queryKeys.ts with key factories
  • All query hooks use the key factory functions
  • All mutations properly invalidate queries using key factories
  • No mixed query/mutation files remain
  • All //fixme: comments related to types are resolved
  • Documentation updated in CLIENT_STRUCTURE.md if needed

Metadata

Metadata

Assignees

Labels

FEFrontend ticket

Type

Fields

No fields configured for Task.

Projects

Status
No status

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions