docs: fix missing comma in useMutation example to prevent syntax errors by wo-o29 · Pull Request #9593 · TanStack/query

wo-o29 · 2025-08-26T06:01:51Z

Summary

Fixed a missing comma in the useMutation example's options object:

useMutation({
  ...groupMutationOptions(),
  onSuccess: () => queryClient.invalidateQueries({ queryKey: ['groups'] })
})

The comma after the spread operator was missing, which would cause a syntax error if users copy and paste the example.

Changes

Added the missing comma after the spread syntax to ensure valid JavaScript syntax.
This prevents runtime or compilation errors for users following the example.
Improves overall accuracy and reliability of the documentation.

This change maintains consistency with JavaScript object literal syntax rules and enhances developer experience by providing error-free examples.

Summary by CodeRabbit

Documentation
- Fixed a React + TypeScript example in the docs so the mutation options snippet compiles and can be copy-pasted without edits. No behavior or API changes.
Style
- Minor formatting and punctuation improvement in the example for clarity and consistency.

coderabbitai · 2025-08-26T06:01:58Z

Walkthrough

A documentation snippet in docs/framework/react/typescript.md was updated to add trailing commas after the spread and the onSuccess property in a useMutation options object. No runtime logic, API, or behavior changes.

Changes

Cohort / File(s)	Change Summary
Docs: React TypeScript snippet `docs/framework/react/typescript.md`	Added trailing commas after `...groupMutationOptions()` and after the `onSuccess` property in a `useMutation({ ... })` example to correct object literal punctuation. No functional changes.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

Poem

I nibbled commas, crisp and slight,
A trailing curl to set it right.
In docs I hop with tidy cheer,
No APIs disturbed this year.
Tap tap—syntax neat, hurrah! 🐇✨

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

💡 Knowledge Base configuration:

MCP integration is disabled by default for public repositories
Jira integration is disabled by default for public repositories
Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between 19f7838 and 999e531.

📒 Files selected for processing (1)

docs/framework/react/typescript.md (1 hunks)

🚧 Files skipped from review as they are similar to previous changes (1)

docs/framework/react/typescript.md

✨ Finishing Touches

🧪 Generate unit tests

Create PR with unit tests
Post copyable unit tests in a comment

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

Review comments: Directly reply to a review comment made by CodeRabbit. Example:
- I pushed a fix in commit <commit_id>, please review it.
- Open a follow-up GitHub issue for this discussion.
Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query.
PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
- @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

CodeRabbit Commands (Invoked using PR/Issue comments)

Type @coderabbitai help to get the list of available commands.

Other keywords and placeholders

Add @coderabbitai ignore or @coderabbit ignore anywhere in the PR description to prevent this PR from being reviewed.
Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (`.coderabbit.yaml`)

You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
Please see the configuration documentation for more information.
If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Status, Documentation and Community

Visit our Status Page to check the current availability of CodeRabbit.
Visit our Documentation for detailed information on how to use CodeRabbit.
Join our Discord Community to get help, request features, and share feedback.
Follow us on X/Twitter for updates and announcements.

coderabbitai

Actionable comments posted: 0

🧹 Nitpick comments (1)

docs/framework/react/typescript.md (1)
252-255: Comma after spread correctly fixes the object literal syntax — LGTM

Without this comma, the snippet would throw a parsing error because onSuccess wouldn’t be separated from the spread properties. The change is correct and improves copy-paste safety of the docs.

For consistency with common Prettier settings on multi-line objects, consider adding a trailing comma after onSuccess as well:
 useMutation({
   ...groupMutationOptions(),
-  onSuccess: () => queryClient.invalidateQueries({ queryKey: ['groups'] })
+  onSuccess: () => queryClient.invalidateQueries({ queryKey: ['groups'] }),
 })

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

💡 Knowledge Base configuration:

MCP integration is disabled by default for public repositories
Jira integration is disabled by default for public repositories
Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between a1b1279 and 19f7838.

📒 Files selected for processing (1)

docs/framework/react/typescript.md (1 hunks)

lukeheckman · 2025-08-27T21:56:08Z

This LGTM

nx-cloud · 2025-08-30T05:22:30Z

View your CI Pipeline Execution ↗ for commit 999e531

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

☁️ Nx Cloud last updated this comment at 2025-08-30 05:27:59 UTC

pkg-pr-new · 2025-08-30T05:27:30Z

More templates

@tanstack/angular-query-devtools-experimental

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

@tanstack/angular-query-experimental

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

@tanstack/eslint-plugin-query

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

@tanstack/query-async-storage-persister

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

@tanstack/query-broadcast-client-experimental

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

@tanstack/query-core

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

@tanstack/query-devtools

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

@tanstack/query-persist-client-core

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

@tanstack/query-sync-storage-persister

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

@tanstack/react-query

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

@tanstack/react-query-devtools

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

@tanstack/react-query-next-experimental

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

@tanstack/react-query-persist-client

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

@tanstack/solid-query

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

@tanstack/solid-query-devtools

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

@tanstack/solid-query-persist-client

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

@tanstack/svelte-query

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

@tanstack/svelte-query-devtools

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

@tanstack/svelte-query-persist-client

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

@tanstack/vue-query

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

@tanstack/vue-query-devtools

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

commit: 999e531

docs: add missing comma in useMutation example options object

19f7838

github-actions bot added the documentation Improvements or additions to documentation label Aug 26, 2025

coderabbitai bot reviewed Aug 26, 2025

View reviewed changes

manudeli approved these changes Aug 30, 2025

View reviewed changes

ci: apply automated fixes

999e531

manudeli merged commit ad0ca9f into TanStack:main Aug 30, 2025
6 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

docs: fix missing comma in useMutation example to prevent syntax errors#9593

docs: fix missing comma in useMutation example to prevent syntax errors#9593
manudeli merged 2 commits intoTanStack:mainfrom
wo-o29:docs/fix-useMutation-comma-in-example

wo-o29 commented Aug 26, 2025 •

edited by coderabbitai bot

Loading

Uh oh!

coderabbitai bot commented Aug 26, 2025 •

edited

Loading

Chat

Support

CodeRabbit Commands (Invoked using PR/Issue comments)

Other keywords and placeholders

CodeRabbit Configuration File (`.coderabbit.yaml`)

Status, Documentation and Community

Uh oh!

coderabbitai bot left a comment

Uh oh!

lukeheckman commented Aug 27, 2025

Uh oh!

nx-cloud bot commented Aug 30, 2025 •

edited

Loading

Uh oh!

pkg-pr-new bot commented Aug 30, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

wo-o29 commented Aug 26, 2025 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Changes

Summary by CodeRabbit

Uh oh!

coderabbitai bot commented Aug 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Poem

Chat

Support

CodeRabbit Commands (Invoked using PR/Issue comments)

Other keywords and placeholders

CodeRabbit Configuration File (.coderabbit.yaml)

Status, Documentation and Community

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

lukeheckman commented Aug 27, 2025

Uh oh!

nx-cloud bot commented Aug 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

pkg-pr-new bot commented Aug 30, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

wo-o29 commented Aug 26, 2025 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Aug 26, 2025 •

edited

Loading

CodeRabbit Configuration File (`.coderabbit.yaml`)

nx-cloud bot commented Aug 30, 2025 •

edited

Loading