Comfy-Org / Comfy-Org/ComfyUI_frontend

Consolidate network calls to use consistent HTTP clients

Open
#5,017 1 comment 0 reactions 1 assignee Claimed by @christian-byrne View on GitHub
developer experience
Dominant language
TypeScript
Stars
2k
Forks
699
Avg merge
1d 7h
Merged PRs (30d)
490

Description

## Overview

Currently, the codebase has mixed usage of direct `fetch()` calls and axios clients across different modules. This inconsistency makes it difficult to implement cross-cutting concerns like request/response interceptors, consistent error handling, and header management.

## Goals

1. **Centralize network calls** - Move away from scattered direct `fetch()` usage to consistent HTTP client patterns
2. **Enable extensibility** - Prepare infrastructure for request/response interceptors and middleware
3. **Improve maintainability** - Consistent error handling and request patterns across the codebase
4. **Support future enhancements** - Enable features like request retries, caching, and custom headers

## Implementation Checklist

### Phase 1: Network Call Consolidation

- [x] **Firebase Auth Store** (`src/stores/firebaseAuthStore.ts`)
- Replace direct fetch calls with axios client
- Maintain exact same error handling behavior
- PR: #TBD

- [ ] **Template Workflows** (`src/composables/useTemplateWorkflows.ts`)
- Consolidate template loading network calls
- Use consistent client pattern

- [ ] **Upload Audio** (`src/extensions/core/uploadAudio.ts`)
- Replace direct fetch with centralized client
- Maintain upload functionality

- [ ] **3D Loading Utils** (`src/extensions/core/load3d/Load3dUtils.ts`)
- Consolidate 3D asset loading calls
- Share client with ModelExporter if convenient

- [ ] **Model Exporter** (`src/extensions/core/load3d/ModelExporter.ts`)
- Replace direct fetch usage
- Share client with Load3dUtils if convenient

- [ ] **Download Utility** (`src/composables/useDownload.ts`)
- Consolidate file download network calls
- Use consistent client pattern

### Phase 2: Infrastructure (Future)

- [ ] **Header Registration System** - Allow extensions to register custom headers
- [ ] **Request Interceptors** - Support middleware for request/response processing
- [ ] **Client Interface** - Define common interface for all HTTP clients
- [ ] **Pre-init Lifecycle Hook** - Enable header registration before any network calls

## Technical Benefits

- **Consistent error handling** across all network operations
- **Centralized request configuration** (timeouts, retries, base URLs)
- **Extensible architecture** for future middleware and interceptors
- **Better testing** with centralized mocking points
- **Improved debugging** with consistent request patterns

## Files Identified for Consolidation

Based on codebase audit, these files currently use direct fetch calls outside of service classes:

```
src/stores/firebaseAuthStore.ts ✅
src/composables/useTemplateWorkflows.ts
src/extensions/core/uploadAudio.ts
src/extensions/core/load3d/Load3dUtils.ts
src/extensions/core/load3d/ModelExporter.ts
src/composables/useDownload.ts
```

Excluded:
- `src/lib/litegraph/src/LGraph.ts` (library code)
- Service classes already using axios consistently
- Components using stores/services indirectly

## Success Criteria

- [ ] All identified files use consistent HTTP client patterns
- [ ] No direct fetch calls outside of centralized clients
- [ ] Existing functionality preserved with same error handling
- [ ] Foundation prepared for header registration system
- [ ] All changes covered by unit tests

┆Issue is synchronized with this [Notion page](https://www.notion.so/Issue-5017-Consolidate-network-calls-to-use-consistent-HTTP-clients-2506d73d36508144bda3e4488eaf8cb5) by [Unito](https://www.unito.io)

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.