Fetch And Send Data
Call APIs, load data into components, and handle the async lifecycle in Blazor.
Install
npx skills add dotnet/skills --skill fetch-and-send-data -g -a claude-code -y- Repository
- dotnet/skills5.8k
- Category
- Engineering
- Updated
- 3d ago
- License
- MIT
- Context cost
- Mediumabout 2,396 tokens
- Runs scripts
- No, instructions only
What it does
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).
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.
// 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
@page "/products"
@inject CatalogClient Catalog
@if (products is null)
{
<p>Loading…</p>
}
else
{
@foreach (var p in products)
{
<p>@p.Name, @p.Price.ToString("C")</p>
}
}
@code {
private Product[]? products;
protected override async Task OnInitializedAsync()
{
products = await Catalog.GetProductsAsync();
}
}
No error handling needed in the simplest case, wrap the component usage in <ErrorBoundary> at the parent/layout level to catch unhandled exceptions.
Static SSR, StreamRendering
Without [StreamRendering], the user sees nothing until OnInitializedAsync completes:
@attribute [StreamRendering]
Only affects Static SSR. No effect on interactive components.
