RTK Query Caching

Compare a naive fetch-heavy implementation with an RTK Query version that dedupes network traffic and invalidates on mutation.

The demo instruments request counts, cache hits, and render counts so you can see the impact of the caching strategy in real time.

Demo Code Tests

What's covered

Request de-duplication across multiple subscribers to the same query.
Cache invalidation after a mutation triggers one — and only one — refresh.
TTL behaviour: cached data persists while warm and expires once the timer elapses.

Tests live in demos/rtk-query/__tests__/itemsApi.test.ts, using Vitest with Node’s built-in fetch to exercise the RTK Query slice without the UI.

Run locally

npm run test

Sample output:

√ itemsApi caching behavior (3)
  √ dedupes identical subscribers to the same query
  √ invalidates and refetches exactly once after a mutation
  √ respects the keepUnusedDataFor TTL before dropping cached data

Test Files  1 passed (1)
     Tests  3 passed (3)
   Duration  ~0.3s