Skip to content

Commit ce2febd

Browse files
sukvvonsukvvon
authored
docs(examples/solid): add 'star-wars', 'rick-morty' and 'solid-router' examples (#12424)
1 parent 35ee52a commit ce2febd

78 files changed

Lines changed: 2430 additions & 0 deletions

Some content is hidden

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

‎docs/config.json‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6857,6 +6857,18 @@
68576857
{
68586858
"label": "Devtools Embedded Panel",
68596859
"to": "framework/solid/examples/devtools-panel"
6860+
},
6861+
{
6862+
"label": "Star Wars",
6863+
"to": "framework/solid/examples/star-wars"
6864+
},
6865+
{
6866+
"label": "Rick And Morty",
6867+
"to": "framework/solid/examples/rick-morty"
6868+
},
6869+
{
6870+
"label": "Solid Router",
6871+
"to": "framework/solid/examples/solid-router"
68606872
}
68616873
]
68626874
},

‎examples/solid/rick-morty/.gitignore‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
node_modules
2+
dist
3+
.yalc
4+
yalc.lock

‎examples/solid/rick-morty/README.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
# Example
2+
3+
To run this example:
4+
5+
- `pnpm install`
6+
- `pnpm dev`

‎examples/solid/rick-morty/eslint.config.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
// @ts-check
2+
3+
import { tanstackConfig } from '@tanstack/eslint-config'
4+
import pluginQuery from '@tanstack/eslint-plugin-query'
5+
import pluginSolid from 'eslint-plugin-solid/configs/typescript'
6+
import { defineConfig } from 'eslint/config'
7+
8+
export default defineConfig([
9+
...tanstackConfig,
10+
...pluginQuery.configs['flat/recommended-strict'],
11+
pluginSolid,
12+
])

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

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<link rel="shortcut icon" type="image/svg+xml" href="/emblem-light.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1" />
7+
<meta name="theme-color" content="#000000" />
8+
9+
<title>TanStack Query Solid Rick And Morty Example App</title>
10+
</head>
11+
<body>
12+
<noscript>You need to enable JavaScript to run this app.</noscript>
13+
<div id="root"></div>
14+
<script type="module" src="/src/index.tsx"></script>
15+
</body>
16+
</html>

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

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
{
2+
"name": "@tanstack/query-example-solid-rick-morty",
3+
"private": true,
4+
"type": "module",
5+
"scripts": {
6+
"dev": "vite",
7+
"build": "vite build",
8+
"preview": "vite preview",
9+
"test:eslint": "eslint ./src",
10+
"test:types": "tsc --noEmit"
11+
},
12+
"dependencies": {
13+
"@solidjs/router": "^1.0.0",
14+
"@tanstack/solid-query": "^5.105.0",
15+
"@tanstack/solid-query-devtools": "^5.105.0",
16+
"solid-js": "^1.9.15"
17+
},
18+
"devDependencies": {
19+
"@tailwindcss/vite": "^4.3.3",
20+
"@tanstack/eslint-plugin-query": "^5.105.0",
21+
"eslint-plugin-solid": "^0.18.1",
22+
"tailwindcss": "^4.3.3",
23+
"typescript": "^6.0.3",
24+
"vite": "^8.3.1",
25+
"vite-plugin-solid": "^2.11.14"
26+
}
27+
}

‎examples/solid/rick-morty/public/emblem-light.svg‎

Lines changed: 13 additions & 0 deletions
Loading

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

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import { Route, Router } from '@solidjs/router'
2+
import { QueryClient, QueryClientProvider } from '@tanstack/solid-query'
3+
import { SolidQueryDevtools } from '@tanstack/solid-query-devtools'
4+
import Layout from './Layout'
5+
import Episodes from './Episodes'
6+
import Episode from './Episode'
7+
import Characters from './Characters'
8+
import Character from './Character'
9+
import Home from './Home'
10+
11+
import './styles.css'
12+
13+
const queryClient = new QueryClient()
14+
15+
export default function App() {
16+
return (
17+
<QueryClientProvider client={queryClient}>
18+
<Router root={Layout}>
19+
<Route path="/episodes" component={Episodes} />
20+
<Route path="/episodes/:episodeId" component={Episode} />
21+
<Route path="/characters" component={Characters} />
22+
<Route path="/characters/:characterId" component={Character} />
23+
<Route path="/" component={Home} />
24+
</Router>
25+
<SolidQueryDevtools initialIsOpen />
26+
</QueryClientProvider>
27+
)
28+
}

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

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
import { For, Match, Show, Switch } from 'solid-js'
2+
import { A, useParams } from '@solidjs/router'
3+
import { useQuery } from '@tanstack/solid-query'
4+
import { charactersQueries } from './services/characters/queries'
5+
import { episodesQueries } from './services/episodes/queries'
6+
import { locationsQueries } from './services/locations/queries'
7+
8+
function Character() {
9+
const params = useParams<{ characterId: string }>()
10+
11+
const query = useQuery(() => charactersQueries.detail(params.characterId))
12+
13+
return (
14+
<Switch>
15+
<Match when={query.status === 'pending'}>
16+
<p>Loading...</p>
17+
</Match>
18+
<Match when={query.status === 'error'}>
19+
<p>Error :(</p>
20+
</Match>
21+
<Match when={query.data}>
22+
{(data) => {
23+
const locationId = () => {
24+
const locationUrlParts = data()
25+
.location.url.split('/')
26+
.filter(Boolean)
27+
return locationUrlParts[locationUrlParts.length - 1]
28+
}
29+
30+
return (
31+
<div>
32+
<h2 class="text-4xl">{data().name}</h2>
33+
<p>
34+
<strong>Gender</strong>: {data().gender}
35+
</p>
36+
<p>
37+
<strong>Status</strong>: {data().status}
38+
</p>
39+
<p>
40+
<strong>Species</strong>: {data().species}
41+
</p>
42+
<p>
43+
<strong>Origin</strong>: {data().origin.name}
44+
</p>
45+
<p>
46+
<strong>Location</strong>:{' '}
47+
<Location locationId={locationId()} />
48+
</p>
49+
50+
<h4 class="text-2xl pt-4">Episodes</h4>
51+
<For each={data().episode}>
52+
{(episode) => {
53+
const episodeUrlParts = episode.split('/').filter(Boolean)
54+
const episodeId = episodeUrlParts[episodeUrlParts.length - 1]
55+
return <Episode episodeId={episodeId} />
56+
}}
57+
</For>
58+
</div>
59+
)
60+
}}
61+
</Match>
62+
</Switch>
63+
)
64+
}
65+
66+
function Episode(props: { episodeId: string }) {
67+
const query = useQuery(() => episodesQueries.detail(props.episodeId))
68+
69+
return (
70+
<Show when={query.status === 'success' && query.data}>
71+
{(data) => (
72+
<article>
73+
<A
74+
class="text-blue-500 hover:underline"
75+
href={`/episodes/${props.episodeId}`}
76+
>
77+
<h6 class="text-lg">
78+
{data().episode}. {data().name} - {data().air_date}
79+
</h6>
80+
</A>
81+
</article>
82+
)}
83+
</Show>
84+
)
85+
}
86+
87+
function Location(props: { locationId: string }) {
88+
const query = useQuery(() => locationsQueries.detail(props.locationId))
89+
90+
return (
91+
<Switch>
92+
<Match when={query.status === 'pending'}>
93+
<span>Loading...</span>
94+
</Match>
95+
<Match when={query.status === 'error'}>
96+
<span>Error :(</span>
97+
</Match>
98+
<Match when={query.data}>
99+
{(data) => (
100+
<span>
101+
{data().name} - {data().type}
102+
</span>
103+
)}
104+
</Match>
105+
</Switch>
106+
)
107+
}
108+
109+
export default Character

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

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import { For, Match, Switch } from 'solid-js'
2+
import { A } from '@solidjs/router'
3+
import { useQuery } from '@tanstack/solid-query'
4+
import { charactersQueries } from './services/characters/queries'
5+
6+
export default function Characters() {
7+
const query = useQuery(() => charactersQueries.list())
8+
9+
return (
10+
<Switch>
11+
<Match when={query.status === 'pending'}>
12+
<p>Loading...</p>
13+
</Match>
14+
<Match when={query.status === 'error'}>
15+
<p>Error :(</p>
16+
</Match>
17+
<Match when={query.data}>
18+
{(data) => (
19+
<div>
20+
<h2 class="text-4xl">Characters</h2>
21+
<For each={data().results}>
22+
{(person) => (
23+
<article>
24+
<A
25+
class="text-blue-500 hover:underline"
26+
href={`/characters/${person.id}`}
27+
>
28+
<h6 class="text-xl">
29+
{person.name} - {person.gender}: {person.species}
30+
</h6>
31+
</A>
32+
</article>
33+
)}
34+
</For>
35+
</div>
36+
)}
37+
</Match>
38+
</Switch>
39+
)
40+
}

0 commit comments

Comments
 (0)