docs(examples): update star-wars and rick-morty examples #9696
Conversation
|
WalkthroughReplaces MUI/Emotion with Tailwind across React examples, migrates JSX pages to TypeScript, centralizes data fetching into api.ts modules, updates Vite configs to include @tailwindcss/vite, adjusts styles to Tailwind v4 patterns, removes legacy fetch helpers, updates routes/layouts, tweaks example titles, and modifies a PR workflow trigger. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor User
participant UI as React Component
participant RQ as React Query
participant API as api.ts helper
participant Net as fetch()
participant Remote as External API
User->>UI: Navigate to page
UI->>RQ: useQuery(queryKey, queryFn)
RQ->>API: queryFn()
API->>Net: fetch(url)
Net->>Remote: HTTP GET
Remote-->>Net: JSON
Net-->>API: Response JSON
API-->>RQ: Data
RQ-->>UI: Provide status/data
UI-->>User: Render content
sequenceDiagram
autonumber
actor User
participant UI as Svelte Component
participant SQ as Svelte Query
participant API as $lib/api helper
participant Net as fetch()
participant Remote as SWAPI
User->>UI: Route load
UI->>SQ: createQuery({ queryKey, queryFn })
SQ->>API: queryFn()
API->>Net: fetch(url)
Net->>Remote: GET
Remote-->>Net: JSON
Net-->>API: JSON
API-->>SQ: Data
SQ-->>UI: status/data
UI-->>User: Render
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests
Comment |
github-actions
bot
added
package: react-query-devtools
package: react-query
package: react-query-persist-client
package: solid-query
package: svelte-query
package: svelte-query-devtools
package: query-devtools
package: angular-query-experimental
package: solid-query-persist-client
package: svelte-query-persist-client
package: solid-query-devtools
package: query-broadcast-client-experimental
package: angular-query-persist-client
labels
|
View your CI Pipeline Execution ↗ for commit e8820f5
☁️ Nx Cloud last updated this comment at |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 5
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
examples/react/rick-morty/src/Layout.tsx (1)
24-31: Remove invalidexactprops on v6RoutesReact Router v6 dropped the
exactprop, and the corresponding TypeScript types reject it (Property 'exact' does not exist on type 'RouteProps'). Leaving it in causes the TS build to fail. Please remove theexactprop from these routes.- <Route exact path="/episodes" element={<Episodes />} /> - <Route exact path="/episodes/:episodeId" element={<Episode />} /> - <Route exact path="/characters" element={<Characters />} /> + <Route path="/episodes" element={<Episodes />} /> + <Route path="/episodes/:episodeId" element={<Episode />} /> + <Route path="/characters" element={<Characters />} /> <Route - exact path="/characters/:characterId" element={<Character />} />
🧹 Nitpick comments (2)
examples/react/rick-morty/src/Characters.tsx (1)
6-30: Type the characters query result instead of usingany.Line 17 still falls back to
any, which defeats the whole TS migration and makes it easy to ship field typos. IfgetCharactersexposed a typed result (Promise<PaginatedResponse<Character>>), React Query would infer the correct shapes and you could drop the cast altogether. With that in place, the component can lean on the inferred types and a simple non-null guard before rendering:- const { status, data } = useQuery({ - queryKey: ['characters'], - queryFn: () => getCharacters(), - }) + const { status, data } = useQuery({ + queryKey: ['characters'], + queryFn: getCharacters, + }) @@ - {data.results.map((person: any) => { + {data?.results.map((person) => {This pairs with the API typings suggestion on
api.ts. Once the helper returns a typed payload, the optional chain can be replaced by an explicit guard if you’d rather keep the JSX strict.examples/react/rick-morty/src/api.ts (1)
1-30: Export concrete Rick & Morty response types from the API helpers.Right now every helper returns
any, so the UI reverts to casts/loose typing. Defining the real response shapes here makes the rest of the example genuinely type-safe and keeps the model logic centralized:+type PaginatedResponse<TItem> = { + info: { + count: number + pages: number + next: string | null + prev: string | null + } + results: TItem[] +} + +export type Episode = { + id: number + name: string + air_date: string + episode: string + characters: string[] + url: string + created: string +} + +export type Character = { + id: number + name: string + status: string + species: string + type: string + gender: string + origin: { name: string; url: string } + location: { name: string; url: string } + image: string + episode: string[] + url: string + created: string +} + +export type Location = { + id: number + name: string + type: string + dimension: string + residents: string[] + url: string + created: string +} + -export const getEpisodes = async () => { +export const getEpisodes = async (): Promise<PaginatedResponse<Episode>> => { const res = await fetch('https://rickandmortyapi.com/api/episode/') return await res.json() } -export const getEpisode = async (episodeId: string) => { +export const getEpisode = async (episodeId: string): Promise<Episode> => { @@ -export const getCharacters = async () => { +export const getCharacters = async (): Promise<PaginatedResponse<Character>> => { @@ -export const getCharacter = async (characterId: string) => { +export const getCharacter = async ( + characterId: string, +): Promise<Character> => { @@ -export const getLocation = async (locationId: string) => { +export const getLocation = async (locationId: string): Promise<Location> => {With these in place, React and Svelte consumers pick up the proper types automatically (see the
Characters.tsxfeedback).
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (3)
examples/svelte/star-wars/static/emblem-light.svgis excluded by!**/*.svgexamples/svelte/star-wars/static/favicon.pngis excluded by!**/*.pngpnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (96)
.github/workflows/pr.yml(0 hunks)examples/angular/auto-refetching/package.json(1 hunks)examples/angular/basic-persister/package.json(1 hunks)examples/angular/basic/package.json(1 hunks)examples/angular/devtools-panel/package.json(1 hunks)examples/angular/infinite-query-with-max-pages/package.json(1 hunks)examples/angular/optimistic-updates/package.json(1 hunks)examples/angular/pagination/package.json(1 hunks)examples/angular/query-options-from-a-service/package.json(1 hunks)examples/angular/router/package.json(1 hunks)examples/angular/rxjs/package.json(1 hunks)examples/angular/simple/package.json(1 hunks)examples/react/basic-graphql-request/package.json(1 hunks)examples/react/chat/package.json(1 hunks)examples/react/react-router/package.json(1 hunks)examples/react/rick-morty/index.html(1 hunks)examples/react/rick-morty/package.json(1 hunks)examples/react/rick-morty/src/App.tsx(1 hunks)examples/react/rick-morty/src/Character.jsx(0 hunks)examples/react/rick-morty/src/Character.tsx(1 hunks)examples/react/rick-morty/src/Characters.jsx(0 hunks)examples/react/rick-morty/src/Characters.tsx(1 hunks)examples/react/rick-morty/src/Episode.jsx(0 hunks)examples/react/rick-morty/src/Episode.tsx(1 hunks)examples/react/rick-morty/src/Episodes.tsx(2 hunks)examples/react/rick-morty/src/Home.jsx(0 hunks)examples/react/rick-morty/src/Home.tsx(1 hunks)examples/react/rick-morty/src/Layout.tsx(2 hunks)examples/react/rick-morty/src/api.ts(1 hunks)examples/react/rick-morty/src/fetch.jsx(0 hunks)examples/react/rick-morty/src/styles.css(1 hunks)examples/react/rick-morty/tsconfig.json(1 hunks)examples/react/rick-morty/vite.config.ts(1 hunks)examples/react/star-wars/index.html(1 hunks)examples/react/star-wars/package.json(1 hunks)examples/react/star-wars/src/App.tsx(1 hunks)examples/react/star-wars/src/Character.jsx(0 hunks)examples/react/star-wars/src/Character.tsx(1 hunks)examples/react/star-wars/src/Characters.jsx(0 hunks)examples/react/star-wars/src/Characters.tsx(1 hunks)examples/react/star-wars/src/Film.jsx(0 hunks)examples/react/star-wars/src/Film.tsx(1 hunks)examples/react/star-wars/src/Films.tsx(2 hunks)examples/react/star-wars/src/Home.jsx(0 hunks)examples/react/star-wars/src/Home.tsx(1 hunks)examples/react/star-wars/src/Layout.tsx(2 hunks)examples/react/star-wars/src/api.ts(1 hunks)examples/react/star-wars/src/fetch.jsx(0 hunks)examples/react/star-wars/src/styles.css(1 hunks)examples/react/star-wars/tsconfig.json(1 hunks)examples/react/star-wars/vite.config.ts(1 hunks)examples/solid/astro/package.json(1 hunks)examples/solid/basic-graphql-request/package.json(1 hunks)examples/solid/basic/package.json(1 hunks)examples/solid/default-query-function/package.json(1 hunks)examples/solid/simple/package.json(1 hunks)examples/solid/solid-start-streaming/package.json(1 hunks)examples/svelte/auto-refetching/package.json(1 hunks)examples/svelte/basic/package.json(1 hunks)examples/svelte/load-more-infinite-scroll/package.json(1 hunks)examples/svelte/optimistic-updates/package.json(1 hunks)examples/svelte/playground/package.json(1 hunks)examples/svelte/ssr/package.json(1 hunks)examples/svelte/star-wars/package.json(1 hunks)examples/svelte/star-wars/postcss.config.cjs(0 hunks)examples/svelte/star-wars/src/app.css(1 hunks)examples/svelte/star-wars/src/app.html(1 hunks)examples/svelte/star-wars/src/lib/api.ts(1 hunks)examples/svelte/star-wars/src/routes/+layout.svelte(1 hunks)examples/svelte/star-wars/src/routes/+page.svelte(1 hunks)examples/svelte/star-wars/src/routes/characters/+page.svelte(2 hunks)examples/svelte/star-wars/src/routes/characters/[characterId]/+page.svelte(2 hunks)examples/svelte/star-wars/src/routes/characters/[characterId]/Film.svelte(1 hunks)examples/svelte/star-wars/src/routes/characters/[characterId]/Homeworld.svelte(1 hunks)examples/svelte/star-wars/src/routes/films/+page.svelte(2 hunks)examples/svelte/star-wars/src/routes/films/[filmId]/+page.svelte(1 hunks)examples/svelte/star-wars/src/routes/films/[filmId]/Character.svelte(1 hunks)examples/svelte/star-wars/tailwind.config.cjs(0 hunks)examples/svelte/star-wars/vite.config.ts(1 hunks)integrations/react-next-15/package.json(1 hunks)integrations/react-webpack-4/package.json(1 hunks)integrations/solid-vite/package.json(1 hunks)package.json(1 hunks)packages/angular-query-experimental/package.json(1 hunks)packages/angular-query-persist-client/package.json(1 hunks)packages/query-broadcast-client-experimental/package.json(1 hunks)packages/query-devtools/package.json(1 hunks)packages/react-query-devtools/package.json(1 hunks)packages/react-query-persist-client/package.json(1 hunks)packages/react-query/package.json(1 hunks)packages/solid-query-devtools/package.json(1 hunks)packages/solid-query-persist-client/package.json(1 hunks)packages/solid-query/package.json(1 hunks)packages/svelte-query-devtools/package.json(1 hunks)packages/svelte-query-persist-client/package.json(1 hunks)packages/svelte-query/package.json(1 hunks)
💤 Files with no reviewable changes (13)
- examples/react/rick-morty/src/fetch.jsx
- examples/react/star-wars/src/Characters.jsx
- examples/react/rick-morty/src/Home.jsx
- .github/workflows/pr.yml
- examples/svelte/star-wars/postcss.config.cjs
- examples/react/star-wars/src/Film.jsx
- examples/svelte/star-wars/tailwind.config.cjs
- examples/react/rick-morty/src/Characters.jsx
- examples/react/star-wars/src/fetch.jsx
- examples/react/rick-morty/src/Episode.jsx
- examples/react/rick-morty/src/Character.jsx
- examples/react/star-wars/src/Home.jsx
- examples/react/star-wars/src/Character.jsx
🧰 Additional context used
🧠 Learnings (2)
📚 Learning: 2025-09-02T17:57:33.184Z
Learnt from: TkDodo
PR: TanStack/query#9612
File: packages/query-async-storage-persister/src/asyncThrottle.ts:0-0
Timestamp: 2025-09-02T17:57:33.184Z
Learning: When importing from tanstack/query-core in other TanStack Query packages like query-async-storage-persister, a workspace dependency "tanstack/query-core": "workspace:*" needs to be added to the package.json.
Applied to files:
packages/svelte-query-persist-client/package.jsonexamples/angular/infinite-query-with-max-pages/package.jsonexamples/solid/simple/package.jsonpackages/svelte-query/package.jsonexamples/angular/devtools-panel/package.jsonpackages/query-broadcast-client-experimental/package.jsonpackages/react-query-devtools/package.jsonpackages/solid-query/package.jsonexamples/solid/basic/package.jsonexamples/angular/router/package.jsonexamples/react/basic-graphql-request/package.jsonpackages/solid-query-devtools/package.jsonexamples/angular/basic-persister/package.jsonexamples/angular/auto-refetching/package.jsonexamples/solid/astro/package.jsonpackages/react-query/package.jsonintegrations/solid-vite/package.jsonexamples/angular/query-options-from-a-service/package.jsonexamples/solid/default-query-function/package.jsonexamples/angular/simple/package.jsonexamples/angular/basic/package.jsonpackages/solid-query-persist-client/package.jsonexamples/solid/basic-graphql-request/package.jsonpackages/angular-query-persist-client/package.jsonexamples/angular/rxjs/package.jsonexamples/angular/optimistic-updates/package.jsonintegrations/react-next-15/package.jsonpackages/react-query-persist-client/package.jsonexamples/solid/solid-start-streaming/package.jsonexamples/angular/pagination/package.json
📚 Learning: 2025-08-19T03:18:18.303Z
Learnt from: oscartbeaumont
PR: TanStack/query#9564
File: packages/solid-query-devtools/src/production.tsx:2-3
Timestamp: 2025-08-19T03:18:18.303Z
Learning: In the solid-query-devtools package, the codebase uses a pattern of type-only default imports combined with typeof for component type annotations (e.g., `import type SolidQueryDevtoolsComp from './devtools'` followed by `typeof SolidQueryDevtoolsComp`). This pattern is consistently used across index.tsx and production.tsx files, and the maintainers prefer consistency over changing this approach.
Applied to files:
examples/solid/basic/package.jsonpackages/solid-query-devtools/package.jsonexamples/solid/astro/package.jsonexamples/solid/default-query-function/package.jsonexamples/solid/basic-graphql-request/package.json
🧬 Code graph analysis (14)
examples/react/rick-morty/src/Character.tsx (2)
examples/react/star-wars/src/Character.tsx (1)
Character(5-50)examples/react/rick-morty/src/api.ts (3)
getCharacter(18-23)getEpisode(6-11)getLocation(25-30)
examples/react/rick-morty/src/api.ts (2)
examples/react/star-wars/src/api.ts (2)
getCharacters(11-14)getCharacter(16-19)examples/svelte/star-wars/src/lib/api.ts (2)
getCharacters(11-14)getCharacter(16-19)
examples/react/star-wars/src/Home.tsx (1)
examples/react/rick-morty/src/Home.tsx (1)
Home(3-46)
examples/react/star-wars/src/Film.tsx (3)
examples/react/star-wars/src/api.ts (2)
getFilm(6-9)getCharacter(16-19)examples/react/star-wars/src/Character.tsx (1)
Character(5-50)examples/react/star-wars/src/Film.jsx (1)
Film(7-35)
examples/react/rick-morty/src/Episode.tsx (1)
examples/react/rick-morty/src/api.ts (2)
getEpisode(6-11)getCharacter(18-23)
examples/react/star-wars/src/api.ts (1)
examples/svelte/star-wars/src/lib/api.ts (5)
getFilms(1-4)getFilm(6-9)getCharacters(11-14)getCharacter(16-19)getPlanet(21-24)
examples/svelte/star-wars/src/lib/api.ts (1)
examples/react/star-wars/src/api.ts (5)
getFilms(1-4)getFilm(6-9)getCharacters(11-14)getCharacter(16-19)getPlanet(21-24)
examples/react/star-wars/src/Characters.tsx (2)
examples/react/rick-morty/src/Characters.tsx (1)
Characters(5-33)examples/react/star-wars/src/api.ts (1)
getCharacters(11-14)
examples/react/star-wars/src/Films.tsx (1)
examples/react/star-wars/src/api.ts (1)
getFilms(1-4)
examples/react/star-wars/src/Character.tsx (2)
examples/react/star-wars/src/api.ts (3)
getCharacter(16-19)getFilm(6-9)getPlanet(21-24)examples/react/star-wars/src/Film.tsx (1)
Film(5-31)
examples/react/rick-morty/src/Characters.tsx (2)
examples/react/rick-morty/src/api.ts (1)
getCharacters(13-16)examples/react/rick-morty/src/Characters.jsx (1)
Characters(7-34)
examples/react/rick-morty/src/Episodes.tsx (1)
examples/react/rick-morty/src/api.ts (1)
getEpisodes(1-4)
examples/react/rick-morty/src/Home.tsx (1)
examples/react/star-wars/src/Home.tsx (1)
Home(3-46)
examples/react/star-wars/src/App.tsx (1)
examples/react/star-wars/src/Layout.tsx (1)
Layout(8-37)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: Test
- GitHub Check: Preview
🔇 Additional comments (21)
packages/angular-query-persist-client/package.json (1)
69-69: Ensure Node≥20.11.0 support
eslint-plugin-jsdoc@60.4.0 peer-depends on eslint ^7 || ^8 || ^9 (our workspaces use ^9.36.0) and requires Node ≥20.11.0; confirm CI/workflows and consuming projects run on Node ≥20.11.0.examples/angular/basic-persister/package.json (1)
21-21: Zone.js patch upgrade looks goodThanks for keeping the Angular examples aligned on the latest zone.js patch; nothing else is required here.
examples/angular/devtools-panel/package.json (1)
20-20: Zone.js dependency bump approvedThis patch-level update is consistent with the other Angular example packages and poses no concerns.
examples/react/rick-morty/index.html (1)
9-9: Title tweak acknowledgedDropping “App” from the document title is harmless and matches the naming change elsewhere in the example.
examples/angular/simple/package.json (1)
19-19: Zone.js patch alignment confirmedThe dependency bump mirrors the rest of the Angular examples; all good.
examples/react/rick-morty/vite.config.ts (1)
3-7: Tailwind plugin integration looks correctImporting
@tailwindcss/viteand placing it ahead of the React plugin is the recommended setup for Tailwind in Vite 5+. Looks ready to go.packages/solid-query-persist-client/package.json (1)
74-74: Solid dev dependency bump looks goodAligns this workspace with the other Solid packages and keeps local testing in sync. 👍
examples/angular/rxjs/package.json (1)
20-20: Zone.js patch update approved0.15.1 is the latest bugfix for Angular 20 projects and keeps parity with the other Angular examples in this PR.
examples/react/basic-graphql-request/package.json (1)
13-14: GraphQL toolchain bump looks good
graphql@16.11.0andgraphql-request@7.2.0remain compatible, so the example stays current without breaking changes.examples/svelte/playground/package.json (1)
16-16: SvelteKit patch bump approved
@sveltejs/kit@2.43.5keeps the example aligned with the rest of the Svelte workspace and contains only maintenance fixes.packages/angular-query-experimental/package.json (1)
98-98: eslint-plugin-jsdoc v60 compatibility confirmed All pinned ESLint versions are ^9.36.0 (>=9), so upgrading to v60 is safe.examples/react/chat/package.json (1)
17-20: Tailwind patch bump looks goodLine 17 patching Tailwind tooling to 4.1.13 keeps us on the latest fixes without crossing major boundaries, so the update is low risk and aligns with the rest of the examples in this PR.
examples/angular/auto-refetching/package.json (1)
19-19: zone.js patch upgrade is aligned with Angular 20Line 19 moves us to zone.js 0.15.1, which stays within Angular 20’s supported range while picking up the latest fixes.
packages/svelte-query/package.json (1)
50-55: Svelte tooling bumps look goodLines 50-55 advance the Svelte packaging and linting stack to their latest patch releases; no runtime impact and they stay compatible with the rest of the workspace.
examples/angular/pagination/package.json (1)
19-19: Consistent zone.js patch updateLine 19 mirrors the zone.js 0.15.1 upgrade across the Angular examples, keeping versions aligned while remaining within Angular’s supported matrix.
examples/angular/basic/package.json (1)
19-19: zone.js update confirmedLine 19’s bump to 0.15.1 matches the rest of the Angular samples and stays inside the safe patch range.
package.json (1)
54-59: Lint tooling bumps look good
@vitest/eslint-plugin1.3.13 andknip5.64.1 both stay within the supported Node/ESLint envelopes we already target, so no config or workflow fallout to chase here. 👍packages/react-query-devtools/package.json (1)
86-90: Testing-library upgrade aligns with React 19
@testing-library/react16.3.0 matches the React 19 toolchain we ship in this workspace, so this is a straight compatibility bump with no extra work required.packages/solid-query-devtools/package.json (1)
69-71: Solid dev dependency refresh looks goodBumping
solid-jsto ^1.9.9 keeps the dev environment in lockstep with the rest of the monorepo while remaining inside the existing peer range, so everything stays consistent.integrations/react-next-15/package.json (1)
9-15: Temporal polyfill update acknowledgedJumping to
@js-temporal/polyfill0.5.1 keeps the integration current, and Next 15’s ESM pipeline already handles this release line without extra configuration.examples/react/rick-morty/package.json (1)
19-22: Tailwind toolchain addition looks aligned
@tailwindcss/viteplustailwindcssat 4.1.x ties together cleanly with the new TypeScript/Tailwind example stack—no dependency gaps spotted.
| const locationUrlParts = data.location.url.split('/').filter(Boolean) | ||
| const locationId = locationUrlParts[locationUrlParts.length - 1] | ||
|
|
||
| return ( | ||
| <div> | ||
| <h2 className="text-4xl">{data.name}</h2> | ||
| <p> | ||
| <strong>Gender</strong>: {data.gender} | ||
| </p> | ||
| <p> | ||
| <strong>Status</strong>: {data.status} | ||
| </p> | ||
| <p> | ||
| <strong>Species</strong>: {data.species} | ||
| </p> | ||
| <p> | ||
| <strong>Origin</strong>: {data.origin.name} | ||
| </p> | ||
| <p> | ||
| <strong>Location</strong>: <Location locationId={locationId} /> | ||
| </p> |
There was a problem hiding this comment.
Handle empty location URLs before deriving the location ID.
Line 17 assumes data.location.url is always populated. For characters whose location URL is an empty string (common in this API), locationId becomes undefined, and the Location component calls getLocation(undefined), repeatedly 404ing and rendering Error :( instead of the known location name. Guard for a missing URL and fall back to the provided name.
- const locationUrlParts = data.location.url.split('/').filter(Boolean)
- const locationId = locationUrlParts[locationUrlParts.length - 1]
+ const locationUrl = data.location.url
+ const locationId = locationUrl
+ ? locationUrl.split('/').filter(Boolean).slice(-1)[0]
+ : undefined
…
- <strong>Location</strong>: <Location locationId={locationId} />
+ <strong>Location</strong>:{' '}
+ {locationId ? (
+ <Location locationId={locationId} />
+ ) : (
+ data.location.name
+ )}📝 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.
| const locationUrlParts = data.location.url.split('/').filter(Boolean) | |
| const locationId = locationUrlParts[locationUrlParts.length - 1] | |
| return ( | |
| <div> | |
| <h2 className="text-4xl">{data.name}</h2> | |
| <p> | |
| <strong>Gender</strong>: {data.gender} | |
| </p> | |
| <p> | |
| <strong>Status</strong>: {data.status} | |
| </p> | |
| <p> | |
| <strong>Species</strong>: {data.species} | |
| </p> | |
| <p> | |
| <strong>Origin</strong>: {data.origin.name} | |
| </p> | |
| <p> | |
| <strong>Location</strong>: <Location locationId={locationId} /> | |
| </p> | |
| // Handle empty location URLs before deriving the location ID | |
| const locationUrl = data.location.url | |
| const locationId = locationUrl | |
| ? locationUrl.split('/').filter(Boolean).slice(-1)[0] | |
| : undefined | |
| return ( | |
| <div> | |
| <h2 className="text-4xl">{data.name}</h2> | |
| <p> | |
| <strong>Gender</strong>: {data.gender} | |
| </p> | |
| <p> | |
| <strong>Status</strong>: {data.status} | |
| </p> | |
| <p> | |
| <strong>Species</strong>: {data.species} | |
| </p> | |
| <p> | |
| <strong>Origin</strong>: {data.origin.name} | |
| </p> | |
| <p> | |
| <strong>Location</strong>:{' '} | |
| {locationId ? ( | |
| <Location locationId={locationId} /> | |
| ) : ( | |
| data.location.name | |
| )} | |
| </p> | |
| </div> | |
| ) |
🤖 Prompt for AI Agents
In examples/react/rick-morty/src/Character.tsx around lines 17 to 37, the code
assumes data.location.url is always populated which leads to locationId becoming
undefined for empty URLs; change the logic to only derive locationId when
data.location.url is a non-empty string (e.g., check truthiness before
splitting) and then conditionally render <Location locationId={locationId} />
only if locationId exists; otherwise render the provided fallback name
(data.location.name) so we don't call getLocation(undefined) and show "Error :("
repeatedly.
| <h6 className="text-xl"> | ||
| {episode.episode} - {episode.name} <em>{episode.airDate}</em> | ||
| </Typography> | ||
| </Link> | ||
| </h6> |
There was a problem hiding this comment.
Fix incorrect property name for episode air dates.
Line 28 references episode.airDate, but the Rick & Morty API returns air_date. As written, the UI renders undefined for every entry.
- {episode.episode} - {episode.name} <em>{episode.airDate}</em>
+ {episode.episode} - {episode.name} <em>{episode.air_date}</em>📝 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.
| <h6 className="text-xl"> | |
| {episode.episode} - {episode.name} <em>{episode.airDate}</em> | |
| </Typography> | |
| </Link> | |
| </h6> | |
| <h6 className="text-xl"> | |
| {episode.episode} - {episode.name} <em>{episode.air_date}</em> | |
| </h6> |
🤖 Prompt for AI Agents
In examples/react/rick-morty/src/Episodes.tsx around lines 27 to 29, the
template uses episode.airDate which does not exist on the API response (the API
returns air_date); update the JSX to reference episode.air_date (or defensively
use episode.air_date || episode.airDate) so the air date displays correctly.
| --font-mono: | ||
| Roboto Mono, BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Oxygen, | ||
| Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Helvetica, Arial, | ||
| sans-serif; | ||
| } |
There was a problem hiding this comment.
Restore monospace fallbacks for font-mono.
The --font-mono stack drops straight from Roboto Mono into BlinkMacSystemFont/Segoe/etc. and ultimately sans-serif, so any environment without Roboto Mono will render headings in a proportional face. That breaks the intent (and semantics) of applying font-mono, and it’s very noticeable on platforms where the bundled font isn’t available. Please restore a true monospace fallback chain.
- --font-mono:
- Roboto Mono, BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Oxygen,
- Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Helvetica, Arial,
- sans-serif;
+ --font-mono:
+ 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+ 'Liberation Mono', 'Courier New', monospace;🤖 Prompt for AI Agents
In examples/react/rick-morty/src/styles.css around lines 8 to 12, the
--font-mono variable currently falls back to proportional system fonts and ends
with sans-serif; change the fallback chain to true monospace fonts so
environments without Roboto Mono still render monospace. Replace the current
fallbacks with a monospace-first stack such as system monospace tokens and
common monospace families (e.g., ui-monospace, SFMono-Regular, Menlo, Monaco,
"Roboto Mono", "Courier New", monospace) and ensure the final token is the
generic monospace keyword rather than sans-serif.
| Roboto Mono, BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Oxygen, | ||
| Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Helvetica, Arial, | ||
| sans-serif; | ||
| } | ||
|
|
||
| @layer base { | ||
| body { | ||
| @apply font-sans; | ||
| } | ||
|
|
||
| h1, | ||
| h2, | ||
| h3, | ||
| h4, | ||
| h5, | ||
| h6 { | ||
| @apply font-mono; | ||
| } |
There was a problem hiding this comment.
Fix monospace fallback stack for headings.
Line 9 shows --font-mono falling back to sans-serif, so if Roboto Mono isn’t available the font-mono utility resolves to a sans font. Headings meant to render monospace will silently downgrade to sans-serif on many systems. Please swap in a real monospace fallback stack.
- --font-mono:
- Roboto Mono, BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Oxygen,
- Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Helvetica, Arial,
- sans-serif;
+ --font-mono:
+ Roboto Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+ "Liberation Mono", "Courier New", monospace;📝 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.
| Roboto Mono, BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Oxygen, | |
| Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Helvetica, Arial, | |
| sans-serif; | |
| } | |
| @layer base { | |
| body { | |
| @apply font-sans; | |
| } | |
| h1, | |
| h2, | |
| h3, | |
| h4, | |
| h5, | |
| h6 { | |
| @apply font-mono; | |
| } | |
| --font-mono: | |
| Roboto Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, | |
| "Liberation Mono", "Courier New", monospace; | |
| } | |
| @layer base { | |
| body { | |
| @apply font-sans; | |
| } | |
| h1, | |
| h2, | |
| h3, | |
| h4, | |
| h5, | |
| h6 { | |
| @apply font-mono; | |
| } |
🤖 Prompt for AI Agents
In examples/react/star-wars/src/styles.css around lines 9 to 26, the --font-mono
fallback ends with sans-serif so headings using font-mono will degrade to a sans
font; replace the sans-serif fallback with a proper monospace fallback stack
(include platform-specific names such as SFMono-Regular, Menlo, Monaco,
ui-monospace and the generic monospace at the end) and ensure the font-mono
utility lists those fallbacks in the correct order so headings render in a
monospace when Roboto Mono isn’t available.
| --font-mono: | ||
| Roboto Mono, BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Oxygen, | ||
| Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Helvetica, Arial, | ||
| sans-serif; |
There was a problem hiding this comment.
Fix monospace fallback for font-mono theme token.
Line 9 currently falls back to BlinkMacSystemFont/Segoe UI/etc., which are sans-serif. If Roboto Mono isn't available, code snippets render with proportional fonts, breaking alignment and legibility. Please swap in actual monospace fallbacks ending with monospace.
- --font-mono:
- Roboto Mono, BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Oxygen,
- Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Helvetica, Arial,
- sans-serif;
+ --font-mono:
+ Roboto Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+ 'Liberation Mono', 'Courier New', monospace;🤖 Prompt for AI Agents
In examples/svelte/star-wars/src/app.css around lines 8–11, the font-mono token
currently falls back to sans-serif system fonts (BlinkMacSystemFont,
-apple-system, Segoe UI, etc.), causing proportional fonts when Roboto Mono is
unavailable; replace the fallback stack with actual monospace families (for
example include SFMono-Regular, Menlo, Monaco, "Courier New" and end the list
with monospace) so code/snippets use a monospaced font when Roboto Mono is not
present.
|
Sizes for commit e8820f5:
|
There was a problem hiding this comment.
Actionable comments posted: 3
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (50)
examples/react/algolia/package.json(1 hunks)examples/react/basic-graphql-request/package.json(1 hunks)examples/react/basic/package.json(1 hunks)examples/react/chat/package.json(1 hunks)examples/react/default-query-function/package.json(1 hunks)examples/react/devtools-panel/package.json(1 hunks)examples/react/eslint-legacy/package.json(1 hunks)examples/react/offline/package.json(1 hunks)examples/react/playground/package.json(1 hunks)examples/react/react-router/package.json(1 hunks)examples/react/rick-morty/package.json(1 hunks)examples/react/shadow-dom/package.json(1 hunks)examples/react/simple/package.json(1 hunks)examples/react/star-wars/package.json(1 hunks)examples/react/suspense/package.json(1 hunks)examples/solid/basic-graphql-request/package.json(1 hunks)examples/solid/basic/package.json(1 hunks)examples/solid/default-query-function/package.json(1 hunks)examples/solid/simple/package.json(1 hunks)examples/svelte/auto-refetching/package.json(1 hunks)examples/svelte/basic/package.json(1 hunks)examples/svelte/load-more-infinite-scroll/package.json(1 hunks)examples/svelte/optimistic-updates/package.json(1 hunks)examples/svelte/playground/package.json(1 hunks)examples/svelte/simple/package.json(1 hunks)examples/svelte/ssr/package.json(1 hunks)examples/svelte/star-wars/package.json(1 hunks)examples/vue/basic/package.json(1 hunks)examples/vue/dependent-queries/package.json(1 hunks)examples/vue/persister/package.json(1 hunks)examples/vue/simple/package.json(1 hunks)integrations/react-vite/package.json(1 hunks)integrations/solid-vite/package.json(1 hunks)integrations/svelte-vite/package.json(1 hunks)integrations/vue-vite/package.json(1 hunks)package.json(2 hunks)packages/query-broadcast-client-experimental/package.json(1 hunks)packages/query-devtools/package.json(1 hunks)packages/react-query-devtools/package.json(1 hunks)packages/react-query-next-experimental/package.json(1 hunks)packages/react-query-persist-client/package.json(1 hunks)packages/react-query/package.json(1 hunks)packages/solid-query-devtools/package.json(1 hunks)packages/solid-query-persist-client/package.json(1 hunks)packages/solid-query/package.json(1 hunks)packages/svelte-query-devtools/package.json(1 hunks)packages/svelte-query-persist-client/package.json(1 hunks)packages/svelte-query/package.json(1 hunks)packages/vue-query-devtools/package.json(1 hunks)packages/vue-query/package.json(1 hunks)
✅ Files skipped from review due to trivial changes (1)
- examples/react/playground/package.json
🚧 Files skipped from review as they are similar to previous changes (8)
- packages/solid-query-persist-client/package.json
- packages/query-devtools/package.json
- packages/react-query-devtools/package.json
- examples/svelte/ssr/package.json
- examples/solid/basic-graphql-request/package.json
- examples/svelte/auto-refetching/package.json
- packages/svelte-query-devtools/package.json
- packages/query-broadcast-client-experimental/package.json
🧰 Additional context used
🧠 Learnings (2)
📚 Learning: 2025-09-02T17:57:33.184Z
Learnt from: TkDodo
PR: TanStack/query#9612
File: packages/query-async-storage-persister/src/asyncThrottle.ts:0-0
Timestamp: 2025-09-02T17:57:33.184Z
Learning: When importing from tanstack/query-core in other TanStack Query packages like query-async-storage-persister, a workspace dependency "tanstack/query-core": "workspace:*" needs to be added to the package.json.
Applied to files:
packages/vue-query-devtools/package.jsonpackages/vue-query/package.jsonintegrations/solid-vite/package.jsonpackages/svelte-query/package.jsonexamples/solid/default-query-function/package.jsonpackages/react-query-next-experimental/package.jsonpackages/solid-query/package.jsonpackages/solid-query-devtools/package.jsonpackages/react-query/package.jsonintegrations/react-vite/package.jsonexamples/solid/basic/package.jsonexamples/react/basic-graphql-request/package.jsonpackages/react-query-persist-client/package.jsonexamples/solid/simple/package.jsonpackages/svelte-query-persist-client/package.json
📚 Learning: 2025-08-19T03:18:18.303Z
Learnt from: oscartbeaumont
PR: TanStack/query#9564
File: packages/solid-query-devtools/src/production.tsx:2-3
Timestamp: 2025-08-19T03:18:18.303Z
Learning: In the solid-query-devtools package, the codebase uses a pattern of type-only default imports combined with typeof for component type annotations (e.g., `import type SolidQueryDevtoolsComp from './devtools'` followed by `typeof SolidQueryDevtoolsComp`). This pattern is consistently used across index.tsx and production.tsx files, and the maintainers prefer consistency over changing this approach.
Applied to files:
packages/solid-query-devtools/package.json
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: Test
- GitHub Check: Preview
🔇 Additional comments (2)
examples/vue/dependent-queries/package.json (1)
15-17: Verify Vite ↔ plugin compatibility before mergingWe’re moving the Vite runtime to 7.x but still pulling
@vitejs/plugin-vueat 6.x. The Vue plugin tends to track Vite’s major versions, so there’s a real chance 6.x only guarantees support up through Vite 6. Please double-check the upstream release notes/matrix to confirm 6.0.1 is meant to work with Vite 7; otherwise we should bump to the matching major before this lands (same concern applies to the other package.json files in this PR that pair Vite 7 with plugin-vue 6).If you find that plugin 7.x is required, please update the dependency accordingly.
examples/svelte/optimistic-updates/package.json (1)
16-21: Double-check Svelte plugin support for Vite 7Like the Vue examples, we’re upgrading Vite to 7.x here while keeping
@sveltejs/vite-plugin-svelteon 6.x. The Svelte plugin typically keys its major version to the supported Vite major, so 6.x may only promise compatibility through Vite 6. Please confirm via the official changelog/matrix that 6.2.1 explicitly supports Vite 7; if not, we should bump to the matching plugin major (and mirror that change across the other Svelte package.json files updated in this PR).If compatibility isn’t documented, consider upgrading the plugin to the Vite-7-compatible release before shipping.
| "@tailwindcss/vite": "^4.1.13", | ||
| "@vitejs/plugin-react": "^5.0.3", | ||
| "tailwindcss": "^4.1.13", | ||
| "typescript": "5.8.3", | ||
| "vite": "^6.3.6" | ||
| "vite": "^7.1.7" |
There was a problem hiding this comment.
Invalid Tailwind CSS versions block installs
Line 19 pins @tailwindcss/vite to ^4.1.13 and Line 21 pins tailwindcss to ^4.1.13, but neither version exists on npm right now (tailwindcss is still on the 3.4.x line and the Vite plugin tops out at 4.0.x). pnpm install will fail with a 404, so the example can’t even bootstrap. Please pin to published versions before merging, for example:
- "@tailwindcss/vite": "^4.1.13",
- "tailwindcss": "^4.1.13",
+ "@tailwindcss/vite": "^4.0.6",
+ "tailwindcss": "^3.4.14",Feel free to substitute the exact released tags you intend, but they need to exist on npm to keep the sample runnable.
📝 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.
| "@tailwindcss/vite": "^4.1.13", | |
| "@vitejs/plugin-react": "^5.0.3", | |
| "tailwindcss": "^4.1.13", | |
| "typescript": "5.8.3", | |
| "vite": "^6.3.6" | |
| "vite": "^7.1.7" | |
| "@tailwindcss/vite": "^4.0.6", | |
| "@vitejs/plugin-react": "^5.0.3", | |
| "tailwindcss": "^3.4.14", | |
| "typescript": "5.8.3", | |
| "vite": "^7.1.7" |
🤖 Prompt for AI Agents
In examples/react/rick-morty/package.json around lines 19 to 23, the pinned
versions for @tailwindcss/vite and tailwindcss do not exist on npm and will
cause pnpm install to 404; update those package entries to published versions
(e.g., set "tailwindcss" to a 3.4.x release and "@tailwindcss/vite" to a 4.0.x
release or whatever exact released tags you intend), verify the chosen semver
ranges exist on npm, and run pnpm install to confirm the example boots
successfully before committing.
| "@tailwindcss/vite": "^4.1.13", | ||
| "@vitejs/plugin-react": "^5.0.3", | ||
| "tailwindcss": "^4.1.13", | ||
| "typescript": "5.8.3", | ||
| "vite": "^6.3.6" | ||
| "vite": "^7.1.7" |
There was a problem hiding this comment.
React Star Wars example inherits the same invalid Tailwind ranges
Lines 19 and 21 again target @tailwindcss/vite@^4.1.13 and tailwindcss@^4.1.13, neither of which exists on npm. This will cause install failures just like the Rick & Morty example. Please pin both dependencies to actual published releases (for example, plugin ^4.0.6 and tailwindcss ^3.4.14) before merging.
🤖 Prompt for AI Agents
In examples/react/star-wars/package.json around lines 19 to 23, the Tailwind
plugin and core versions are set to non-existent ranges
(@tailwindcss/vite@^4.1.13 and tailwindcss@^4.1.13) which will break installs;
change those entries to valid published versions (for example set
"@tailwindcss/vite": "^4.0.6" and "tailwindcss": "^3.4.14"), save the file, then
run the package manager install to verify resolution and adjust versions if
npm/yarn suggests a different available patch release.
| "@sveltejs/kit": "^2.43.5", | ||
| "@sveltejs/vite-plugin-svelte": "^6.2.1", | ||
| "@tailwindcss/vite": "^4.1.13", | ||
| "svelte": "^5.39.3", | ||
| "svelte-check": "^4.3.1", | ||
| "tailwindcss": "^3.4.7", | ||
| "tailwindcss": "^4.1.13", | ||
| "typescript": "5.8.3", | ||
| "vite": "^6.3.6" | ||
| "vite": "^7.1.7" |
There was a problem hiding this comment.
Svelte example also depends on unpublished Tailwind packages
The same issue repeats here: Line 18 requests @tailwindcss/vite@^4.1.13 and Line 21 requests tailwindcss@^4.1.13, but those versions are not published. That will break pnpm install for this example. Please switch to published versions (e.g., plugin ^4.0.6 and tailwindcss ^3.4.14) so the Svelte demo remains installable.
🤖 Prompt for AI Agents
In examples/svelte/star-wars/package.json around lines 16 to 23, the package
versions for @tailwindcss/vite and tailwindcss reference unpublished releases
and will break pnpm install; update "@tailwindcss/vite" to a published version
such as "^4.0.6" and "tailwindcss" to a published version such as "^3.4.14" (or
other known-published versions), save the updated package.json and run pnpm
install to verify the example installs correctly.
lachlancollins
force-pushed
the
update-examples
branch
from
fe38082 to
e8820f5
Compare
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #9696 +/- ##
=======================================
Coverage 46.38% 46.38%
=======================================
Files 214 214
Lines 8488 8488
Branches 1929 1929
=======================================
Hits 3937 3937
Misses 4108 4108
Partials 443 443 🚀 New features to boost your workflow:
|
There was a problem hiding this comment.
Actionable comments posted: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
examples/react/star-wars/src/Layout.tsx (1)
24-33: Remove unsupportedexactprops from React Router v6 routes.
react-router-dom@6dropped theexactprop, and its TypeScript definitions now flag it as an error. Keeping it in this TSX file will break the build. Please removeexactfrom eachRoutebelow.- <Route exact path="/films" element={<Films />} /> - <Route exact path="/films/:filmId" element={<Film />} /> - <Route exact path="/characters" element={<Characters />} /> - <Route - exact - path="/characters/:characterId" - element={<Character />} - /> + <Route path="/films" element={<Films />} /> + <Route path="/films/:filmId" element={<Film />} /> + <Route path="/characters" element={<Characters />} /> + <Route + path="/characters/:characterId" + element={<Character />} + />examples/react/rick-morty/src/Layout.tsx (1)
24-31: Remove the unsupportedexactprop from React Router v6 routes.
Routein react-router-dom v6 no longer acceptsexact. Keeping it here raises TypeScript errors after the migration to TSX.Apply this diff:
- <Route exact path="/episodes" element={<Episodes />} /> - <Route exact path="/episodes/:episodeId" element={<Episode />} /> - <Route exact path="/characters" element={<Characters />} /> - <Route - exact - path="/characters/:characterId" - element={<Character />} - /> + <Route path="/episodes" element={<Episodes />} /> + <Route path="/episodes/:episodeId" element={<Episode />} /> + <Route path="/characters" element={<Characters />} /> + <Route path="/characters/:characterId" element={<Character />} />
🧹 Nitpick comments (2)
examples/react/star-wars/src/Films.tsx (1)
3-39: Avoidanyby modeling the film responseWith the new TS conversion we still drop to
anyfor bothdataand eachfilm, so the compiler can’t flag shape regressions fromgetFilms. Defining the response/film types and feeding them intouseQuerykeeps the example type-safe without much noise. One option:+type Film = { + episode_id: number + title: string + release_date: string + url: string +} + +type FilmsResponse = { + results: Film[] +} + export default function Films() { - const { data, status } = useQuery({ + const { data, status } = useQuery<FilmsResponse>({ queryKey: ['films'], queryFn: () => getFilms(), }) … - {data.results.map((film: any) => { + {data.results.map((film) => {You can optionally tighten
getFilms’ return type toPromise<FilmsResponse>inapi.tsfor end-to-end coverage.examples/react/rick-morty/src/Characters.tsx (1)
5-30: Strengthen the Character query typing instead of usingany.
data.resultsandperson: anydefeat the purpose of migrating this example to TypeScript. Please add lightweight domain types and feed them intouseQueryso the component benefits from static checking.Apply this diff:
+type Character = { + id: number + name: string + gender: string + species: string +} + +type CharactersResponse = { + results: Character[] +} + export default function Characters() { - const { status, data } = useQuery({ + const { status, data } = useQuery<CharactersResponse>({ queryKey: ['characters'], - queryFn: () => getCharacters(), + queryFn: getCharacters, }) if (status === 'pending') return <p>Loading...</p> - if (status === 'error') return <p>Error :(</p> + if (status === 'error' || !data) return <p>Error :(</p> return ( <div> <h2 className="text-4xl">Characters</h2> - {data.results.map((person: any) => { + {data.results.map((person) => { return ( <article key={person.id}> <RouterLink
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (3)
examples/svelte/star-wars/static/emblem-light.svgis excluded by!**/*.svgexamples/svelte/star-wars/static/favicon.pngis excluded by!**/*.pngpnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (53)
.github/workflows/pr.yml(0 hunks)examples/react/rick-morty/index.html(1 hunks)examples/react/rick-morty/package.json(1 hunks)examples/react/rick-morty/src/App.tsx(1 hunks)examples/react/rick-morty/src/Character.jsx(0 hunks)examples/react/rick-morty/src/Character.tsx(1 hunks)examples/react/rick-morty/src/Characters.jsx(0 hunks)examples/react/rick-morty/src/Characters.tsx(1 hunks)examples/react/rick-morty/src/Episode.jsx(0 hunks)examples/react/rick-morty/src/Episode.tsx(1 hunks)examples/react/rick-morty/src/Episodes.tsx(2 hunks)examples/react/rick-morty/src/Home.jsx(0 hunks)examples/react/rick-morty/src/Home.tsx(1 hunks)examples/react/rick-morty/src/Layout.tsx(2 hunks)examples/react/rick-morty/src/api.ts(1 hunks)examples/react/rick-morty/src/fetch.jsx(0 hunks)examples/react/rick-morty/src/styles.css(1 hunks)examples/react/rick-morty/tsconfig.json(1 hunks)examples/react/rick-morty/vite.config.ts(1 hunks)examples/react/star-wars/index.html(1 hunks)examples/react/star-wars/package.json(1 hunks)examples/react/star-wars/src/App.tsx(1 hunks)examples/react/star-wars/src/Character.jsx(0 hunks)examples/react/star-wars/src/Character.tsx(1 hunks)examples/react/star-wars/src/Characters.jsx(0 hunks)examples/react/star-wars/src/Characters.tsx(1 hunks)examples/react/star-wars/src/Film.jsx(0 hunks)examples/react/star-wars/src/Film.tsx(1 hunks)examples/react/star-wars/src/Films.tsx(2 hunks)examples/react/star-wars/src/Home.jsx(0 hunks)examples/react/star-wars/src/Home.tsx(1 hunks)examples/react/star-wars/src/Layout.tsx(2 hunks)examples/react/star-wars/src/api.ts(1 hunks)examples/react/star-wars/src/fetch.jsx(0 hunks)examples/react/star-wars/src/styles.css(1 hunks)examples/react/star-wars/tsconfig.json(1 hunks)examples/react/star-wars/vite.config.ts(1 hunks)examples/svelte/star-wars/package.json(1 hunks)examples/svelte/star-wars/postcss.config.cjs(0 hunks)examples/svelte/star-wars/src/app.css(1 hunks)examples/svelte/star-wars/src/app.html(1 hunks)examples/svelte/star-wars/src/lib/api.ts(1 hunks)examples/svelte/star-wars/src/routes/+layout.svelte(1 hunks)examples/svelte/star-wars/src/routes/+page.svelte(1 hunks)examples/svelte/star-wars/src/routes/characters/+page.svelte(2 hunks)examples/svelte/star-wars/src/routes/characters/[characterId]/+page.svelte(2 hunks)examples/svelte/star-wars/src/routes/characters/[characterId]/Film.svelte(1 hunks)examples/svelte/star-wars/src/routes/characters/[characterId]/Homeworld.svelte(1 hunks)examples/svelte/star-wars/src/routes/films/+page.svelte(2 hunks)examples/svelte/star-wars/src/routes/films/[filmId]/+page.svelte(1 hunks)examples/svelte/star-wars/src/routes/films/[filmId]/Character.svelte(1 hunks)examples/svelte/star-wars/tailwind.config.cjs(0 hunks)examples/svelte/star-wars/vite.config.ts(1 hunks)
💤 Files with no reviewable changes (13)
- examples/react/star-wars/src/fetch.jsx
- .github/workflows/pr.yml
- examples/react/rick-morty/src/Home.jsx
- examples/svelte/star-wars/postcss.config.cjs
- examples/react/rick-morty/src/Characters.jsx
- examples/react/rick-morty/src/fetch.jsx
- examples/react/rick-morty/src/Episode.jsx
- examples/svelte/star-wars/tailwind.config.cjs
- examples/react/star-wars/src/Home.jsx
- examples/react/star-wars/src/Film.jsx
- examples/react/star-wars/src/Characters.jsx
- examples/react/rick-morty/src/Character.jsx
- examples/react/star-wars/src/Character.jsx
✅ Files skipped from review due to trivial changes (3)
- examples/react/star-wars/index.html
- examples/react/star-wars/src/api.ts
- examples/svelte/star-wars/src/app.html
🚧 Files skipped from review as they are similar to previous changes (22)
- examples/react/rick-morty/src/Episode.tsx
- examples/react/rick-morty/src/api.ts
- examples/react/rick-morty/src/Home.tsx
- examples/react/star-wars/src/Characters.tsx
- examples/svelte/star-wars/src/routes/characters/[characterId]/Homeworld.svelte
- examples/svelte/star-wars/src/lib/api.ts
- examples/react/star-wars/vite.config.ts
- examples/react/rick-morty/index.html
- examples/react/star-wars/src/Home.tsx
- examples/svelte/star-wars/src/routes/films/[filmId]/+page.svelte
- examples/react/rick-morty/src/Character.tsx
- examples/react/rick-morty/src/Episodes.tsx
- examples/svelte/star-wars/package.json
- examples/react/star-wars/tsconfig.json
- examples/svelte/star-wars/src/routes/characters/[characterId]/+page.svelte
- examples/svelte/star-wars/src/routes/characters/[characterId]/Film.svelte
- examples/react/star-wars/src/Character.tsx
- examples/svelte/star-wars/src/routes/characters/+page.svelte
- examples/react/star-wars/src/styles.css
- examples/react/star-wars/src/App.tsx
- examples/svelte/star-wars/src/routes/+layout.svelte
- examples/svelte/star-wars/vite.config.ts
🧰 Additional context used
🧬 Code graph analysis (3)
examples/react/star-wars/src/Film.tsx (2)
examples/react/star-wars/src/api.ts (2)
getFilm(6-9)getCharacter(16-19)examples/react/star-wars/src/Character.tsx (1)
Character(5-50)
examples/react/rick-morty/src/Characters.tsx (2)
examples/react/rick-morty/src/api.ts (1)
getCharacters(13-16)examples/react/rick-morty/src/Characters.jsx (1)
Characters(7-34)
examples/react/star-wars/src/Films.tsx (1)
examples/react/star-wars/src/api.ts (1)
getFilms(1-4)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: Test
🔇 Additional comments (4)
examples/react/rick-morty/src/styles.css (1)
8-11: Restore monospace fallbacks for--font-mono.This still drops straight from
Roboto Monointo proportional system faces and ultimatelysans-serif, so anywhere the bundled font fails to load you get proportional headings. Please reinstate the monospace fallback chain from the earlier review.Apply this diff:
- --font-mono: - Roboto Mono, BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Oxygen, - Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Helvetica, Arial, - sans-serif; + --font-mono: + 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, + 'Liberation Mono', 'Courier New', monospace;examples/react/rick-morty/package.json (1)
19-21: Fix the Tailwind version pins
@tailwindcss/viteandtailwindcssdon’t ship 4.1.x builds yet (latest published lines are@tailwindcss/vite@4.0.xandtailwindcss@3.4.x), sopnpm install404s and the example can’t even bootstrap. Please pin to released versions before merging.- "@tailwindcss/vite": "^4.1.13", + "@tailwindcss/vite": "^4.0.6", @@ - "tailwindcss": "^4.1.13", + "tailwindcss": "^3.4.14",examples/svelte/star-wars/src/app.css (1)
8-11: Restore monospace fallbacks for--font-mono. The token still falls back to sans-serif system fonts, so any environment missing Roboto Mono renders headings with proportional glyphs and breaks alignment. Please swap in actual monospace fallbacks.- --font-mono: - Roboto Mono, BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Oxygen, - Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Helvetica, Arial, - sans-serif; + --font-mono: + Roboto Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, + 'Liberation Mono', 'Courier New', monospace;examples/react/star-wars/package.json (1)
19-21: Pin Tailwind packages to real releases before mergingBoth
@tailwindcss/vite@^4.1.13andtailwindcss@^4.1.13are nonexistent on npm, sopnpm installfails for this example. Please switch to published versions (e.g. plugin^4.0.6, core^3.4.14) or whateverpnpm inforeports as the latest available patch.- "@tailwindcss/vite": "^4.1.13", + "@tailwindcss/vite": "^4.0.6", ... - "tailwindcss": "^4.1.13", + "tailwindcss": "^3.4.14",
| if (status !== 'success') { | ||
| return null | ||
| } |
There was a problem hiding this comment.
Surface character fetch errors instead of failing silently
Right now pending and error states both return null, so if a character request blows up the entry simply vanishes under “Characters,” leaving users with no clue whether we’re still loading or if something broke. That silent failure degrades the experience. Please surface the error (and optionally keep the pending state lightweight) so there’s visible feedback when a character lookup fails.
- if (status !== 'success') {
- return null
- }
+ if (status === 'pending') {
+ return null
+ }
+ if (status === 'error') {
+ return (
+ <span className="text-red-500 text-sm" role="status">
+ Failed to load character
+ </span>
+ )
+ }📝 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 (status !== 'success') { | |
| return null | |
| } | |
| if (status === 'pending') { | |
| return null | |
| } | |
| if (status === 'error') { | |
| return ( | |
| <span className="text-red-500 text-sm" role="status"> | |
| Failed to load character | |
| </span> | |
| ) | |
| } |
🤖 Prompt for AI Agents
In examples/react/star-wars/src/Film.tsx around lines 39 to 41, the component
currently returns null for any non-'success' character fetch status which hides
both loading and error states; update the conditional to distinguish 'pending'
and 'error' statuses so the UI shows a lightweight loading indicator (or
placeholder) when status === 'pending' and displays a visible error message or
fallback UI when status === 'error' (include the error message or a generic
"Failed to load character" text), leaving the success branch unchanged.
| Simply associate a key with your fetch call and let{' '} | ||
| <strong>TanStack Query</strong> handle the rest. | ||
| </p> | ||
| <h5 class="text-2xl pt-4">Ready to get started?</h5> | ||
| <p> | ||
| Check out the{' '} | ||
| <a href="/films" class="text-blue-500 hover:underline">Films</a> | ||
| and | ||
| <a href="/characters" class="text-blue-500 hover:underline">Characters</a> |
There was a problem hiding this comment.
Replace JSX-style {' '} spacers with valid Svelte whitespace
Those {' '} fragments are JSX-only; Svelte treats them as syntax errors, so the page won’t compile. Replace them with normal spaces in the text. For example:
- Simply associate a key with your fetch call and let{' '}
- <strong>TanStack Query</strong> handle the rest.
+ Simply associate a key with your fetch call and let <strong>TanStack Query</strong>
+ handle the rest.
…
- Check out the{' '}
- <a href="/films" class="text-blue-500 hover:underline">Films</a>
- and
- <a href="/characters" class="text-blue-500 hover:underline">Characters</a>
- !
+ Check out the <a href="/films" class="text-blue-500 hover:underline">Films</a> and
+ <a href="/characters" class="text-blue-500 hover:underline">Characters</a>!📝 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.
| Simply associate a key with your fetch call and let{' '} | |
| <strong>TanStack Query</strong> handle the rest. | |
| </p> | |
| <h5 class="text-2xl pt-4">Ready to get started?</h5> | |
| <p> | |
| Check out the{' '} | |
| <a href="/films" class="text-blue-500 hover:underline">Films</a> | |
| and | |
| <a href="/characters" class="text-blue-500 hover:underline">Characters</a> | |
| Simply associate a key with your fetch call and let <strong>TanStack Query</strong> | |
| handle the rest. | |
| </p> | |
| <h5 class="text-2xl pt-4">Ready to get started?</h5> | |
| <p> | |
| Check out the <a href="/films" class="text-blue-500 hover:underline">Films</a> and | |
| <a href="/characters" class="text-blue-500 hover:underline">Characters</a>! |
🤖 Prompt for AI Agents
In examples/svelte/star-wars/src/routes/+page.svelte around lines 21 to 29, the
JSX-style spacer fragments ({' '}) are invalid in Svelte and will cause a
compile error; remove those fragments and replace them with normal literal
spaces (or adjust text/markup to rely on surrounding whitespace) so the links
and inline text render correctly.
1 participant
🎯 Changes
Started as a general dependency update, then changed into updating these examples to TS and to use tailwind. Reduced overall repo installation time. Some package updates are also included.
✅ Checklist
pnpm test:pr.🚀 Release Impact
Summary by CodeRabbit