Skip to content
qt

Basics

Plain useQuery with meta.tags

Attach tags to any query via meta. When the server invalidates a matching tag, the query refetches automatically via SSE. No manual invalidateQueries needed.

What to watch for

  • ▶Add a todo — the list refreshes with a green glow
  • ▶No onSuccess handler, no invalidateQueries call — the server does it
  • ▶Open another browser tab — it also updates
View Source

Current todos

  • No todos yet.

Mutate from a server function

The server function calls invalidateTags — no client-side invalidation code needed.

Without query-tags
const { data } = useQuery({
  queryKey: ['todos'],
  queryFn: fetchTodos,
})

// After mutation, you must manually:
const addTodo = useMutation({
  mutationFn: createTodo,
  onSuccess: () => {
    queryClient.invalidateQueries({ queryKey: ['todos'] })
    // Forget one? Stale data.
    // Add a new query? Update every mutation.
  }
})
With query-tags
const { data } = useQuery({
  queryKey: ['todos'],
  queryFn: fetchTodos,
  meta: { tags: [appTags.todos.list()] }, // <-- one line
})

// Server mutation invalidates automatically.
// No onSuccess. No invalidateQueries. Done.