docs(example): batching#11008
Conversation
|
View your CI Pipeline Execution ↗ for commit cef22bb
☁️ Nx Cloud last updated this comment at |
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
📝 WalkthroughWalkthroughAdds a new ChangesReact Batching Example
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Poem
🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (2 warnings)
✅ Passed checks (3 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Comment |
🚀 Changeset Version PreviewNo changeset entries found. Merging this PR will not cause a version bump for any packages. |
|
Review the following changes in direct dependencies. Learn more about Socket for GitHub.
|
size-limit report 📦
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (1)
examples/react/batching/package.json (1)
15-21: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winAlign the React type packages with React 19.
@types/reactand@types/react-domare still on 18.x while the runtime is React 19, so this example type-checks against an older API surface. Update both to 19.x to keep the scaffold consistent.🤖 Prompt for 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. In `@examples/react/batching/package.json` around lines 15 - 21, The example’s React type packages are mismatched with the runtime, so update the devDependencies in package.json to use the React 19 type packages for both `@types/react` and `@types/react-dom`. Keep the versions aligned with the existing React and ReactDOM 19 entries so the batching example type-checks against the same API surface as the runtime.
🤖 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 `@examples/react/batching/.gitignore`:
- Around line 11-13: The batching example is ignoring the wrong Vite build
output directory, so generated artifacts can still be committed. Update the
ignore entry in this example’s .gitignore to match the actual default output
from the Vite setup used by batching, and verify it aligns with vite.config.ts
and the example’s build output path rather than /build.
In `@examples/react/batching/index.html`:
- Line 9: The document title for the batching demo is still using the generic
Basic Example App text, which makes the browser tab misleading. Update the title
in the HTML document’s title element so it matches the batching example naming
used by this demo, keeping the change localized to the example’s main HTML entry
point.
In `@examples/react/batching/src/index.tsx`:
- Around line 54-55: The character card is displaying the React Query state
instead of the API-provided character status. In the component that renders the
status text, update the `character.status` reference to use
`character.data.status` so the UI shows the actual character status; keep the
change localized to the status rendering in the React batching example.
- Around line 92-107: The validation flow in the React batching example leaves
stale `ids` in state when parsing fails, so the `onClick` handler for the “Load
characters” button can still use the last valid value even while `error` is
shown. Update the input validation logic around the `setIds`, `setIdsToLoad`,
and `setError` state updates so invalid input either clears the pending IDs or
prevents loading until the value is valid, ensuring the button action cannot
submit stale IDs after a failed parse.
---
Nitpick comments:
In `@examples/react/batching/package.json`:
- Around line 15-21: The example’s React type packages are mismatched with the
runtime, so update the devDependencies in package.json to use the React 19 type
packages for both `@types/react` and `@types/react-dom`. Keep the versions aligned
with the existing React and ReactDOM 19 entries so the batching example
type-checks against the same API surface as the runtime.
🪄 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: 675ebabf-0796-4c6e-8b6e-71e2860164fd
⛔ Files ignored due to path filters (2)
examples/react/batching/public/emblem-light.svgis excluded by!**/*.svgpnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (9)
examples/react/batching/.gitignoreexamples/react/batching/README.mdexamples/react/batching/eslint.config.jsexamples/react/batching/index.htmlexamples/react/batching/package.jsonexamples/react/batching/src/character-loader.tsexamples/react/batching/src/index.tsxexamples/react/batching/tsconfig.jsonexamples/react/batching/vite.config.ts
| # production | ||
| /build | ||
|
|
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
Ignore Vite’s actual build output directory.
Lines 11-13 ignore /build, but examples/react/batching/vite.config.ts does not override Vite’s default outDir, so this example will emit dist/ instead. As written, generated artifacts can be committed accidentally.
Suggested fix
# production
-/build
+/dist📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| # production | |
| /build | |
| # production | |
| /dist | |
🤖 Prompt for 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.
In `@examples/react/batching/.gitignore` around lines 11 - 13, The batching
example is ignoring the wrong Vite build output directory, so generated
artifacts can still be committed. Update the ignore entry in this example’s
.gitignore to match the actual default output from the Vite setup used by
batching, and verify it aligns with vite.config.ts and the example’s build
output path rather than /build.
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | ||
| <meta name="theme-color" content="#000000" /> | ||
|
|
||
| <title>TanStack Query React Basic Example App</title> |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
Update the document title to match the batching example.
Line 9 still says “Basic Example App”, which looks copied from another example and makes the browser tab misleading for this demo.
Suggested fix
- <title>TanStack Query React Basic Example App</title>
+ <title>TanStack Query React Batching Example App</title>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <title>TanStack Query React Basic Example App</title> | |
| <title>TanStack Query React Batching Example App</title> |
🤖 Prompt for 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.
In `@examples/react/batching/index.html` at line 9, The document title for the
batching demo is still using the generic Basic Example App text, which makes the
browser tab misleading. Update the title in the HTML document’s title element so
it matches the batching example naming used by this demo, keeping the change
localized to the example’s main HTML entry point.
| <p style={{ marginTop: 0, marginBottom: 2 }}> | ||
| Status: {character.status} |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Render the character's status, not the query status.
character.status here is the React Query state (pending / error / success), so every loaded card will show success instead of the API's character status. Use character.data.status for this field.
Suggested fix
<p style={{ marginTop: 0, marginBottom: 2 }}>
- Status: {character.status}
+ Status: {character.data.status}
</p>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <p style={{ marginTop: 0, marginBottom: 2 }}> | |
| Status: {character.status} | |
| <p style={{ marginTop: 0, marginBottom: 2 }}> | |
| Status: {character.data.status} |
🤖 Prompt for 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.
In `@examples/react/batching/src/index.tsx` around lines 54 - 55, The character
card is displaying the React Query state instead of the API-provided character
status. In the component that renders the status text, update the
`character.status` reference to use `character.data.status` so the UI shows the
actual character status; keep the change localized to the status rendering in
the React batching example.
| if (allValid) { | ||
| setIds(ids) | ||
| setError('') | ||
| } else { | ||
| setError('Invalid.. only use numbers and comma') | ||
| } | ||
| }} | ||
| /> | ||
| </div> | ||
|
|
||
| {error ? <h3 style={{ color: 'red' }}>{error}</h3> : null} | ||
|
|
||
| <button | ||
| type="button" | ||
| onClick={() => { | ||
| setIdsToLoad(ids) |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
Clear or block stale IDs after validation fails.
When parsing fails, ids keeps the last valid value. Clicking Load characters after an invalid edit will therefore fetch stale IDs even though the UI is showing an error.
Suggested fix
if (allValid) {
setIds(ids)
setError('')
} else {
+ setIds([])
setError('Invalid.. only use numbers and comma')
}
@@
<button
type="button"
+ disabled={!!error || ids.length === 0}
onClick={() => {
setIdsToLoad(ids)
}}
>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| if (allValid) { | |
| setIds(ids) | |
| setError('') | |
| } else { | |
| setError('Invalid.. only use numbers and comma') | |
| } | |
| }} | |
| /> | |
| </div> | |
| {error ? <h3 style={{ color: 'red' }}>{error}</h3> : null} | |
| <button | |
| type="button" | |
| onClick={() => { | |
| setIdsToLoad(ids) | |
| if (allValid) { | |
| setIds(ids) | |
| setError('') | |
| } else { | |
| setIds([]) | |
| setError('Invalid.. only use numbers and comma') | |
| } | |
| }} | |
| /> | |
| </div> | |
| {error ? <h3 style={{ color: 'red' }}>{error}</h3> : null} | |
| <button | |
| type="button" | |
| disabled={!!error || ids.length === 0} | |
| onClick={() => { | |
| setIdsToLoad(ids) |
🤖 Prompt for 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.
In `@examples/react/batching/src/index.tsx` around lines 92 - 107, The validation
flow in the React batching example leaves stale `ids` in state when parsing
fails, so the `onClick` handler for the “Load characters” button can still use
the last valid value even while `error` is shown. Update the input validation
logic around the `setIds`, `setIdsToLoad`, and `setError` state updates so
invalid input either clears the pending IDs or prevents loading until the value
is valid, ensuring the button action cannot submit stale IDs after a failed
parse.
This reverts commit 4d408da.
2 participants
Summary by CodeRabbit
.gitignorefor common local/build/test artifacts.