# Data Fetching Directives Declarative HTTP requests via HTML attributes. Priority 1. ## Contents - [Data Fetching](#data-fetching) -- base, get, post, put, patch, delete and all companion attributes - [base](#base) -- set API base URL for descendant HTTP directives - [get](#get) -- fetch data via HTTP GET - [post](#post) -- submit data via HTTP POST - [put](#put) -- update data via HTTP PUT (full replacement) - [patch](#patch) -- partial update via HTTP PATCH - [delete](#delete) -- delete data via HTTP DELETE - [Mutation Attributes](#mutation-attributes-postputpatchdelete) -- body, success, error, loading, confirm, redirect, then, into, cached, retry, retry-delay - [as](#as) -- name for fetched data in local context - [body](#body) -- request body for POST/PUT/PATCH - [headers](#headers) -- custom request headers - [params](#params) -- query parameters appended to URL - [cached](#cached) -- cache HTTP responses - [into](#into) -- write response to global store - [debounce](#debounce) -- debounce reactive URL refetches - [refresh](#refresh) -- auto-refresh interval for polling - [retry](#retry) -- retry count on failure - [retry-delay](#retry-delay) -- delay between retries - [Programmatic Refresh](#programmatic-refresh) -- re-trigger fetch via el.refresh() - [Template var Priority](#template-var-priority) -- success/error template variable naming - [Trigger Behavior](#trigger-behavior) -- how each directive triggers its request - [Pagination & Fetch Triggers](#pagination--fetch-triggers) -- get-trigger, get-insert, get-page, get-cursor, get-threshold - [SwitchMap / Abort Behavior](#switchmap--abort-behavior) -- rapid calls abort in-flight requests --- ## Data Fetching Declarative HTTP requests via HTML attributes. Set a base URL on any ancestor and all descendant fetch directives resolve relative URLs against it. ### `base` Set API base URL for all descendant HTTP directives. **Syntax:** `` All descendant `get`, `post`, `put`, `patch`, `delete` resolve relative URLs against this base. Absolute URLs skip base resolution. Can be overridden on nested elements. ```html

...

``` ### `get` Fetch data via HTTP GET request. **Syntax:** `` **Attributes:** | Attribute | Type | Description | |-----------|------|-------------| | `get` | string | URL to fetch (GET request) | | `as` | string | Name for response data in context. Default: `"data"` | | `loading` | string | Template ID shown while loading (e.g. `"#skeleton"`) | | `error` | string | Template ID shown on fetch error | | `empty` | string | Template ID shown when response is empty array/null | | `refresh` | number | Auto-refresh interval in ms (polling) | | `cached` | boolean or string | Cache responses. `cached` = memory, `cached="local"` = localStorage, `cached="session"` = sessionStorage | | `into` | string | Write response to a named global store | | `debounce` | number | Debounce reactive URL refetches in ms | | `headers` | string | JSON string of additional headers | | `params` | string | Expression that resolves to query params object | | `skeleton` | string | ID (without `#`) of an existing DOM element to hide while loading and show again on response. Use for CLS prevention — element starts visible in HTML and No.JS hides it during the request. | | `retry` | number | Number of retry attempts on failure. Default: value from `NoJS.config({ retries })` | | `retry-delay` | number | Delay in ms between retries. Default: `1000` | | `var` | string | Variable name for response data in success/error templates. Default fallback described in [Template var Priority](#template-var-priority) | > **Programmatic refresh:** Every HTTP element exposes a `.refresh()` method. Use `$refs.myEl.refresh()` to re-trigger the fetch programmatically. See [Programmatic Refresh](#programmatic-refresh). ```html

``` **Reactive URLs** -- URLs referencing state variables re-fetch automatically when values change. If the resolved URL is identical to the previous one, the re-fetch is skipped. ```html

...

``` ### `post` Submit data via HTTP POST request. **Syntax:** `` **Trigger:** On a ` ``` ### `put` Update data via HTTP PUT request (full replacement). **Syntax:** `` **Trigger:** On a ` ``` ### `patch` Partial update via HTTP PATCH request. **Syntax:** `` **Trigger:** On a `

`, intercepts the `submit` event and auto-serializes fields via `FormData` (same as `post`). On any other element, attaches a `click` listener. ### `delete` Delete data via HTTP DELETE request. **Syntax:** `` **Trigger:** On a ``, intercepts the `submit` event. On any other element (typical), attaches a `click` listener. ```html ``` ### Mutation Attributes (post/put/patch/delete) | Attribute | Description | |-----------|-------------| | `body` | Request body (JSON string with `{variable}` interpolation). For `` elements on **any** method (POST, PUT, PATCH, DELETE), fields are auto-serialized via `FormData` and override `body` | | `success` | Template ID to render on success. Variable name resolved via [Template var Priority](#template-var-priority) | | `error` | Template ID to render on error. Variable name resolved via [Template var Priority](#template-var-priority) | | `loading` | Template ID to show during request | | `confirm` | Show browser `confirm()` dialog before sending | | `redirect` | URL to navigate to on success (SPA route) | | `then` | Expression to execute on success (e.g. `"users.push(result)"`) | | `into` | Write response to a named global store | | `cached` | Cache responses (memory/local/session) | | `retry` | Number of retry attempts on failure. Default: value from `NoJS.config({ retries })` | | `retry-delay` | Delay in ms between retries. Default: `1000` | | `var` | Variable name for response data in success/error templates. See [Template var Priority](#template-var-priority) | **Request lifecycle:** `[idle] -> [loading] -> [success | error]` ### `as` Name for fetched data in the local context. **Syntax:** `` Default value is `"data"`. The response data becomes available in the context under this name for all child elements. ```html

``` ### `body` Request body for POST/PUT/PATCH/DELETE requests. **Syntax:** `` Accepts a JSON string with `{variable}` interpolation. For `` elements on any method, fields are always auto-serialized via `FormData` (overrides `body`). ### `headers` Custom request headers. **Syntax:** `` Provided as a JSON string. Merged with global headers from `NoJS.config()`. > **Note:** Inline sensitive headers (`Authorization`, `Cookie`, `X-CSRF-Token`, `X-API-Key`) trigger an unconditional console warning. Prefer `NoJS.config({ headers })` or interceptors for sensitive headers. ### `params` Query parameters appended to the URL. **Syntax:** `` Expression that resolves to an object. Keys become query string parameters. ### `cached` Cache HTTP responses. **Syntax:** `` or `` | Value | Storage | |-------|---------| | `cached` (no value) | In-memory cache | | `cached="memory"` | In-memory cache | | `cached="local"` | localStorage | | `cached="session"` | sessionStorage | ### `into` Write response to a named global store. **Syntax:** `` The store does not need to be pre-defined -- `into` creates it automatically if it doesn't exist. The data is accessible via `$store.storeName` from anywhere. ```html

``` ### `debounce` Debounce reactive URL refetches (milliseconds). **Syntax:** `` Useful when a `get` URL contains reactive variables that change frequently (e.g. search input). ### `refresh` Auto-refresh interval for polling (milliseconds). **Syntax:** `` The element re-fetches its URL at the specified interval. Polling stops automatically when the element disconnects from the DOM. ```html

``` ### `retry` Number of retry attempts on failure. **Syntax:** `` Default: value from `NoJS.config({ retries })`. Set `retry="0"` to disable retries for a specific request. ### `retry-delay` Delay in milliseconds between retry attempts. **Syntax:** `` Default: `1000` ms (or value from `NoJS.config({ retryDelay })`). ```html

``` ### Programmatic Refresh Every HTTP element exposes a `.refresh()` method on the DOM element. Use it to re-trigger the fetch programmatically via `$refs`: ```html

``` The method is available on all directives (`get`, `post`, `put`, `patch`, `delete`). It is cleaned up automatically when the element is disposed. ### Template var Priority The variable name exposed inside `success` and `error` templates follows a priority chain: **Success template:** 1. The `