Browse recipes

Load data from a view

Carry one profile screen from loading to a remote result or failure.

Table of contents

APIs used

mount
Starts a Valyrian.js application on a DOM target.
update
Requests a render pass for the mounted view.
request
Provides the asynchronous Valyrian.js HTTP client entry point.

Run this recipe

Starting project
Use the local TSX and ESM project from Stage 1 with Valyrian.js installed and its ESM browser build configured.
File
Replace src/client-entry.tsx with this recipe snippet.
Run
Run npm run build, serve public with npx --yes serve@14.2.5 public --listen 8000, open http://localhost:8000 and use the example's visible controls.
Observable result
The page moves from loading to success and displays Arya: editor. A rejected request would move the same view to error.

Starting point

Represent loading, success and error while requesting one JSON profile.

Steps

Mount the status view, await request.get for the self-contained data URL and refresh the view in finally.

ts
import { mount, update } from "valyrian.js";
import { request } from "valyrian.js/request";

type Profile = { name: string; role: string };
const profileUrl = `data:application/json,${encodeURIComponent(
  JSON.stringify({ name: "Arya", role: "editor" }),
)}`;

let status = "loading";
let result = "Loading profile";

mount("body", () => `${status}: ${result}`);

try {
  const profile = (await request.get(profileUrl)) as Profile;
  status = "success";
  result = `${profile.name}: ${profile.role}`;
} catch (error) {
  status = "error";
  result = error instanceof Error ? error.message : "Profile request failed";
} finally {
  update();
}

Result

The page moves from loading to success and displays Arya: editor. A rejected request would move the same view to error.

Limits

Every request call and generated helper returns a promise. Await the parsed body or the raw Response selected by resolveWithFullResponse.

Continue