# Fetch API Data

> This skill covers patterns for fetching and managing API data. Trigger: When working with API interactions in the frontend.

- Skill: `jnzader/fetch-api-data` (Agent Skill)
- Install (CLI): `npx skillmds@latest add jnzader/fetch-api-data`
- Raw SKILL.md: https://api.skillmd.com/api/skills/jnzader/fetch-api-data/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- License: Apache-2.0
- Author: JNZader (https://skillmd.com/u/jnzader)
- Updated: 2026-09-21
- Page: https://skillmd.com/skills/jnzader/fetch-api-data

---


<!-- L1:START -->
# fetch-api-data

This skill covers patterns for fetching and managing API data.

**Trigger**: When working with API interactions in the frontend.
<!-- L1:END -->

<!-- L2:START -->
## Quick Reference

| Task | Pattern |
|------|---------|
| Fetch API data | `fetchApi` |
| Start a generation process | `startGeneration` |

## Critical Patterns (Summary)
- **Fetch API Data**: Use `fetchApi` to retrieve data from the API.
- **Start Generation Process**: Utilize `startGeneration` to initiate a data generation process.
<!-- L2:END -->

<!-- L3:START -->
## Critical Patterns (Detailed)

### Fetch API Data

Use `fetchApi` to retrieve data from the API, handling errors with `ApiError`.

```typescript
import { fetchApi, ApiError } from './lib/api';

async function getData() {
  try {
    const data = await fetchApi('/endpoint');
    console.log(data);
  } catch (error) {
    if (error instanceof ApiError) {
      console.error('API Error:', error.message);
    }
  }
}
```

### Start Generation Process

Utilize `startGeneration` to initiate a data generation process, allowing for real-time updates.

```typescript
import { startGeneration } from './lib/api';

function initiateGeneration() {
  startGeneration({ type: 'example' })
    .then(response => console.log('Generation started:', response))
    .catch(error => console.error('Error starting generation:', error));
}
```

## When to Use

- When you need to fetch data from an external API.
- When initiating a data generation process that requires real-time updates.

## Commands

```bash
docker-compose up
python repoforge/cli.py fetch-data
```

## Anti-Patterns

### Don't: Ignore ApiError Handling

Ignoring `ApiError` can lead to unhandled exceptions and poor user experience.

```typescript
// BAD
async function getData() {
  const data = await fetchApi('/endpoint'); // No error handling
  console.log(data);
}
```
<!-- L3:END -->