Tags → auto queryKey
No explicit key — derived from tag values
Resolved queryKey
["[\"todos\"]"]Basics
Reduce boilerplate with withTags
The withTags helper merges tags into meta.tags and optionally derives a stable queryKey from the tag values — zero manual key management.
What to watch for
- ▶Both cards share the same tag but have different queryKeys
- ▶Add a todo — both flash green simultaneously
- ▶The auto-generated queryKey is derived from the tag values
Before and after
Before — manual wiring
const opts = {
queryKey: ["todos"],
queryFn: () => getTodosServerFn(),
meta: {
tags: [appTags.todos.list()],
},
};After — withTags
const opts = withTags(
{ queryFn: () => getTodosServerFn() },
[appTags.todos.list()],
);
// queryKey auto-derived from tags!Explicit key + tags
Key: ["basics", "withtags", "custom"]
Resolved queryKey
["basics","withtags","custom"]Trigger invalidation
Both cards share the same tag — they both flash green even with different query keys.