Gemeinsamer Cache

Zwei Geschwister-Komponenten führen denselben Key aus. Ein Fetch bedient beide; ein Refetch aus einem der beiden Panels aktualisiert beide; der Inspector zeigt den einen Eintrag, den sie abonniert haben.

Zwei Komponenten, ein Key, ein Fetch

Component A renders: 4

State IsLoading IsReFetching IsError IsCachedData IsStale ReFetchCount: 1UpdatedAt: 20:33:18
  • delectus aut autem
  • quis ut nam facilis et officia qui
  • fugiat veniam minus
  • et porro tempora
  • laboriosam mollitia et enim quasi adipisci quia provident illum

Component B renders: 4

State IsLoading IsReFetching IsError IsCachedData IsStale ReFetchCount: 1UpdatedAt: 20:33:18
  • delectus aut autem
  • quis ut nam facilis et officia qui
  • fugiat veniam minus
  • et porro tempora
  • laboriosam mollitia et enim quasi adipisci quia provident illum
Key Data Fetching Invalidated Subscribers Updated
["todos","list",5]✓ · · 2 20:33:18

Two sibling components execute the same key. Watch the network tab: one request. The cache inspector shows both panels subscribed to the single entry; a refetch from either panel updates both. 

<div class="demo-panels">
    <SharedCachePanel Title="Component A"/>
    <SharedCachePanel Title="Component B"/>
</div>

<CacheInspector Keys="@(new[] { DocsKeys.TodoList(5) })"/>

<p class="demo-note">
    Two sibling components execute the same key. Watch the network tab: one request. The cache
    inspector shows both panels subscribed to the single entry; a refetch from either panel
    updates both.
</p>

Worauf du achten solltest#

  • Subscribers: 2 im Cache-Inspector — beide Panels beobachten denselben Eintrag.
  • Beim ersten Laden klinkt sich Panel B in den laufenden Fetch von Panel A ein: Der Netzwerk-Tab zeigt einen Request für zwei Komponenten.
  • „Refetch from this panel“ aktualisiert beide Panels — über den Eintrag, nie von Panel zu Panel. Die Query jedes Panels benachrichtigt nur die eigene Komponente; der gemeinsame Eintrag ist der Multicast-Punkt.
  • Jeder Refetch erhöht beide Render-Zähler — das täte aber jedes Design mit geteilten Daten; in der Isolations-Demo stehen die Zähler dagegen still.