test({react,preact}-query/useMutation): add optimistic update tests with success and rollback on error by sukvvon · Pull Request #10492 · TanStack/query

sukvvon · 2026-04-13T19:29:56Z

🎯 Changes

Add 2 runtime tests for useMutation optimistic update pattern in both react-query and preact-query:
- should support optimistic update on success: onMutate removes item from UI immediately, mutation succeeds, onSuccess confirms deletion
- should support optimistic update and rollback on error: onMutate removes item from UI immediately, mutation fails, onError restores previous state using context (not onSuccess)
Both tests verify onMutate → context → onSuccess/onError callback flow with onSuccess included for completeness

✅ Checklist

I have followed the steps in the Contributing guide.
I have tested this code locally with pnpm run test:pr.

🚀 Release Impact

This change affects published code, and I have generated a changeset.
This change is docs/CI/dev-only (no release).

Summary by CodeRabbit

Tests
- Added test coverage for optimistic deletion behavior in mutation flows, verifying immediate UI removal on mutate and confirmation on success.
- Added tests for error paths that validate rollback/restoration of state and appropriate error messaging when mutations fail.

coderabbitai · 2026-04-13T19:30:30Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: a7628da9-7307-44ce-841d-f48018d94340

📥 Commits

Reviewing files that changed from the base of the PR and between 51db538 and 5d4d413.

📒 Files selected for processing (2)

packages/preact-query/src/__tests__/useMutation.test.tsx
packages/react-query/src/__tests__/useMutation.test.tsx

✅ Files skipped from review due to trivial changes (2)

packages/preact-query/src/tests/useMutation.test.tsx
packages/react-query/src/tests/useMutation.test.tsx

📝 Walkthrough

Walkthrough

Added tests in two packages that validate optimistic updates via onMutate and subsequent reconciliation or rollback via onSuccess and onError in success and error scenarios.

Changes

Cohort / File(s)	Summary
Mutation Hook Tests `packages/preact-query/src/__tests__/useMutation.test.tsx`, `packages/react-query/src/__tests__/useMutation.test.tsx`	Added tests that assert immediate optimistic state removal in `onMutate`, then verify final state and handlers (`onSuccess` or `onError`) after advancing fake timers; includes a failing mutation case with `retry: false` and rollback from returned context.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Poem

🐰 I nibbled code and ran the test,

Optimistic leaps — then calm or jest.
If errors hop, I stitch the seam,
Else celebrate the vanished theme.
🥕✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main change: adding optimistic update tests for useMutation with success and error rollback scenarios in both react-query and preact-query packages.
Description check	✅ Passed	The description follows the required template with all sections completed: Changes section details the two new tests, Checklist items are marked appropriately, and Release Impact correctly identifies this as dev-only with no changeset needed.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

Create stacked PR
Commit on current branch

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch test/react-preact-query-useMutation-optimistic-update

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

nx-cloud · 2026-04-13T19:30:30Z

View your CI Pipeline Execution ↗ for commit 5d4d413

Command	Status	Duration	Result
`nx affected --targets=test:sherif,test:knip,tes...`	✅ Succeeded	1m 43s	View ↗
`nx run-many --target=build --exclude=examples/*...`	✅ Succeeded	1s	View ↗

☁️ Nx Cloud last updated this comment at 2026-04-13 19:40:56 UTC

github-actions · 2026-04-13T19:30:49Z

🚀 Changeset Version Preview

No changeset entries found. Merging this PR will not cause a version bump for any packages.

pkg-pr-new · 2026-04-13T19:32:17Z

More templates

@tanstack/angular-query-experimental

npm i https://pkg.pr.new/@tanstack/angular-query-experimental@10492

@tanstack/eslint-plugin-query

npm i https://pkg.pr.new/@tanstack/eslint-plugin-query@10492

@tanstack/preact-query

npm i https://pkg.pr.new/@tanstack/preact-query@10492

@tanstack/preact-query-devtools

npm i https://pkg.pr.new/@tanstack/preact-query-devtools@10492

@tanstack/preact-query-persist-client

npm i https://pkg.pr.new/@tanstack/preact-query-persist-client@10492

@tanstack/query-async-storage-persister

npm i https://pkg.pr.new/@tanstack/query-async-storage-persister@10492

@tanstack/query-broadcast-client-experimental

npm i https://pkg.pr.new/@tanstack/query-broadcast-client-experimental@10492

@tanstack/query-core

npm i https://pkg.pr.new/@tanstack/query-core@10492

@tanstack/query-devtools

npm i https://pkg.pr.new/@tanstack/query-devtools@10492

@tanstack/query-persist-client-core

npm i https://pkg.pr.new/@tanstack/query-persist-client-core@10492

@tanstack/query-sync-storage-persister

npm i https://pkg.pr.new/@tanstack/query-sync-storage-persister@10492

@tanstack/react-query

npm i https://pkg.pr.new/@tanstack/react-query@10492

@tanstack/react-query-devtools

npm i https://pkg.pr.new/@tanstack/react-query-devtools@10492

@tanstack/react-query-next-experimental

npm i https://pkg.pr.new/@tanstack/react-query-next-experimental@10492

@tanstack/react-query-persist-client

npm i https://pkg.pr.new/@tanstack/react-query-persist-client@10492

@tanstack/solid-query

npm i https://pkg.pr.new/@tanstack/solid-query@10492

@tanstack/solid-query-devtools

npm i https://pkg.pr.new/@tanstack/solid-query-devtools@10492

@tanstack/solid-query-persist-client

npm i https://pkg.pr.new/@tanstack/solid-query-persist-client@10492

@tanstack/svelte-query

npm i https://pkg.pr.new/@tanstack/svelte-query@10492

@tanstack/svelte-query-devtools

npm i https://pkg.pr.new/@tanstack/svelte-query-devtools@10492

@tanstack/svelte-query-persist-client

npm i https://pkg.pr.new/@tanstack/svelte-query-persist-client@10492

@tanstack/vue-query

npm i https://pkg.pr.new/@tanstack/vue-query@10492

@tanstack/vue-query-devtools

npm i https://pkg.pr.new/@tanstack/vue-query-devtools@10492

commit: 5d4d413

github-actions · 2026-04-13T19:32:26Z

size-limit report 📦

Path	Size
react full	11.99 KB (0%)
react minimal	9.02 KB (0%)

…ith success and rollback on error

github-actions bot added package: react-query package: preact-query labels Apr 13, 2026

sukvvon self-assigned this Apr 13, 2026

test({react,preact}-query/useMutation): add optimistic update tests w…

5d4d413

…ith success and rollback on error

sukvvon force-pushed the test/react-preact-query-useMutation-optimistic-update branch from 51db538 to 5d4d413 Compare April 13, 2026 19:38

sukvvon merged commit d7643b5 into main Apr 13, 2026
8 checks passed

sukvvon deleted the test/react-preact-query-useMutation-optimistic-update branch April 13, 2026 19:41

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

test({react,preact}-query/useMutation): add optimistic update tests with success and rollback on error#10492

test({react,preact}-query/useMutation): add optimistic update tests with success and rollback on error#10492
sukvvon merged 1 commit intomainfrom
test/react-preact-query-useMutation-optimistic-update

sukvvon commented Apr 13, 2026 •

edited by coderabbitai bot

Loading

Uh oh!

coderabbitai bot commented Apr 13, 2026 •

edited

Loading

Walkthrough

Changes

Estimated code review effort

Poem

❌ Failed checks (1 warning)

Uh oh!

nx-cloud bot commented Apr 13, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Apr 13, 2026 •

edited

Loading

Uh oh!

pkg-pr-new bot commented Apr 13, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Apr 13, 2026 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

sukvvon commented Apr 13, 2026 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🎯 Changes

✅ Checklist

🚀 Release Impact

Summary by CodeRabbit

Uh oh!

coderabbitai bot commented Apr 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Poem

❌ Failed checks (1 warning)

Uh oh!

nx-cloud bot commented Apr 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Apr 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🚀 Changeset Version Preview

Uh oh!

pkg-pr-new bot commented Apr 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Apr 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

size-limit report 📦

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

sukvvon commented Apr 13, 2026 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Apr 13, 2026 •

edited

Loading

nx-cloud bot commented Apr 13, 2026 •

edited

Loading

github-actions bot commented Apr 13, 2026 •

edited

Loading

pkg-pr-new bot commented Apr 13, 2026 •

edited

Loading

github-actions bot commented Apr 13, 2026 •

edited

Loading