Skip to content

Commit 4a27c6c

Browse files
brenelzbrenelz
authored
refactor: update to solid v2 for solid-query v6 (#10272)
1 parent f240e79 commit 4a27c6c

58 files changed

Lines changed: 3075 additions & 1724 deletions

Some content is hidden

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

‎.changeset/whole-coins-count.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
'@tanstack/solid-query-persist-client': major
3+
'@tanstack/solid-query-devtools': major
4+
'@tanstack/solid-query': major
5+
---
6+
7+
Support Solid 2.0

‎eslint.config.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ export default [
2727
'jscodeshift',
2828
'refetches', // Query refetch operations
2929
'retryer', // Our public interface
30+
'seroval', // Solid serialization library used in SSR
3031
'solidjs', // Our target framework
3132
'tabular-nums', // https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric
3233
'tanstack', // Our package scope

‎examples/solid/astro/package.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
"scripts": {
66
"dev": "astro dev",
77
"start": "astro dev",
8-
"build": "astro check && astro build",
8+
"build": "echo 'Skipped: waiting for @astrojs/solid-js Solid v2 support'",
99
"preview": "astro preview",
1010
"astro": "astro"
1111
},
@@ -18,7 +18,8 @@
1818
"@tanstack/solid-query": "^5.91.3",
1919
"@tanstack/solid-query-devtools": "^5.91.3",
2020
"astro": "^5.5.6",
21-
"solid-js": "^1.9.7",
21+
"@solidjs/web": "2.0.0-beta.2",
22+
"solid-js": "2.0.0-beta.2",
2223
"tailwindcss": "^3.4.7",
2324
"typescript": "5.8.3"
2425
}

‎examples/solid/astro/src/components/SolidApp.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import {
1313
createSignal,
1414
useContext,
1515
} from 'solid-js'
16-
import { isServer } from 'solid-js/web'
16+
import { isServer } from '@solidjs/web'
1717
import { getSearchParams, properCase } from '../utils'
1818
import { Link } from './Link'
1919

‎examples/solid/basic-graphql-request/package.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,12 @@
1212
"@tanstack/solid-query-devtools": "^5.91.3",
1313
"graphql": "^16.9.0",
1414
"graphql-request": "^7.1.2",
15-
"solid-js": "^1.9.7"
15+
"@solidjs/web": "2.0.0-beta.2",
16+
"solid-js": "2.0.0-beta.2"
1617
},
1718
"devDependencies": {
1819
"typescript": "5.8.3",
1920
"vite": "^6.4.1",
20-
"vite-plugin-solid": "^2.11.6"
21+
"vite-plugin-solid": "3.0.0-next.2"
2122
}
2223
}

‎examples/solid/basic-graphql-request/src/index.tsx‎

Lines changed: 35 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@ import {
55
useQuery,
66
} from '@tanstack/solid-query'
77
import { SolidQueryDevtools } from '@tanstack/solid-query-devtools'
8-
import { For, Match, Switch, createSignal } from 'solid-js'
9-
import { render } from 'solid-js/web'
8+
import { For, Loading, Match, Switch, createSignal } from 'solid-js'
9+
import { render } from '@solidjs/web'
1010
import { gql, request } from 'graphql-request'
1111
import type { Accessor, Setter } from 'solid-js'
1212

@@ -36,11 +36,13 @@ function App() {
3636
loading sequences)
3737
</strong>
3838
</p>
39-
{postId() > -1 ? (
40-
<Post postId={postId()} setPostId={setPostId} />
41-
) : (
42-
<Posts setPostId={setPostId} />
43-
)}
39+
<Loading fallback={<div>Loading...</div>}>
40+
{postId() > -1 ? (
41+
<Post postId={postId()} setPostId={setPostId} />
42+
) : (
43+
<Posts setPostId={setPostId} />
44+
)}
45+
</Loading>
4446
</QueryClientProvider>
4547
)
4648
}
@@ -85,26 +87,32 @@ function Posts(props: { setPostId: Setter<number> }) {
8587
<>
8688
<div>
8789
<For each={state.data}>
88-
{(post: any) => (
89-
<p>
90-
<a
91-
onClick={() => props.setPostId(post.id)}
92-
href="#"
93-
style={
94-
// We can find the existing query data here to show bold links for
95-
// ones that are cached
96-
queryClient.getQueryData(['post', post.id])
97-
? {
98-
'font-weight': 'bold',
99-
color: 'green',
100-
}
101-
: {}
102-
}
103-
>
104-
{post.title}
105-
</a>
106-
</p>
107-
)}
90+
{(postAccessor: any) => {
91+
const post =
92+
typeof postAccessor === 'function'
93+
? postAccessor()
94+
: postAccessor
95+
return (
96+
<p>
97+
<a
98+
onClick={() => props.setPostId(post.id)}
99+
href="#"
100+
style={
101+
// We can find the existing query data here to show bold links for
102+
// ones that are cached
103+
queryClient.getQueryData(['post', post.id])
104+
? {
105+
'font-weight': 'bold',
106+
color: 'green',
107+
}
108+
: {}
109+
}
110+
>
111+
{post.title}
112+
</a>
113+
</p>
114+
)
115+
}}
108116
</For>
109117
</div>
110118
<div>{state.isFetching ? 'Background Updating...' : ' '}</div>

‎examples/solid/basic/package.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,12 @@
1010
"dependencies": {
1111
"@tanstack/solid-query": "^5.91.3",
1212
"@tanstack/solid-query-devtools": "^5.91.3",
13-
"solid-js": "^1.9.7"
13+
"@solidjs/web": "2.0.0-beta.2",
14+
"solid-js": "2.0.0-beta.2"
1415
},
1516
"devDependencies": {
1617
"typescript": "5.8.3",
1718
"vite": "^6.4.1",
18-
"vite-plugin-solid": "^2.11.6"
19+
"vite-plugin-solid": "3.0.0-next.2"
1920
}
2021
}

‎examples/solid/basic/src/index.tsx‎

Lines changed: 33 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@ import {
55
useQuery,
66
} from '@tanstack/solid-query'
77
import { SolidQueryDevtools } from '@tanstack/solid-query-devtools'
8-
import { For, Match, Switch, createSignal } from 'solid-js'
9-
import { render } from 'solid-js/web'
8+
import { For, Loading, Match, Switch, createSignal } from 'solid-js'
9+
import { render } from '@solidjs/web'
1010
import type { Component, Setter } from 'solid-js'
1111

1212
const queryClient = new QueryClient({
@@ -49,26 +49,30 @@ function Posts(props: { setPostId: Setter<number> }) {
4949
<>
5050
<div>
5151
<For each={state.data}>
52-
{(post) => (
53-
<p>
54-
<a
55-
onClick={() => props.setPostId(post.id)}
56-
href="#"
57-
style={
58-
// We can access the query data here to show bold links for
59-
// ones that are cached
60-
queryClient.getQueryData(['post', post.id])
61-
? {
62-
'font-weight': 'bold',
63-
color: 'green',
64-
}
65-
: {}
66-
}
67-
>
68-
{post.title}
69-
</a>
70-
</p>
71-
)}
52+
{(post) => {
53+
const p =
54+
typeof post === 'function' ? (post as () => Post)() : post
55+
return (
56+
<p>
57+
<a
58+
onClick={() => props.setPostId(p.id)}
59+
href="#"
60+
style={
61+
// We can access the query data here to show bold links for
62+
// ones that are cached
63+
queryClient.getQueryData(['post', p.id])
64+
? {
65+
'font-weight': 'bold',
66+
color: 'green',
67+
}
68+
: {}
69+
}
70+
>
71+
{p.title}
72+
</a>
73+
</p>
74+
)
75+
}}
7276
</For>
7377
</div>
7478
<div>{state.isFetching ? 'Background Updating...' : ' '}</div>
@@ -142,11 +146,13 @@ const App: Component = () => {
142146
loading sequences)
143147
</strong>
144148
</p>
145-
{postId() > -1 ? (
146-
<Post postId={postId()} setPostId={setPostId} />
147-
) : (
148-
<Posts setPostId={setPostId} />
149-
)}
149+
<Loading fallback={<div>Loading...</div>}>
150+
{postId() > -1 ? (
151+
<Post postId={postId()} setPostId={setPostId} />
152+
) : (
153+
<Posts setPostId={setPostId} />
154+
)}
155+
</Loading>
150156
</QueryClientProvider>
151157
)
152158
}

‎examples/solid/default-query-function/package.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,12 @@
1010
"dependencies": {
1111
"@tanstack/solid-query": "^5.91.3",
1212
"@tanstack/solid-query-devtools": "^5.91.3",
13-
"solid-js": "^1.9.7"
13+
"@solidjs/web": "2.0.0-beta.2",
14+
"solid-js": "2.0.0-beta.2"
1415
},
1516
"devDependencies": {
1617
"typescript": "5.8.3",
1718
"vite": "^6.4.1",
18-
"vite-plugin-solid": "^2.11.6"
19+
"vite-plugin-solid": "3.0.0-next.2"
1920
}
2021
}

‎examples/solid/default-query-function/src/index.tsx‎

Lines changed: 33 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@ import {
55
useQuery,
66
} from '@tanstack/solid-query'
77
import { SolidQueryDevtools } from '@tanstack/solid-query-devtools'
8-
import { For, Match, Show, Switch, createSignal } from 'solid-js'
9-
import { render } from 'solid-js/web'
8+
import { For, Loading, Match, Show, Switch, createSignal } from 'solid-js'
9+
import { render } from '@solidjs/web'
1010
import type { Setter } from 'solid-js'
1111
import type { QueryFunction } from '@tanstack/solid-query'
1212

@@ -46,9 +46,11 @@ function App() {
4646
loading sequences)
4747
</strong>
4848
</p>
49-
<Show when={postId() > -1} fallback={<Posts setPostId={setPostId} />}>
50-
<Post postId={postId()} setPostId={setPostId} />
51-
</Show>
49+
<Loading fallback={<div>Loading...</div>}>
50+
<Show when={postId() > -1} fallback={<Posts setPostId={setPostId} />}>
51+
<Post postId={postId()} setPostId={setPostId} />
52+
</Show>
53+
</Loading>
5254
</QueryClientProvider>
5355
)
5456
}
@@ -70,26 +72,32 @@ function Posts(props: { setPostId: Setter<number> }) {
7072
<>
7173
<div>
7274
<For each={state.data}>
73-
{(post) => (
74-
<p>
75-
<a
76-
onClick={() => props.setPostId(post.id)}
77-
href="#"
78-
style={
79-
// We can use the queryCache here to show bold links for
80-
// ones that are cached
81-
queryClient.getQueryData(['post', post.id])
82-
? {
83-
'font-weight': 'bold',
84-
color: 'green',
85-
}
86-
: {}
87-
}
88-
>
89-
{post.title}
90-
</a>
91-
</p>
92-
)}
75+
{(postAccessor) => {
76+
const post =
77+
typeof postAccessor === 'function'
78+
? (postAccessor as any)()
79+
: postAccessor
80+
return (
81+
<p>
82+
<a
83+
onClick={() => props.setPostId(post.id)}
84+
href="#"
85+
style={
86+
// We can use the queryCache here to show bold links for
87+
// ones that are cached
88+
queryClient.getQueryData(['post', post.id])
89+
? {
90+
'font-weight': 'bold',
91+
color: 'green',
92+
}
93+
: {}
94+
}
95+
>
96+
{post.title}
97+
</a>
98+
</p>
99+
)
100+
}}
93101
</For>
94102
</div>
95103
<div>{state.isFetching ? 'Background Updating...' : ' '}</div>

0 commit comments

Comments
 (0)