docs(react): add holistic useQuery and useMutation lifecycle example

[OluwaseunOlajide]

🎯 Changes

The primary useMutation example in the React mutations guide introduces the hook in isolation without demonstrating how to synchronize the state with useQuery.

This creates friction for developers learning the library, as they immediately need to know how to refresh a list after a mutation. I replaced the isolated axios.post snippet with a holistic TodoApp example that demonstrates the complete, real-world lifecycle: fetching data with useQuery, mutating it, and automatically triggering a refetch via queryClient.invalidateQueries.

✅ Checklist

• I have followed the steps in the Contributing guide.
• I have tested this code locally with pnpm run test:pr. (N/A - Docs only change)

🚀 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

• Documentation
  • Updated the “add a new todo” example to show a more complete data flow, including loading existing items, creating a new todo, and refreshing the list after saving.
  • The example UI now includes a loading state, displays current todos, and disables the create button while the request is in progress.

[coderabbitai]

📝 Walkthrough

Walkthrough

The React mutations guide example now fetches todos with useQuery, posts new todos with useMutation, invalidates the ['todos'] query on success, renders loading and list states, and updates the create button during pending mutations.

Changes

React mutations guide example

Layer / File(s)	Summary
Fetch todos and invalidate on success docs/framework/react/guides/mutations.md	The example adds useQuery and useQueryClient, fetches todos, and invalidates ['todos'] after mutation success.
Loading state and todo list docs/framework/react/guides/mutations.md	The rendered output now shows Loading todos... while the query is loading and displays the fetched todo titles.
Create button pending state docs/framework/react/guides/mutations.md	The button is disabled while the mutation is pending, switches text between Adding... and Create Todo, and submits { title: 'Do Laundry' }.

🎯 1 (Trivial) | ⏱️ ~4 minutes

🐇 I hop through todos, soft and bright,

Queries fetch, mutations write.
A carrot-click, a loading glow,
Then updated todos softly grow.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly names the docs update and the main useQuery/useMutation lifecycle example.
Description check	✅ Passed	The description follows the template and includes changes, checklist, and release impact sections.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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

[coderabbitai]

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@docs/framework/react/guides/mutations.md`:
- Around line 20-23: The todo query in the useQuery example currently only
handles loading and data, so a rejected /todos request is indistinguishable from
an empty list. Update the mutations guide examples that use useQuery and render
the todos list to include an isError branch alongside isLoading, so failures are
shown explicitly instead of falling through to an empty <ul>; use the existing
todos query setup to locate the affected snippets.
- Around line 28-30: The onSuccess handler in the mutation example is not
returning the async invalidateQueries call, so the mutation can settle before
the refetch finishes. Update the onSuccess callback in the mutation example to
return the queryClient.invalidateQueries call for the ['todos'] query key, so
the mutation stays pending until the refreshed list has been fetched.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: c74e7458-56a9-4bc8-83d4-790dbbf100be

📥 Commits

Reviewing files that changed from the base of the PR and between fcdcf8a and c59c009.

📒 Files selected for processing (1)

• docs/framework/react/guides/mutations.md