React Query Filter Example

Back to Home

How Caching Works:

  • Initial Load: Data is prefetched on the server and sent to the client. No client-side fetch occurs.
  • Switching Filters: Creates a new query key, causing a fetch for that specific filter if not in cache.
  • Cache Invalidation: After 60 seconds (staleTime), the data becomes stale but is still shown. A background refetch happens when you visit the page again.
  • Navigation: Returning to a filter you've already seen uses cached data if available and not stale.

Filter Collection

Query Debug Info

Filterall
Loading✅ No
Fetching✅ No
Stale✅ No
Query Key["shoes", "all"]
Status:💾 Served from Cache

5Shoes Found

👟

Nike Air Max

Premium Collection

👟

Adidas Ultraboost

Premium Collection

👟

Dr. Martens

Premium Collection

👟

Timberland

Premium Collection

👟

Converse Chuck Taylor

Premium Collection