--- title: Optimistic Updates with TanStack Query in Vue | daily.dev description: Optimistic updates let you update the UI immediately before the server responds, making interactions feel instantaneous. Using TanStack Query in Vue, the... canonical: https://daily.dev/posts/optimistic-updates-with-tanstack-query-in-vue-auw39lr67 twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Optimistic Updates with TanStack Query in Vue | daily.dev og:description: Optimistic updates let you update the UI immediately before the server responds, making interactions feel instantaneous. Using TanStack Query in Vue, the... og:url: https://daily.dev/posts/optimistic-updates-with-tanstack-query-in-vue-auw39lr67 og:image: https://api.daily.dev/og/posts/aUW39LR67.png og:image:alt: Optimistic Updates with TanStack Query in Vue og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Optimistic Updates with TanStack Query in Vue **[Telerik](https://daily.dev/sources/telerik)** · 7 min read · 3 upvotes · 1 comments ## Summary Optimistic updates let you update the UI immediately before the server responds, making interactions feel instantaneous. Using TanStack Query in Vue, the pattern involves four steps: canceling in-flight queries with cancelQueries to prevent stale data overwrites, snapshotting the current cache for rollback, writing the optimistic value via setQueryData, and reconciling with invalidateQueries in onSettled. The onMutate callback handles the setup, onError triggers rollback using the snapshot passed via context, and onSettled ensures the cache syncs with the server regardless of outcome. Two practical examples are covered: a like button toggling a liked flag and counter, and an inline editable title. The post also honestly addresses when to use optimistic updates (low-stakes toggles, inline edits, high-frequency interactions) versus when to skip them (multi-step forms, destructive actions, slow APIs where the real fix is backend performance). ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### How do I roll back a failed optimistic update in TanStack Query? Return a snapshot of the cache from onMutate, then in onError restore that snapshot from the context argument. TanStack Query passes whatever onMutate returns as the third argument to both onError and onSettled, which is the official way to thread the rollback state through the mutation lifecycle instead of storing it in a component variable. _Developers wiring rollback logic for mutations can find similar TanStack Query patterns curated on daily.dev._ ### Why should I call cancelQueries before writing an optimistic update in TanStack Query? Calling cancelQueries prevents an in-flight background refetch from overwriting the optimistic value with stale server data a moment later. Without it, a refetch triggered by something like window focus can resolve after the optimistic write, causing the UI to flicker back to the old state and potentially causing users to click again, creating a double-fire bug. _Track subtle cache-timing bugs like this by following TanStack Query discussions on daily.dev._ ### Should I always use optimistic updates for mutations in my app? No, optimistic updates should be reserved for interactions like like buttons, favoriting, toggles, or inline edits where instant feedback matters, since a plain spinner-plus-invalidate flow works fine for most forms and CRUD screens. Optimistic updates only improve perceived responsiveness, not actual API performance, so a genuinely slow API should be fixed rather than masked. _Weighing UX tradeoffs like this gets easier when comparing patterns shared by other developers on daily.dev._ ## Community discussion Top comments from developers on daily.dev. **@jenueldev** · 0 upvotes > The rollback snapshot is only half the concurrency story: if multiple mutations touch the same cache entry, an older failure can undo a newer optimistic change. Scoping updates by mutation identity—or serializing conflicting writes—seems worth calling out alongside cancelQueries, especially for inline edits. --- Tags: [#vuejs](https://daily.dev/tags/vuejs), [#tanstack](https://daily.dev/tags/tanstack) [View this post on daily.dev](https://daily.dev/posts/optimistic-updates-with-tanstack-query-in-vue-auw39lr67) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Optimistic Updates with TanStack Query in Vue","url":"https://daily.dev/posts/optimistic-updates-with-tanstack-query-in-vue-auw39lr67","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/optimistic-updates-with-tanstack-query-in-vue-auw39lr67"},"datePublished":"2026-07-15T16:11:39.146Z","dateModified":"2026-09-13T18:27:05.235Z","description":"Optimistic updates let you update the UI immediately before the server responds, making interactions feel instantaneous. Using TanStack Query in Vue, the...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/21e4ff49e8a64618d5ba9ca10f65fae3?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/21e4ff49e8a64618d5ba9ca10f65fae3?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"Telerik","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Telerik","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/5ee6d4bef8ac4f84886d06f5881963e7","url":"https://daily.dev/sources/telerik"},"commentCount":1,"discussionUrl":"https://daily.dev/posts/optimistic-updates-with-tanstack-query-in-vue-auw39lr67","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":3},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":1}],"keywords":"vuejs,tanstack","timeRequired":"PT7M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Telerik","item":"https://daily.dev/sources/telerik"},{"@type":"ListItem","position":3,"name":"Optimistic Updates with TanStack Query in Vue"}]} {"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/optimistic-updates-with-tanstack-query-in-vue-auw39lr67","comment":[{"@type":"Comment","text":"The rollback snapshot is only half the concurrency story: if multiple mutations touch the same cache entry, an older failure can undo a newer optimistic change. Scoping updates by mutation identity—or serializing conflicting writes—seems worth calling out alongside cancelQueries, especially for inline edits.","datePublished":"2026-07-16T02:04:48.475Z","url":"https://daily.dev/posts/aUW39LR67#c-35EfHMdzo","author":{"@type":"Person","name":"Jenuel Oras Ganawed","url":"https://daily.dev/jenueldev","image":"https://media.daily.dev/image/upload/s--BadmiNyj--/f_auto/v1787625077/avatars/avatar_JJtZr4Sjm?_a=BAMAMicg0"}}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/optimistic-updates-with-tanstack-query-in-vue-auw39lr67#faq","mainEntity":[{"@type":"Question","name":"How do I roll back a failed optimistic update in TanStack Query?","acceptedAnswer":{"@type":"Answer","text":"Return a snapshot of the cache from onMutate, then in onError restore that snapshot from the context argument. TanStack Query passes whatever onMutate returns as the third argument to both onError and onSettled, which is the official way to thread the rollback state through the mutation lifecycle instead of storing it in a component variable. Developers wiring rollback logic for mutations can find similar TanStack Query patterns curated on daily.dev."}},{"@type":"Question","name":"Why should I call cancelQueries before writing an optimistic update in TanStack Query?","acceptedAnswer":{"@type":"Answer","text":"Calling cancelQueries prevents an in-flight background refetch from overwriting the optimistic value with stale server data a moment later. Without it, a refetch triggered by something like window focus can resolve after the optimistic write, causing the UI to flicker back to the old state and potentially causing users to click again, creating a double-fire bug. Track subtle cache-timing bugs like this by following TanStack Query discussions on daily.dev."}},{"@type":"Question","name":"Should I always use optimistic updates for mutations in my app?","acceptedAnswer":{"@type":"Answer","text":"No, optimistic updates should be reserved for interactions like like buttons, favoriting, toggles, or inline edits where instant feedback matters, since a plain spinner-plus-invalidate flow works fine for most forms and CRUD screens. Optimistic updates only improve perceived responsiveness, not actual API performance, so a genuinely slow API should be fixed rather than masked. Weighing UX tradeoffs like this gets easier when comparing patterns shared by other developers on daily.dev."}}]} ```