Zero-Thought Cache Management
A pattern and framework for managing TanStack Query cache keys in React applications. Stop thinking about cache invalidation and focus on building features.
The Query Cache Flow Philosophy
Developers shouldn't think about cache keys at all. Query Cache Flow provides automatic, type-safe cache invalidation.
Why Query Cache Flow?
Consistent Cache Keys
Structured QueryKey type ensures all cache keys follow the same pattern: entity, method, and optional ID.
Automatic Invalidation
Built-in cascade invalidation means mutations automatically invalidate related queries without manual intervention.
CRUD Factory
Generate complete query groups with createQueryGroupCRUD - get all, list, detail, create, update, and remove operations instantly.
Type-Safe
Full TypeScript support with generic types ensures your cache keys are type-checked throughout your application.
Optimistic Updates
Built-in normalize functions provide optimistic UI updates for instant user feedback.
KUBB Integration
Seamlessly wraps KUBB-generated hooks with proper cache keys and invalidation logic.
See It In Action
1. Define Your Query Group
import { createQueryGroupCRUD } from 'src/queries';
// Create a complete CRUD query group for accounts
const accountsQueryGroup = createQueryGroupCRUD<string>('accounts');
// Automatically includes:
// - all: { entity: 'accounts' }
// - list: { entity: 'accounts', method: 'list' }
// - detail: (id) => { entity: 'accounts', method: 'detail', id }
// - create, update, remove with auto-invalidation2. Wrap KUBB-Generated Hooks
import { useGetAccounts as generatedUseAccounts } from './generated';
// Wrap with proper cache key
export const useAccounts = () =>
generatedUseAccounts({
query: {
queryKey: [accountsQueryGroup.list.queryKey]
},
});
// That's it! Cache invalidation is automatic3. Mutations Invalidate Automatically
import { useCreateAccount } from './hooks';
import { invalidateQueriesForKeys } from 'src/queries';
const createAccount = useCreateAccount();
await createAccount.mutateAsync(newAccountData);
// Automatically invalidates the list query
invalidateQueriesForKeys([
accountsQueryGroup.create.invalidates
]);4. Key Injection for Shared Context
import { inyectKeysToQueries } from 'src/queries';
// Add auth context to all query keys in a group
const accountsQueryGroup = inyectKeysToQueries(
createQueryGroupCRUD('accounts'),
{ auth: true }
);
// Now all keys include auth: { entity: 'accounts', method: 'list', auth: true }Ready to Get Started?
Query Cache Flow is a pattern, not a package. Copy the implementation into your project and adapt it to your needs.