fix(examples): guard missing filmId param in react star-wars example

[grzdev]

What

Adds a safety guard for a missing filmId route parameter in the React Star Wars example.

Why

The example previously used a non-null assertion:

const filmId = params.filmId!


<!-- This is an auto-generated comment: release notes by coderabbit.ai -->

## Summary by CodeRabbit

* **Bug Fixes**
  * Added validation and improved error handling for invalid film IDs in the Star Wars example.

* **Refactor**
  * Enhanced type safety and code structure in the example application.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

[changeset-bot]

⚠️ No Changeset found

Latest commit: 098a976

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[coderabbitai]

📝 Walkthrough

Walkthrough

A refactoring of Film.tsx that destructures filmId from useParams(), adds validation for invalid film IDs, and improves type safety by changing the characters map parameter type from any to string.

Changes

Cohort / File(s)	Summary
Type Safety & Validation Enhancement examples/react/star-wars/src/Film.tsx	Destructure filmId directly from useParams with early validation guard; upgrade characters map callback parameter type from any to string for improved type safety.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Poem

🐰 A rabbit hops through React with glee,
From any types to string so free,
The filmId guards are now in place,
Type safety wins the coding race! 🌟

🚥 Pre-merge checks | ✅ 1 | ❌ 2

❌ Failed checks (2 warnings)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The description is incomplete. It lacks the required checklist items and release impact section from the template, and the code example is cut off mid-sentence.	Complete the description with the full 'What' section, add all checklist items, and include the 'Release Impact' section to match the required template.
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 (1 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main change: adding a guard for a missing filmId parameter in the react star-wars example.

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

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

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

Tip

Issue Planner is now in beta. Read the docs and try it out! Share your feedback on Discord.

---

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 and usage tips.}

[coderabbitai]

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

examples/react/star-wars/src/Film.tsx (1)

8-14: ⚠️ Potential issue | 🔴 Critical

Rules of Hooks violation: early return before useQuery call.

The conditional return on line 8 causes useQuery (line 12) to be skipped on some renders, violating React's Rules of Hooks. This will produce a runtime error if filmId transitions between present and absent.

Move useQuery above the guard and use the enabled option instead:

Proposed fix

  const { filmId } = useParams()

+  const { data, status } = useQuery({
+    queryKey: ['film', filmId],
+    queryFn: () => getFilm(filmId!),
+    enabled: !!filmId,
+  })
+
   if (!filmId) {
     return <p>Invalid film ID</p>
   }

-  const { data, status } = useQuery({
-    queryKey: ['film', filmId],
-    queryFn: () => getFilm(filmId),
-  })

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@examples/react/star-wars/src/Film.tsx` around lines 8 - 14, The early return
when filmId is falsy causes a Rules of Hooks violation because useQuery is
conditionally skipped; move the useQuery call for the Film component above the
guard and pass enabled: Boolean(filmId) (or enabled: !!filmId) in the useQuery
options so the query is inactive when filmId is missing, then keep the existing
guard to render the "Invalid film ID" UI when filmId is falsy; refer to the
useQuery invocation, queryKey ['film', filmId], and getFilm to locate where to
change.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Outside diff comments:
In `@examples/react/star-wars/src/Film.tsx`:
- Around line 8-14: The early return when filmId is falsy causes a Rules of
Hooks violation because useQuery is conditionally skipped; move the useQuery
call for the Film component above the guard and pass enabled: Boolean(filmId)
(or enabled: !!filmId) in the useQuery options so the query is inactive when
filmId is missing, then keep the existing guard to render the "Invalid film ID"
UI when filmId is falsy; refer to the useQuery invocation, queryKey ['film',
filmId], and getFilm to locate where to change.