Skip to content

Commit 93a9d71

Browse files
lachlancollinslachlancollins
authored
docs(examples): update star-wars and rick-morty examples (#9696)
1 parent 8e42926 commit 93a9d71

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

56 files changed

+1175
-1734
lines changed

‎.github/workflows/pr.yml‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,6 @@ name: PR
22

33
on:
44
pull_request:
5-
push:
6-
branches: ['svelte-5-adapter']
75

86
concurrency:
97
group: ${{ github.workflow }}-${{ github.event.number || github.ref }}

‎examples/react/rick-morty/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<meta name="viewport" content="width=device-width, initial-scale=1" />
77
<meta name="theme-color" content="#000000" />
88

9-
<title>TanStack Query React Rick And Morty Example App</title>
9+
<title>TanStack Query React Rick And Morty Example</title>
1010
</head>
1111
<body>
1212
<noscript>You need to enable JavaScript to run this app.</noscript>

‎examples/react/rick-morty/package.json‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,6 @@
88
"preview": "vite preview"
99
},
1010
"dependencies": {
11-
"@emotion/react": "^11.13.5",
12-
"@emotion/styled": "^11.13.5",
13-
"@mui/material": "^6.1.8",
14-
"@mui/styles": "^6.1.8",
1511
"@tanstack/react-query": "^5.90.2",
1612
"@tanstack/react-query-devtools": "^5.90.2",
1713
"react": "^19.0.0",
@@ -20,7 +16,9 @@
2016
"react-router-dom": "^6.25.1"
2117
},
2218
"devDependencies": {
19+
"@tailwindcss/vite": "^4.1.13",
2320
"@vitejs/plugin-react": "^4.3.4",
21+
"tailwindcss": "^4.1.13",
2422
"typescript": "5.8.3",
2523
"vite": "^6.3.6"
2624
}

‎examples/react/rick-morty/src/App.tsx‎

Lines changed: 2 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
11
import { BrowserRouter as Router } from 'react-router-dom'
2-
import { ThemeProvider } from '@mui/material'
3-
import { createTheme } from '@mui/material/styles'
42
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
53
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
64
import Layout from './Layout'
@@ -13,34 +11,9 @@ export default function App() {
1311
return (
1412
<QueryClientProvider client={queryClient}>
1513
<Router>
16-
<ThemeProvider theme={theme}>
17-
<Layout />
18-
<ReactQueryDevtools initialIsOpen />
19-
</ThemeProvider>
14+
<Layout />
15+
<ReactQueryDevtools initialIsOpen />
2016
</Router>
2117
</QueryClientProvider>
2218
)
2319
}
24-
25-
const theme = createTheme({
26-
typography: {
27-
h1: {
28-
fontFamily: 'Roboto Mono, monospace',
29-
},
30-
h2: {
31-
fontFamily: 'Roboto Mono, monospace',
32-
},
33-
h3: {
34-
fontFamily: 'Roboto Mono, monospace',
35-
},
36-
h4: {
37-
fontFamily: 'Roboto Mono, monospace',
38-
},
39-
h5: {
40-
fontFamily: 'Roboto Mono, monospace',
41-
},
42-
h6: {
43-
fontFamily: 'Roboto Mono, monospace',
44-
},
45-
},
46-
})

‎examples/react/rick-morty/src/Character.jsx‎

Lines changed: 0 additions & 117 deletions
This file was deleted.

‎examples/react/rick-morty/src/Character.tsx‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
import { useParams, Link as RouterLink } from 'react-router-dom'
2+
import { useQuery } from '@tanstack/react-query'
3+
import { getCharacter, getEpisode, getLocation } from './api'
4+
5+
function Character() {
6+
let params = useParams()
7+
const characterId = params.characterId!
8+
9+
const { status, data } = useQuery({
10+
queryKey: ['character', characterId],
11+
queryFn: () => getCharacter(characterId),
12+
})
13+
14+
if (status === 'pending') return <p>Loading...</p>
15+
if (status === 'error') return <p>Error :(</p>
16+
17+
const locationUrlParts = data.location.url.split('/').filter(Boolean)
18+
const locationId = locationUrlParts[locationUrlParts.length - 1]
19+
20+
return (
21+
<div>
22+
<h2 className="text-4xl">{data.name}</h2>
23+
<p>
24+
<strong>Gender</strong>: {data.gender}
25+
</p>
26+
<p>
27+
<strong>Status</strong>: {data.status}
28+
</p>
29+
<p>
30+
<strong>Species</strong>: {data.species}
31+
</p>
32+
<p>
33+
<strong>Origin</strong>: {data.origin.name}
34+
</p>
35+
<p>
36+
<strong>Location</strong>: <Location locationId={locationId} />
37+
</p>
38+
39+
<h4 className="text-2xl pt-4">Episodes</h4>
40+
{data.episode.map((episode: any) => {
41+
const episodeUrlParts = episode.split('/').filter(Boolean)
42+
const episodeId = episodeUrlParts[episodeUrlParts.length - 1]
43+
return <Episode episodeId={episodeId} key={`${episodeId}`} />
44+
})}
45+
</div>
46+
)
47+
}
48+
49+
function Episode({ episodeId }: { episodeId: string }) {
50+
const { data, status } = useQuery({
51+
queryKey: ['episode', episodeId],
52+
queryFn: () => getEpisode(episodeId),
53+
})
54+
55+
if (status === 'success') {
56+
return (
57+
<article key={episodeId}>
58+
<RouterLink
59+
className="text-blue-500 hover:underline"
60+
to={`/episodes/${episodeId}`}
61+
>
62+
<h6 className="text-lg">
63+
{data.episode}. {data.name} - {data.air_date}
64+
</h6>
65+
</RouterLink>
66+
</article>
67+
)
68+
}
69+
}
70+
71+
function Location({ locationId }: { locationId: string }) {
72+
const { data, status } = useQuery({
73+
queryKey: ['location', locationId],
74+
queryFn: () => getLocation(locationId),
75+
})
76+
77+
if (status === 'pending') return <span>Loading...</span>
78+
if (status === 'error') return <span>Error :(</span>
79+
80+
return (
81+
<span>
82+
{data.name} - {data.type}
83+
</span>
84+
)
85+
}
86+
87+
export default Character

‎examples/react/rick-morty/src/Characters.jsx‎

Lines changed: 0 additions & 34 deletions
This file was deleted.

‎examples/react/rick-morty/src/Characters.tsx‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import { Link as RouterLink } from 'react-router-dom'
2+
import { useQuery } from '@tanstack/react-query'
3+
import { getCharacters } from './api'
4+
5+
export default function Characters() {
6+
const { status, data } = useQuery({
7+
queryKey: ['characters'],
8+
queryFn: () => getCharacters(),
9+
})
10+
11+
if (status === 'pending') return <p>Loading...</p>
12+
if (status === 'error') return <p>Error :(</p>
13+
14+
return (
15+
<div>
16+
<h2 className="text-4xl">Characters</h2>
17+
{data.results.map((person: any) => {
18+
return (
19+
<article key={person.id}>
20+
<RouterLink
21+
className="text-blue-500 hover:underline"
22+
to={`/characters/${person.id}`}
23+
>
24+
<h6 className="text-xl">
25+
{person.name} - {person.gender}: {person.species}
26+
</h6>
27+
</RouterLink>
28+
</article>
29+
)
30+
})}
31+
</div>
32+
)
33+
}

0 commit comments

Comments
 (0)