fetch-and-send-data
Call APIs, load data into components, and handle the async lifecycle in Blazor. USE FOR fetching data from a backend, submitting data to an API, displaying loading/error states, registering HttpClient, building service abstractions for Auto/WebAssembly render modes. DO NOT USE for form validation (see collect-user-input), prerendering persistence (see support-prerendering), or project scaffolding (see create-blazor-project).
npx skills add dotnet/skills --skill fetch-and-send-data --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# Fetch and Send Data ## Step 1 — Read AGENTS.md Check **Interactivity Mode** and **Scope**: | Mode | Data access | |------|-------------| | None (Static SSR) | Server-side: inject services/`DbContext`. Use `[StreamRendering]` for loading UX. | | Server | Server-side: inject services/`DbContext`. Guard prerender with `??=` + `[PersistentState]`. | | WebAssembly | Browser-side: `HttpClient` only. No direct server access. | | Auto | Both server and browser. Always go through an API. | ## Step 2 — Register HttpClient Only needed when calling external APIs from Server, or always for WebAssembly/Auto. Server components accessing their own database should inject `DbContext` or a service directly. ```csharp // Named client — requires Microsoft.Extensions.Http NuGet builder.Services.AddHttpClient("CatalogAPI", client => { client.BaseAddress = new Uri("https://api.example.com/"); }); // Typed client builder.Services.AddHttpClient<CatalogClient>(client => client.BaseAddress = new Uri("https://api.example.com/")); ``` For WebAssembly/Auto with prerendering, register in **both** server and `.Client` `Program.cs`. ## Step 3 — Fetch Data ### Simple load ```razor @page "/products" @inject Catalog
- Step 1 — Read AGENTS.md
- Step 2 — Register HttpClient
- Step 3 — Fetch Data
- Simple load
- Static SSR — StreamRendering
- Prerendering guard
- Step 4 — Handle Errors
- Cancellation is special
- When to add in-component error handling
- Rules
- Step 5 — Parameter-Driven Reloading
- Pattern: cancel-and-reload with stale data overlay
- Step 6 — Send Data
- Step 7 — Service Abstraction for Auto or WebAssembly with Prerendering
What does the fetch-and-send-data skill do?
Call APIs, load data into components, and handle the async lifecycle in Blazor. USE FOR fetching data from a backend, submitting data to an API, displaying loading/error states, registering HttpClient, building service abstractions for Auto/WebAssembly render modes. DO NOT USE for form validation (see collect-user-input), prerendering persistence (see support-prerendering), or project scaffolding (see create-blazor-project).
How do I install it?
Run `npx skills add dotnet/skills --skill fetch-and-send-data --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From dotnet/skills, a repository with 4,927 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.