Skip to content

Commit 76fa68e

Browse files
2wheeh2wheeh
authored
refactor(solid-query): solid 2 reactivity compliance (#10316)
1 parent 9a490e7 commit 76fa68e

File tree

10 files changed

+142
-107
lines changed

10 files changed

+142
-107
lines changed

‎.changeset/legal-signs-call.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': patch
3+
'@tanstack/solid-query-devtools': patch
4+
'@tanstack/solid-query': patch
5+
---
6+
7+
refactor: solid 2 reactivity compliance

‎packages/solid-query/src/__tests__/mutationOptions.test.tsx‎

Lines changed: 36 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -48,15 +48,15 @@ describe('mutationOptions', () => {
4848

4949
function Mutation() {
5050
const isMutating = useIsMutating()
51-
const { mutate } = useMutation(() => mutationOpts)
51+
const mutation = useMutation(() => mutationOpts)
5252

5353
createRenderEffect(isMutating, (count) => {
5454
isMutatingArray.push(count)
5555
})
5656

5757
return (
5858
<div>
59-
<button onClick={() => mutate()}>mutate</button>
59+
<button onClick={() => mutation.mutate()}>mutate</button>
6060
</div>
6161
)
6262
}
@@ -85,15 +85,15 @@ describe('mutationOptions', () => {
8585

8686
function Mutation() {
8787
const isMutating = useIsMutating()
88-
const { mutate } = useMutation(() => mutationOpts)
88+
const mutation = useMutation(() => mutationOpts)
8989

9090
createRenderEffect(isMutating, (count) => {
9191
isMutatingArray.push(count)
9292
})
9393

9494
return (
9595
<div>
96-
<button onClick={() => mutate()}>mutate</button>
96+
<button onClick={() => mutation.mutate()}>mutate</button>
9797
</div>
9898
)
9999
}
@@ -126,17 +126,17 @@ describe('mutationOptions', () => {
126126

127127
function Mutation() {
128128
const isMutating = useIsMutating()
129-
const { mutate: mutate1 } = useMutation(() => mutationOpts1)
130-
const { mutate: mutate2 } = useMutation(() => mutationOpts2)
129+
const mutation1 = useMutation(() => mutationOpts1)
130+
const mutation2 = useMutation(() => mutationOpts2)
131131

132132
createRenderEffect(isMutating, (count) => {
133133
isMutatingArray.push(count)
134134
})
135135

136136
return (
137137
<div>
138-
<button onClick={() => mutate1()}>mutate1</button>
139-
<button onClick={() => mutate2()}>mutate2</button>
138+
<button onClick={() => mutation1.mutate()}>mutate1</button>
139+
<button onClick={() => mutation2.mutate()}>mutate2</button>
140140
</div>
141141
)
142142
}
@@ -171,17 +171,17 @@ describe('mutationOptions', () => {
171171
const isMutating = useIsMutating(() => ({
172172
mutationKey: mutationOpts1.mutationKey,
173173
}))
174-
const { mutate: mutate1 } = useMutation(() => mutationOpts1)
175-
const { mutate: mutate2 } = useMutation(() => mutationOpts2)
174+
const mutation1 = useMutation(() => mutationOpts1)
175+
const mutation2 = useMutation(() => mutationOpts2)
176176

177177
createRenderEffect(isMutating, (count) => {
178178
isMutatingArray.push(count)
179179
})
180180

181181
return (
182182
<div>
183-
<button onClick={() => mutate1()}>mutate1</button>
184-
<button onClick={() => mutate2()}>mutate2</button>
183+
<button onClick={() => mutation1.mutate()}>mutate1</button>
184+
<button onClick={() => mutation2.mutate()}>mutate2</button>
185185
</div>
186186
)
187187
}
@@ -211,11 +211,11 @@ describe('mutationOptions', () => {
211211
})
212212

213213
function Mutation() {
214-
const { mutate } = useMutation(() => mutationOpts)
214+
const mutation = useMutation(() => mutationOpts)
215215

216216
return (
217217
<div>
218-
<button onClick={() => mutate()}>mutate</button>
218+
<button onClick={() => mutation.mutate()}>mutate</button>
219219
</div>
220220
)
221221
}
@@ -252,11 +252,11 @@ describe('mutationOptions', () => {
252252
})
253253

254254
function Mutation() {
255-
const { mutate } = useMutation(() => mutationOpts)
255+
const mutation = useMutation(() => mutationOpts)
256256

257257
return (
258258
<div>
259-
<button onClick={() => mutate()}>mutate</button>
259+
<button onClick={() => mutation.mutate()}>mutate</button>
260260
</div>
261261
)
262262
}
@@ -297,13 +297,13 @@ describe('mutationOptions', () => {
297297
})
298298

299299
function Mutation() {
300-
const { mutate: mutate1 } = useMutation(() => mutationOpts1)
301-
const { mutate: mutate2 } = useMutation(() => mutationOpts2)
300+
const mutation1 = useMutation(() => mutationOpts1)
301+
const mutation2 = useMutation(() => mutationOpts2)
302302

303303
return (
304304
<div>
305-
<button onClick={() => mutate1()}>mutate1</button>
306-
<button onClick={() => mutate2()}>mutate2</button>
305+
<button onClick={() => mutation1.mutate()}>mutate1</button>
306+
<button onClick={() => mutation2.mutate()}>mutate2</button>
307307
</div>
308308
)
309309
}
@@ -345,13 +345,13 @@ describe('mutationOptions', () => {
345345
})
346346

347347
function Mutation() {
348-
const { mutate: mutate1 } = useMutation(() => mutationOpts1)
349-
const { mutate: mutate2 } = useMutation(() => mutationOpts2)
348+
const mutation1 = useMutation(() => mutationOpts1)
349+
const mutation2 = useMutation(() => mutationOpts2)
350350

351351
return (
352352
<div>
353-
<button onClick={() => mutate1()}>mutate1</button>
354-
<button onClick={() => mutate2()}>mutate2</button>
353+
<button onClick={() => mutation1.mutate()}>mutate1</button>
354+
<button onClick={() => mutation2.mutate()}>mutate2</button>
355355
</div>
356356
)
357357
}
@@ -398,7 +398,7 @@ describe('mutationOptions', () => {
398398
})
399399

400400
function Mutation() {
401-
const { mutate } = useMutation(() => mutationOpts)
401+
const mutation = useMutation(() => mutationOpts)
402402
const states = useMutationState(() => ({
403403
filters: { mutationKey: mutationOpts.mutationKey, status: 'success' },
404404
}))
@@ -412,7 +412,7 @@ describe('mutationOptions', () => {
412412

413413
return (
414414
<div>
415-
<button onClick={() => mutate()}>mutate</button>
415+
<button onClick={() => mutation.mutate()}>mutate</button>
416416
</div>
417417
)
418418
}
@@ -441,7 +441,7 @@ describe('mutationOptions', () => {
441441
})
442442

443443
function Mutation() {
444-
const { mutate } = useMutation(() => mutationOpts)
444+
const mutation = useMutation(() => mutationOpts)
445445
const states = useMutationState(() => ({
446446
filters: { status: 'success' },
447447
}))
@@ -455,7 +455,7 @@ describe('mutationOptions', () => {
455455

456456
return (
457457
<div>
458-
<button onClick={() => mutate()}>mutate</button>
458+
<button onClick={() => mutation.mutate()}>mutate</button>
459459
</div>
460460
)
461461
}
@@ -488,8 +488,8 @@ describe('mutationOptions', () => {
488488
})
489489

490490
function Mutation() {
491-
const { mutate: mutate1 } = useMutation(() => mutationOpts1)
492-
const { mutate: mutate2 } = useMutation(() => mutationOpts2)
491+
const mutation1 = useMutation(() => mutationOpts1)
492+
const mutation2 = useMutation(() => mutationOpts2)
493493
const states = useMutationState(() => ({
494494
filters: { status: 'success' },
495495
}))
@@ -503,8 +503,8 @@ describe('mutationOptions', () => {
503503

504504
return (
505505
<div>
506-
<button onClick={() => mutate1()}>mutate1</button>
507-
<button onClick={() => mutate2()}>mutate2</button>
506+
<button onClick={() => mutation1.mutate()}>mutate1</button>
507+
<button onClick={() => mutation2.mutate()}>mutate2</button>
508508
</div>
509509
)
510510
}
@@ -539,8 +539,8 @@ describe('mutationOptions', () => {
539539
})
540540

541541
function Mutation() {
542-
const { mutate: mutate1 } = useMutation(() => mutationOpts1)
543-
const { mutate: mutate2 } = useMutation(() => mutationOpts2)
542+
const mutation1 = useMutation(() => mutationOpts1)
543+
const mutation2 = useMutation(() => mutationOpts2)
544544
const states = useMutationState(() => ({
545545
filters: { mutationKey: mutationOpts1.mutationKey, status: 'success' },
546546
}))
@@ -554,8 +554,8 @@ describe('mutationOptions', () => {
554554

555555
return (
556556
<div>
557-
<button onClick={() => mutate1()}>mutate1</button>
558-
<button onClick={() => mutate2()}>mutate2</button>
557+
<button onClick={() => mutation1.mutate()}>mutate1</button>
558+
<button onClick={() => mutation2.mutate()}>mutate2</button>
559559
</div>
560560
)
561561
}

‎packages/solid-query/src/__tests__/useIsMutating.test.tsx‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
22
import { fireEvent, render } from '@solidjs/testing-library'
3-
import { Show, createRenderEffect, createSignal } from 'solid-js'
3+
import { Show, createRenderEffect, createSignal, untrack } from 'solid-js'
44
import * as QueryCore from '@tanstack/query-core'
55
import { sleep } from '@tanstack/query-test-utils'
66
import {
@@ -35,18 +35,18 @@ describe('useIsMutating', () => {
3535
}
3636

3737
function Mutations() {
38-
const { mutate: mutate1 } = useMutation(() => ({
38+
const mutation1 = useMutation(() => ({
3939
mutationKey: ['mutation1'],
4040
mutationFn: () => sleep(150).then(() => 'data'),
4141
}))
42-
const { mutate: mutate2 } = useMutation(() => ({
42+
const mutation2 = useMutation(() => ({
4343
mutationKey: ['mutation2'],
4444
mutationFn: () => sleep(50).then(() => 'data'),
4545
}))
4646

47-
mutate1()
47+
untrack(() => mutation1.mutate())
4848
setActTimeout(() => {
49-
mutate2()
49+
mutation2.mutate()
5050
}, 50)
5151

5252
return null
@@ -87,18 +87,18 @@ describe('useIsMutating', () => {
8787
}
8888

8989
function Page() {
90-
const { mutate: mutate1 } = useMutation(() => ({
90+
const mutation1 = useMutation(() => ({
9191
mutationKey: ['mutation1'],
9292
mutationFn: () => sleep(100).then(() => 'data'),
9393
}))
94-
const { mutate: mutate2 } = useMutation(() => ({
94+
const mutation2 = useMutation(() => ({
9595
mutationKey: ['mutation2'],
9696
mutationFn: () => sleep(100).then(() => 'data'),
9797
}))
9898

9999
setActTimeout(() => {
100-
mutate1()
101-
mutate2()
100+
mutation1.mutate()
101+
mutation2.mutate()
102102
}, 10)
103103

104104
return <IsMutating />
@@ -135,18 +135,18 @@ describe('useIsMutating', () => {
135135
}
136136

137137
function Page() {
138-
const { mutate: mutate1 } = useMutation(() => ({
138+
const mutation1 = useMutation(() => ({
139139
mutationKey: ['mutation1'],
140140
mutationFn: () => sleep(100).then(() => 'data'),
141141
}))
142-
const { mutate: mutate2 } = useMutation(() => ({
142+
const mutation2 = useMutation(() => ({
143143
mutationKey: ['mutation2'],
144144
mutationFn: () => sleep(100).then(() => 'data'),
145145
}))
146146

147147
setActTimeout(() => {
148-
mutate1()
149-
mutate2()
148+
mutation1.mutate()
149+
mutation2.mutate()
150150
}, 10)
151151

152152
return <IsMutating />
@@ -170,7 +170,7 @@ describe('useIsMutating', () => {
170170

171171
function Page() {
172172
const isMutating = useIsMutating(undefined, () => queryClient)
173-
const { mutate } = useMutation(
173+
const mutation = useMutation(
174174
() => ({
175175
mutationKey: ['mutation1'],
176176
mutationFn: () => sleep(20).then(() => 'data'),
@@ -179,7 +179,7 @@ describe('useIsMutating', () => {
179179
)
180180

181181
setActTimeout(() => {
182-
mutate()
182+
mutation.mutate()
183183
}, 10)
184184

185185
return (
@@ -225,12 +225,12 @@ describe('useIsMutating', () => {
225225
function Page() {
226226
const [mounted, setMounted] = createSignal(true)
227227

228-
const { mutate: mutate1 } = useMutation(() => ({
228+
const mutation1 = useMutation(() => ({
229229
mutationKey: ['mutation1'],
230230
mutationFn: () => sleep(10).then(() => 'data'),
231231
}))
232232

233-
mutate1()
233+
untrack(() => mutation1.mutate())
234234

235235
return (
236236
<div>

0 commit comments

Comments
 (0)