\n {user.status === 'loading' &&
\n )\n}\n```\n\n`user.refresh()` calls `userQuery.invalidate(userId)` internally — only that one cache slot is updated. Other `UserCard`s with different `userId`s are unaffected.\n\n---\n\n### 3 · Global invalidation after mutation\n\nAfter saving a record, invalidate the whole query so every component refetches.\n\n```ts\nasync function saveUser(user: User) {\n await fetch('/api/users', { method: 'POST', body: JSON.stringify(user) })\n\n // Refetch all cached users in every mounted component at once\n invalidate(userQuery)\n}\n```\n\n---\n\n### 4 · Shared optimistic updates with `setData`\n\nAll components subscribed to the same key update immediately.\n\n```tsx\nfunction UserNameEditor({ userId }: { userId: number }) {\n const user = useQuery(userQuery, [userId])\n\n const rename = async (name: string) => {\n if (user.status !== 'ok') return\n\n // optimistic UI\n user.setData({ ...user.data, name })\n\n try {\n await fetch(`/api/users/${userId}`, {\n method: 'PATCH',\n body: JSON.stringify({ name }),\n })\n user.refresh() // reconcile with server\n } catch {\n user.refresh() // rollback by refetching\n }\n }\n\n return \n}\n```\n\n---\n\n### 5 · Multi-argument queries\n\nArguments are spread, not wrapped — the type system enforces them at the call site.\n\n```ts\nconst postsQuery = createQuery(\n 'posts',\n (userId: number, page: number) =>\n fetch(`/api/users/${userId}/posts?page=${page}`).then(r => r.json())\n)\n\n// In a component:\nconst posts = useQuery(postsQuery, [userId, page])\n```\n\n---\n\n### 6 · Object arguments (stable key)\n\nObject key order is normalized, so re-renders with structurally equal objects don't trigger a new fetch.\n\n```ts\nconst searchQuery = createQuery('search', (filter: { q: string; page: number }) =>\n fetch(`/api/search?q=${filter.q}&page=${filter.page}`).then(r => r.json())\n)\n\n// These are the same cache entry:\nsearchQuery({ q: 'hello', page: 1 })\nsearchQuery({ page: 1, q: 'hello' })\n```\n\n```tsx\nfunction SearchResults() {\n const [filter, setFilter] = useState({ q: '', page: 1 })\n const results = useQuery(searchQuery, [filter])\n\n return (\n <>\n {user.data.name} — {user.data.role}
}\n {user.status === 'error' &&Error: {user.error.message}
}\n\n \n{r.title}
)}\n \n )\n}\n```\n\n---\n\n### 7 · Dependent queries\n\nLoad a user, then load their posts only once the userId is known. Switching back to a previously selected user is instant — both caches are warm.\n\n```tsx\nfunction UserDashboard() {\n const [userId, setUserId] = useState(1)\n const user = useQuery(userQuery, [userId])\n\n return (\n\n
\n )\n}\n\nfunction PostList({ userId }: { userId: number }) {\n const posts = useQuery(postsQuery, [userId])\n if (posts.status === 'loading') return Failed to load posts
\n return (\n- \n {posts.data.map(p =>
- {p.title} )}\n
\n {weather.status === 'loading' &&
\n )\n}\n```\n\n---\n\n### 9 · Using the cache outside React\n\n`createQuery` and `invalidate` are plain functions — no React required.\n\n```ts\nimport { createQuery, invalidate } from 'state-resource'\n\nconst configQuery = createQuery('config', () =>\n fetch('/api/config').then(r => r.json())\n)\n\n// Warm the cache at app startup\nawait configQuery()\n\n// Later, after config changes on the server:\ninvalidate(configQuery)\n```\n\n---\n\n### 10 · Clearing the cache\n\nUse `query.clear()` to wipe all entries — useful on logout or when switching accounts.\n\n```ts\nasync function logout() {\n await fetch('/api/logout', { method: 'POST' })\n\n // Purge all cached data\n userQuery.clear()\n postsQuery.clear()\n settingsQuery.clear()\n}\n```\n\n---\n\n### 11 · Manual filter on already-fetched data\n\nYou can derive local view state from remote data without extra context stores.\n\n```tsx\nfunction FilteredUsers() {\n const [search, setSearch] = useState('')\n const users = useQuery(usersQuery, [{ search: '' }])\n\n const applyLocalFilter = () => {\n const needle = search.toLowerCase().trim()\n users.setData(prev => (prev ?? []).filter(user => user.name.toLowerCase().includes(needle)))\n }\n\n return (\n {weather.data.temp}°C — {weather.data.condition}
}\n {weather.status === 'error' && (\n <>\nError: {weather.error.message}
\n \n \n )}\n\n setSearch(e.target.value)} />\n \n \n
\n )\n}\n```\n\n---\n\n## TypeScript\n\nFully typed. Arguments and return types flow through automatically.\n\n```ts\nconst userQuery = createQuery('users', async (id: number) => {\n const res = await fetch(`/api/users/${id}`)\n return res.json() as Promise<{ id: number; name: string }>\n})\n\n// TypeScript knows: data is { id: number; name: string }\nconst user = useQuery(userQuery, [1])\nif (user.status === 'ok') {\n console.log(user.data.name) // ✓\n}\n\n// TypeScript enforces args — this won't compile:\nuseQuery(userQuery, ['not-a-number']) // ✗ Argument of type 'string' is not assignable to type 'number'\n```\n\n---\n\n## Exports\n\n```ts\nimport {\n createQuery,\n invalidate,\n useQuery,\n type Query,\n type QueryState,\n type Snapshot,\n} from 'state-resource'\n```\n\n---\n\n## How it works\n\n- **Promise cache**: `Map