Schnellstart

In drei Schritten von null zu einer gecachten, abbrechbaren Query, die automatisch rendert.

1. Query deklarieren und ausführen#

Todos.razor
@page "/todos"
@inherits DejaComponentBase
@inject TodoApi Api

@if (_todos.IsLoading && _todos.Data is null) { <p>Loading…</p> }
@if (_todos.IsError) { <p class="error">@_todos.ErrorMessage</p> }

<ul>
    @foreach (var todo in _todos.Data ?? [])
    {
        <li>@todo.Title</li>
    }
</ul>

@code {
    private readonly Query<List<Todo>> _todos = new();

    protected override Task OnInitializedAsync()
        => _todos.Execute("todos", Api.GetTodosAsync);
}

Execute("todos", Api.GetTodosAsync) ist die Kurzform mit Key: Das erste Argument ist der Cache-Key (ein String konvertiert implizit zu QueryKey.Of("todos")), das zweite ein beliebiges Func<CancellationToken, Task<T>>. Deja übergibt einen Token, der abgebrochen wird, wenn ein neuerer Ladevorgang diesen verdrängt oder die Komponente disposed wird.

2. Zustand binden#

Alles, was der Request-Lebenszyklus offenlegt, ist eine bindbare Eigenschaft:

  • IsLoading — irgendeine Ausführung läuft
  • IsReFetching — eine Ausführung nach der ersten; nutze sie für dezente Aktualisierungs-Indikatoren statt eines ganzseitigen Spinners
  • IsError / ErrorMessage — der letzte Fehler
  • Data — das letzte Ergebnis
  • IsCachedData / IsStale / UpdatedAt — Cache-Fakten für Queries mit Key

3. Mit einer Mutation schreiben, den Key invalidieren#

Todos.razor (Fortsetzung)
<input @bind="_title"/>
<button @onclick="Add" disabled="@_addTodo.IsLoading">Add</button>

@code {
    private readonly Mutation<Todo> _addTodo = new();
    private string _title = "";

    private Task Add() => _addTodo.Execute(
        token => Api.AddTodoAsync(_title, token),
        p => p.InvalidateKeys = [QueryKey.Of("todos")]);
}

Bei Erfolg lädt jede eingehängte Query, deren Key mit "todos" beginnt, im Hintergrund neu — in jeder Komponente, die diese Daten anzeigt. Keine Event-Verdrahtung, keine manuellen Reload-Aufrufe.

Sieh es live#

Das ist die ganze Schleife. Die Todo-Listen-Demo ist genau dieses Muster, laufend gegen eine echte API, mit angeschlossenem State-Inspector. Von hier aus: