skills.rest
D1ssolve
D1ssolveCOMMUNITY
Explore all skills by this author →
GitHub

fetch-and-send-data

Implements API data fetching, error handling, and async lifecycle patterns in Blazor components.

1|Updated Jun 1, 2026
Search Tags:#error handling#data fetching#dotnet#blazor#httpclient#render modes#async lifecycle
One-click install
npx skills add https://github.com/D1ssolve/craft-agents --skill fetch-and-send-data-d1ssolve
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: fetch-and-send-data
Source: https://github.com/D1ssolve/craft-agents/tree/main/skills/fetch-and-send-data
Command: npx skills add https://github.com/D1ssolve/craft-agents --skill fetch-and-send-data-d1ssolve

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Blazor developers often struggle with correctly loading data from APIs across different render modes (Static SSR, Server, WebAssembly, Auto), handling prerendering double-invocation, managing cancellation, and displaying loading and error states without boilerplate mistakes. ## Core Features & Use Cases - HttpClient Registration: Configure named and typed HttpClient instances for Server, WebAssembly, and Auto render modes, including dual registration for prerendering scenarios. - Async Lifecycle Patterns: Load data in OnInitializedAsync or OnParametersSetAsync with cancellation support, stale-data overlays, and parameter-driven reloading. - Error Handling Strategy: Use ErrorBoundary as the default error mechanism, with targeted catch blocks only for retries and timeout-specific messages. - Use Case: A developer building a product catalog page in an Auto-render-mode Blazor app uses this Skill to abstract data access behind a service base class, fetch products via API on the client, and query the database directly on the server. ## Quick Start Ask the AI to build a Blazor component that fetches a list of products from an API with loading and error states using this skill.

Frequently Asked Questions about fetch-and-send-data

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I fetch data from an API in a Blazor component?▼

Inject a typed HttpClient or service and call it in OnInitializedAsync, storing results in a nullable field to show a loading state. For WebAssembly or Auto modes, register the HttpClient in Program.cs with a base address first.

How to handle errors when calling APIs in Blazor?▼

Wrap components in an ErrorBoundary at the layout or parent level as the default strategy, since non-cancellation exceptions propagate automatically. Only add catch blocks for retries or timeout-specific messages, and never display exception.Message to users.

Why does OnInitializedAsync run twice in Blazor with prerendering?▼

Prerendering executes the component once on the server and again when interactivity starts, causing duplicate data loads. Guard with the null-coalescing assignment operator and PersistentState attribute to skip the second call.

Can I inject DbContext in Blazor WebAssembly components?▼

No, WebAssembly components run in the browser and cannot access a database directly. Use HttpClient to call a server API, and abstract data access behind a service base class when supporting Auto render mode.

How do I reload data when a route parameter changes in Blazor?▼

Use OnParametersSetAsync with a tracked value guard to skip reloads when only UI parameters change. Cancel any pending request with a CancellationTokenSource and keep existing data visible with a loading overlay.

Related Skills

Explore More Software Engineering Skills→
ecoDriverltdecoDriverltd

collect-user-input

Build and validate Blazor forms across SSR and interactive render modes.

Official
Intermediate
kimjuyoung1127kimjuyoung1127

dangapp-form-step

Implement multi-step forms with Zustand and React Hook Form.

Community
Intermediate
reactivereactive
2.0k

rdc-rest-setup

Configure a RestEndpoint base class for TypeScript projects using @data-client/rest.

Official
Intermediate
dotnetdotnet
5.3k

fetch-and-send-data

Fetch and send data in Blazor components across Server, WebAssembly, and Auto render modes.

Official
Advanced