DevTools Settings

Current Position: bottom-right | Theme: auto

SWR Cache DevTools Demo

Explore various SWR usage patterns and cache behaviors in this interactive demo application

Advanced FeaturesDEMO

Advanced features like conditional fetching and dependencies

How to use SWR Cache DevTools

When you run each demo, the SWR cache state will be displayed in real-time in the DevTools at the bottom of the page. You can enable edit mode to directly modify cache values.

Advanced Features Demo

Experience advanced features like conditional fetching, dependencies, and SWR configuration options

Settings Control

User ID

Enable User Fetch

Enable Dependent Fetch

Show Sensitive Data

Active SWR Keys

INACTIVEUser fetch disabled

INACTIVEDependent fetch disabled or waiting

ACTIVE/api/settings?type=public

Conditional Fetch

Fetch disabled

Dependent Fetch

Dependent fetch disabled

Configuration Comparison

Dynamic Key (deduping enabled)

Static Key (auto-update disabled)

How to Use This Demo

• Enter User ID and enable fetch to see conditional fetching in action
• Dependent fetch automatically executes after user data is retrieved
• Toggle sensitive data display to see different cache keys in action
• Check DevTools to observe key states and SWR configuration effects