Skip to main content

Documentation Index

Fetch the complete documentation index at: https://prefab.prefect.io/docs/llms.txt

Use this file to discover all available pages before exploring further.

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. 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.
GET with query params
from prefab_ui.rx import Rx

query = Rx("query")
Fetch.get("/api/search", params={"q": query, "page": "1"})
POST with JSON body
from prefab_ui.rx import Rx

name, email = Rx("name"), Rx("email")
Fetch.post("/api/users", body={"name": name, "email": email})
DELETE
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:
Full form
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.
Error handling
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.
Combined actions
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

Fetch Parameters

​
url
str
required
URL to fetch. Supports {{ key }} interpolation. Can be passed as a positional argument.
​
method
str
default:"GET"
HTTP method: GET, POST, PUT, PATCH, or DELETE.
​
headers
dict[str, str]
Request headers. Values support {{ key }} interpolation.
​
body
dict | str
Request body. Dicts are JSON-serialized automatically. Ignored for GET requests.

​
Protocol Reference

Fetch
{
  "action": "fetch",
  "url": "string (required)",
  "method?": "GET | POST | PUT | PATCH | DELETE",
  "headers?": "object",
  "body?": "object | string"
}
For the complete protocol schema, see Fetch.