;
};
`Fetch` makes HTTP requests from the browser using the native `fetch()` API. Use it to call REST endpoints, load external data, or submit forms — anything that speaks HTTP without needing an MCP server in the middle.
```python Python icon="python" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
from prefab_ui.components import Button
from prefab_ui.actions import Fetch, SetState, ShowToast
from prefab_ui.rx import RESULT
Button(
"Load Users",
on_click=Fetch.get(
"/api/users",
on_success=[
SetState("users", RESULT),
ShowToast("Users loaded!", variant="success"),
],
),
)
```
```json Protocol icon="brackets-curly" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
{
"view": {
"type": "Button",
"label": "Load Users",
"variant": "default",
"size": "default",
"disabled": false,
"onClick": {
"onSuccess": [
{"action": "setState", "key": "users", "value": "{{ $result }}"},
{"action": "showToast", "message": "Users loaded!", "variant": "success"}
],
"action": "fetch",
"url": "/api/users",
"method": "GET"
}
}
}
```
The response is parsed automatically — JSON becomes an object, everything else becomes a string. The `on_success` callback fires after a successful request, and the parsed response is available as `$result` (Python: `RESULT`). Use `SetState("users", RESULT)` inside `on_success` to write the response into client-side state, making it immediately available via `{{ users }}` interpolation.
## Classmethods
Each HTTP method has a dedicated classmethod with a tailored signature. `GET` accepts query `params`, while `POST`/`PUT`/`PATCH` accept a `body`.
```python GET with query params theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
from prefab_ui.rx import Rx
query = Rx("query")
Fetch.get("/api/search", params={"q": query, "page": "1"})
```
```python POST with JSON body theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
from prefab_ui.rx import Rx
name, email = Rx("name"), Rx("email")
Fetch.post("/api/users", body={"name": name, "email": email})
```
```python DELETE theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
from prefab_ui.rx import Rx
user_id = Rx("user_id")
Fetch.delete(f"/api/users/{user_id}")
```
You can also construct a `Fetch` directly for full control:
```python Full form theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
from prefab_ui.actions import Fetch, SetState
from prefab_ui.rx import RESULT, Rx
form_data = Rx("form_data")
Fetch(
"/api/submit",
method="POST",
headers={"X-Custom": "value"},
body={"data": form_data},
on_success=SetState("response", RESULT),
)
```
## Error Handling
Non-2xx responses trigger `on_error` with the status line as `$error`. This follows the same callback pattern as every other Prefab action.
```python Error handling theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
from prefab_ui.actions import Fetch, ShowToast
from prefab_ui.rx import Rx
item = Rx("item")
Fetch.post(
"/api/save",
body={"item": item},
on_success=ShowToast("Saved!", variant="success"),
on_error=ShowToast("{{ $error }}", variant="error"),
)
```
A 404 would show a toast reading "404 Not Found".
## Request Bodies
Dict bodies are automatically JSON-serialized with a `Content-Type: application/json` header. String bodies are sent as-is — useful for form-encoded data or raw text. The auto-set `Content-Type` won't override a header you set explicitly.
## Combined with Client Actions
Like any action, `Fetch` composes in a list. A common pattern: show a loading state, make the request, then clear it.
```python Combined actions theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
from prefab_ui.components import Button
from prefab_ui.actions import Fetch, SetState
from prefab_ui.rx import RESULT, Rx
query = Rx("query")
Button(
"Submit",
on_click=[
SetState("loading", True),
Fetch.post(
"/api/submit",
body={"q": query},
on_success=SetState("result", RESULT),
),
SetState("loading", False),
],
)
```
If the request fails, `SetState("loading", False)` never runs (the chain short-circuits). Use `on_error` on the `Fetch` to handle that case.
## API Reference
URL to fetch. Supports `{{ key }}` interpolation. Can be passed as a positional argument.
HTTP method: `GET`, `POST`, `PUT`, `PATCH`, or `DELETE`.
Request headers. Values support `{{ key }}` interpolation.
Request body. Dicts are JSON-serialized automatically. Ignored for GET requests.
Action(s) to run when the request succeeds. The parsed response is available as `$result`.
Action(s) to run when the request fails. The error message is available as `$error`.
## Protocol Reference
```json Fetch theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
{
"action": "fetch",
"url": "string (required)",
"method?": "GET | POST | PUT | PATCH | DELETE",
"headers?": "object",
"body?": "object | string"
}
```
For the complete protocol schema, see [Fetch](/protocol/fetch).