---
metaTitle: FetchData component | AwesCode UI
meta:
  - name: description
    content: The <AwFetchData /> component is used to render FetchData - UI Vue component for AwesCode UI.
title: FetchData
---

# AwFetchData

**Category:** Organism | **Import:** Dynamic

The `AwFetchData` component is a wrapper component that fetches data from an API endpoint and provides loading and error states. It automatically watches route parameters and refetches when they change.

## Overview

`AwFetchData` provides a data fetching solution with:
- Automatic data fetching on mount
- Loading state management
- Error handling and display
- Route parameter watching (auto-refetch on change)
- Customizable loading/error displays
- Blur effect during loading

## Usage

### Basic Example

```markup
<AwFetchData url="/api/users">
    <template #default="{ data }">
        <div v-for="user in data" :key="user.id">
            {{ user.name }}
        </div>
    </template>
</AwFetchData>
```

### With Custom Loading

```markup
<AwFetchData url="/api/users">
    <template #default="{ data }">
        <UserList :users="data" />
    </template>
    
    <template #loading>
        <AwContentPlaceholder type="text" :lines="6" />
    </template>
</AwFetchData>
```

### Loading State for Form Data

```markup
<AwFetchData url="/api/user/profile">
    <template #default="{ data }">
        <AwForm url="/api/user/profile" method="patch">
            <AwInput v-model="data.name" label="Name" />
            <AwInput v-model="data.email" label="Email" />
            <AwButton type="submit">Save</AwButton>
        </AwForm>
    </template>
    
    <template #loading>
        <AwContentPlaceholder type="form" :lines="4" />
    </template>
</AwFetchData>
```

### With Custom Error

```markup
<AwFetchData url="/api/users">
    <template #default="{ data }">
        <UserList :users="data" />
    </template>
    
    <template #error="{ error }">
        <AwAlert :text="error" color="error" />
        <AwButton @click="refetch">Retry</AwButton>
    </template>
</AwFetchData>
```

### Manual Fetch

```markup
<AwFetchData url="/api/users" :fetch="false" ref="fetcher">
    <template #default="{ data }">
        <UserList :users="data" />
    </template>
</AwFetchData>

<AwButton @click="$refs.fetcher._fetchFromWatcher()">
    Load Data
</AwButton>
```

### With Route Parameters

```markup
<!-- Automatically refetches when ?page= changes -->
<AwFetchData url="/api/users">
    <template #default="{ data }">
        <UserList :users="data" />
    </template>
</AwFetchData>
```

## API

### Props

| Name | Description | Type | Required | Default |
|------|-------------|------|----------|---------|
| url | API endpoint URL | `String` | `true` | - |
| method | HTTP method | `String` | `false` | `'GET'` |
| tag | HTML tag for wrapper element | `String` | `false` | `'div'` |
| fetch | Fetch data on mount | `Boolean` | `false` | `true` |

### Slots

| Name | Description | Props | Default Slot Content |
|------|-------------|-------|---------------------|
| default | Content with fetched data | `{ data }` | - |
| loading | Custom loading display | - | Default loading chip with spinner |
| error | Custom error display | `{ error }` | Default error message with refresh button |

### Events

This component does not emit custom events.

### Methods

| Name | Parameters | Description |
|------|------------|-------------|
| _fetchFromWatcher | - | Manually trigger data fetch |

### Mixins

- `WatchParams` - Watches route parameters and refetches when they change

## Related Components

- `AwChip` - Chip component used in default loading state
- `AwButton` - Button component used in default error state
- `AwProgress` - Progress component (can be used in loading slot)

## Notes

- **Import Method:** Dynamic - Component is loaded on-demand as an organism
- Uses `$axios` for HTTP requests (must be configured)
- Loading state only shows if request takes longer than 350ms
- Route parameters are automatically included in request
- Error message is extracted from `response.data.message` or shows default
- Data is stored in `data` property and passed to default slot
- Component uses `fetchQuery()` method from `WatchParams` mixin
- Blur effect (3px) is applied to content during loading
- Default slot receives `{ data }` object with fetched data
- Error slot receives `{ error }` string with error message