Skip to content

Commit 1202ba0

Browse files
birkskyumbirkskyum
authored
fix(solid-query): add useQuery, useInfiniteQuery, useQueries, useMutation as alternative syntax to align with react and ease maintenance (TanStack#8938)
1 parent 8b1eff1 commit 1202ba0

22 files changed

+545
-593
lines changed

‎packages/solid-query-persist-client/src/__tests__/PersistQueryClientProvider.test.tsx

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { describe, expect, test, vi } from 'vitest'
22
import { render, screen, waitFor } from '@solidjs/testing-library'
3-
import { QueryClient, createQueries, createQuery } from '@tanstack/solid-query'
3+
import { QueryClient, useQueries, useQuery } from '@tanstack/solid-query'
44
import { persistQueryClientSave } from '@tanstack/query-persist-client-core'
55
import { createEffect, createSignal, onMount } from 'solid-js'
66

@@ -69,7 +69,7 @@ describe('PersistQueryClientProvider', () => {
6969
queryClient.clear()
7070

7171
function Page() {
72-
const state = createQuery(() => ({
72+
const state = useQuery(() => ({
7373
queryKey: key,
7474
queryFn: async () => {
7575
await sleep(10)
@@ -147,7 +147,7 @@ describe('PersistQueryClientProvider', () => {
147147
queryClient.clear()
148148

149149
function Page() {
150-
const [state] = createQueries(() => ({
150+
const [state] = useQueries(() => ({
151151
queries: [
152152
{
153153
queryKey: key,
@@ -230,7 +230,7 @@ describe('PersistQueryClientProvider', () => {
230230
queryClient.clear()
231231

232232
function Page() {
233-
const state = createQuery(() => ({
233+
const state = useQuery(() => ({
234234
queryKey: key,
235235
queryFn: async () => {
236236
await sleep(10)
@@ -315,7 +315,7 @@ describe('PersistQueryClientProvider', () => {
315315
let fetched = false
316316

317317
function Page() {
318-
const state = createQuery(() => ({
318+
const state = useQuery(() => ({
319319
queryKey: key,
320320
queryFn: async () => {
321321
fetched = true
@@ -386,7 +386,7 @@ describe('PersistQueryClientProvider', () => {
386386
queryClient.clear()
387387

388388
function Page() {
389-
const state = createQuery(() => ({
389+
const state = useQuery(() => ({
390390
queryKey: key,
391391
queryFn: async () => {
392392
await sleep(10)
@@ -432,7 +432,7 @@ describe('PersistQueryClientProvider', () => {
432432
const [error, persister] = createMockErrorPersister(removeClient)
433433

434434
function Page() {
435-
const state = createQuery(() => ({
435+
const state = useQuery(() => ({
436436
queryKey: key,
437437
queryFn: async () => {
438438
await sleep(10)
@@ -530,7 +530,7 @@ describe('PersistQueryClientProvider', () => {
530530
}
531531

532532
function Page() {
533-
const state = createQuery(() => ({ queryKey: key }))
533+
const state = useQuery(() => ({ queryKey: key }))
534534

535535
createEffect(() =>
536536
states.push({

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { describe, expect, it, vi } from 'vitest'
22
import { render, waitFor } from '@solidjs/testing-library'
33
import { QueryCache } from '@tanstack/query-core'
4-
import { QueryClientProvider, createQuery, useQueryClient } from '..'
4+
import { QueryClientProvider, useQuery, useQueryClient } from '..'
55
import { createQueryClient, queryKey, sleep } from './utils'
66

77
describe('QueryClientProvider', () => {
@@ -12,7 +12,7 @@ describe('QueryClientProvider', () => {
1212
const queryClient = createQueryClient({ queryCache })
1313

1414
function Page() {
15-
const query = createQuery(() => ({
15+
const query = useQuery(() => ({
1616
queryKey: key,
1717
queryFn: async () => {
1818
await sleep(10)
@@ -51,7 +51,7 @@ describe('QueryClientProvider', () => {
5151
const queryClient2 = createQueryClient({ queryCache: queryCache2 })
5252

5353
function Page1() {
54-
const query = createQuery(() => ({
54+
const query = useQuery(() => ({
5555
queryKey: key1,
5656
queryFn: async () => {
5757
await sleep(10)
@@ -66,7 +66,7 @@ describe('QueryClientProvider', () => {
6666
)
6767
}
6868
function Page2() {
69-
const query = createQuery(() => ({
69+
const query = useQuery(() => ({
7070
queryKey: key2,
7171
queryFn: async () => {
7272
await sleep(10)
@@ -115,7 +115,7 @@ describe('QueryClientProvider', () => {
115115
})
116116

117117
function Page() {
118-
const query = createQuery(() => ({
118+
const query = useQuery(() => ({
119119
queryKey: key,
120120
queryFn: async () => {
121121
await sleep(10)

‎packages/solid-query/src/__tests__/createQueries.test-d.tsx

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { describe, expectTypeOf, it } from 'vitest'
2-
import { createQueries, queryOptions } from '..'
3-
import type { CreateQueryResult } from '..'
2+
import { queryOptions, useQueries } from '..'
3+
import type { UseQueryResult } from '..'
44

5-
describe('createQueries', () => {
5+
describe('useQueries', () => {
66
it('should return correct data for dynamic queries with mixed result types', () => {
77
const Queries1 = {
88
get: () =>
@@ -20,15 +20,12 @@ describe('createQueries', () => {
2020
}
2121

2222
const queries1List = [1, 2, 3].map(() => ({ ...Queries1.get() }))
23-
const result = createQueries(() => ({
23+
const result = useQueries(() => ({
2424
queries: [...queries1List, { ...Queries2.get() }],
2525
}))
2626

2727
expectTypeOf(result).toEqualTypeOf<
28-
[
29-
...Array<CreateQueryResult<number, Error>>,
30-
CreateQueryResult<boolean, Error>,
31-
]
28+
[...Array<UseQueryResult<number, Error>>, UseQueryResult<boolean, Error>]
3229
>()
3330
})
3431
})

‎packages/solid-query/src/__tests__/queryOptions.test-d.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { describe, expectTypeOf, it } from 'vitest'
22
import { QueryClient, dataTagSymbol, skipToken } from '@tanstack/query-core'
3-
import { createQuery } from '../createQuery'
3+
import { useQuery } from '../useQuery'
44
import { queryOptions } from '../queryOptions'
55

66
describe('queryOptions', () => {
@@ -22,13 +22,13 @@ describe('queryOptions', () => {
2222
},
2323
})
2424
})
25-
it('should work when passed to createQuery', () => {
25+
it('should work when passed to useQuery', () => {
2626
const options = queryOptions({
2727
queryKey: ['key'],
2828
queryFn: () => Promise.resolve(5),
2929
})
3030

31-
const { data } = createQuery(() => options)
31+
const { data } = useQuery(() => options)
3232
expectTypeOf(data).toEqualTypeOf<number | undefined>()
3333
})
3434
it('should work when passed to fetchQuery', async () => {

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

Lines changed: 22 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -9,34 +9,25 @@ import {
99
createSignal,
1010
on,
1111
} from 'solid-js'
12-
import {
13-
QueryCache,
14-
QueryClientProvider,
15-
createInfiniteQuery,
16-
createQuery,
17-
} from '..'
12+
import { QueryCache, QueryClientProvider, useInfiniteQuery, useQuery } from '..'
1813
import { createQueryClient, queryKey, sleep } from './utils'
19-
import type {
20-
CreateInfiniteQueryResult,
21-
CreateQueryResult,
22-
InfiniteData,
23-
} from '..'
14+
import type { InfiniteData, UseInfiniteQueryResult, UseQueryResult } from '..'
2415

2516
describe("useQuery's in Suspense mode", () => {
2617
const queryCache = new QueryCache()
2718
const queryClient = createQueryClient({ queryCache })
2819

2920
it('should render the correct amount of times in Suspense mode', async () => {
3021
const key = queryKey()
31-
const states: Array<CreateQueryResult<number>> = []
22+
const states: Array<UseQueryResult<number>> = []
3223

3324
let count = 0
3425
let renders = 0
3526

3627
function Page() {
3728
const [stateKey, setStateKey] = createSignal(key)
3829

39-
const state = createQuery(() => ({
30+
const state = useQuery(() => ({
4031
queryKey: stateKey(),
4132
queryFn: async () => {
4233
count++
@@ -84,11 +75,11 @@ describe("useQuery's in Suspense mode", () => {
8475

8576
it('should return the correct states for a successful infinite query', async () => {
8677
const key = queryKey()
87-
const states: Array<CreateInfiniteQueryResult<InfiniteData<number>>> = []
78+
const states: Array<UseInfiniteQueryResult<InfiniteData<number>>> = []
8879

8980
function Page() {
9081
const [multiplier, setMultiplier] = createSignal(1)
91-
const state = createInfiniteQuery(() => ({
82+
const state = useInfiniteQuery(() => ({
9283
queryKey: [`${key}_${multiplier()}`],
9384
queryFn: async ({ pageParam }) => {
9485
await sleep(10)
@@ -152,7 +143,7 @@ describe("useQuery's in Suspense mode", () => {
152143
})
153144

154145
function Page() {
155-
createQuery(() => ({ queryKey: [key], queryFn, suspense: true }))
146+
useQuery(() => ({ queryKey: [key], queryFn, suspense: true }))
156147

157148
return <>rendered</>
158149
}
@@ -174,7 +165,7 @@ describe("useQuery's in Suspense mode", () => {
174165
const key = queryKey()
175166

176167
function Page() {
177-
createQuery(() => ({
168+
useQuery(() => ({
178169
queryKey: key,
179170
queryFn: () => {
180171
sleep(10)
@@ -226,7 +217,7 @@ describe("useQuery's in Suspense mode", () => {
226217
let succeed = false
227218

228219
function Page() {
229-
const state = createQuery(() => ({
220+
const state = useQuery(() => ({
230221
queryKey: key,
231222
queryFn: async () => {
232223
await sleep(10)
@@ -289,7 +280,7 @@ describe("useQuery's in Suspense mode", () => {
289280
let succeed = false
290281

291282
function Page() {
292-
const state = createQuery(() => ({
283+
const state = useQuery(() => ({
293284
queryKey: key,
294285
queryFn: async () => {
295286
await sleep(10)
@@ -350,7 +341,7 @@ describe("useQuery's in Suspense mode", () => {
350341
let count = 0
351342

352343
function Component() {
353-
const result = createQuery(() => ({
344+
const result = useQuery(() => ({
354345
queryKey: key,
355346
queryFn: async () => {
356347
await sleep(100)
@@ -409,7 +400,7 @@ describe("useQuery's in Suspense mode", () => {
409400
const key2 = queryKey()
410401

411402
function Component(props: { queryKey: Array<string> }) {
412-
const result = createQuery(() => ({
403+
const result = useQuery(() => ({
413404
queryKey: props.queryKey,
414405
queryFn: async () => {
415406
await sleep(100)
@@ -460,7 +451,7 @@ describe("useQuery's in Suspense mode", () => {
460451
.mockImplementation(() => undefined)
461452

462453
function Page() {
463-
const state = createQuery(() => ({
454+
const state = useQuery(() => ({
464455
queryKey: key,
465456
queryFn: async (): Promise<unknown> => {
466457
await sleep(10)
@@ -510,7 +501,7 @@ describe("useQuery's in Suspense mode", () => {
510501
const key = queryKey()
511502

512503
function Page() {
513-
const state = createQuery(() => ({
504+
const state = useQuery(() => ({
514505
queryKey: key,
515506
queryFn: async (): Promise<unknown> => {
516507
await sleep(10)
@@ -562,7 +553,7 @@ describe("useQuery's in Suspense mode", () => {
562553
.mockImplementation(() => undefined)
563554

564555
function Page() {
565-
const state = createQuery(() => ({
556+
const state = useQuery(() => ({
566557
queryKey: key,
567558
queryFn: async (): Promise<unknown> => {
568559
await sleep(10)
@@ -612,7 +603,7 @@ describe("useQuery's in Suspense mode", () => {
612603
const key = queryKey()
613604

614605
function Page() {
615-
const state = createQuery(() => ({
606+
const state = useQuery(() => ({
616607
queryKey: key,
617608
queryFn: async (): Promise<unknown> => {
618609
await sleep(10)
@@ -669,7 +660,7 @@ describe("useQuery's in Suspense mode", () => {
669660

670661
function Page() {
671662
const [enabled, setEnabled] = createSignal(false)
672-
const result = createQuery(() => ({
663+
const result = useQuery(() => ({
673664
queryKey: [key],
674665
queryFn,
675666
suspense: true,
@@ -715,7 +706,7 @@ describe("useQuery's in Suspense mode", () => {
715706
function Page() {
716707
const [nonce] = createSignal(0)
717708
const queryKeys = [`${key}-${succeed}`]
718-
const result = createQuery(() => ({
709+
const result = useQuery(() => ({
719710
queryKey: queryKeys,
720711
queryFn: async () => {
721712
await sleep(10)
@@ -784,7 +775,7 @@ describe("useQuery's in Suspense mode", () => {
784775
function Page() {
785776
const [key, setKey] = createSignal(0)
786777

787-
const result = createQuery(() => ({
778+
const result = useQuery(() => ({
788779
queryKey: [`${key()}-${succeed}`],
789780
queryFn: async () => {
790781
await sleep(10)
@@ -847,7 +838,7 @@ describe("useQuery's in Suspense mode", () => {
847838
const queryKeys = '1'
848839
const [enabled, setEnabled] = createSignal(false)
849840

850-
const result = createQuery<string>(() => ({
841+
const result = useQuery<string>(() => ({
851842
queryKey: [queryKeys],
852843
queryFn: async () => {
853844
await sleep(10)
@@ -906,13 +897,13 @@ describe("useQuery's in Suspense mode", () => {
906897

907898
it('should render the correct amount of times in Suspense mode when gcTime is set to 0', async () => {
908899
const key = queryKey()
909-
let state: CreateQueryResult<number> | null = null
900+
let state: UseQueryResult<number> | null = null
910901

911902
let count = 0
912903
let renders = 0
913904

914905
function Page() {
915-
state = createQuery(() => ({
906+
state = useQuery(() => ({
916907
queryKey: key,
917908
queryFn: async () => {
918909
count++

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
11
import { describe, it } from 'vitest'
22
import { fireEvent, render, waitFor } from '@solidjs/testing-library'
33
import { Show, Suspense, createSignal, startTransition } from 'solid-js'
4-
import { QueryCache, QueryClientProvider, createQuery } from '..'
4+
import { QueryCache, QueryClientProvider, useQuery } from '..'
55
import { createQueryClient, queryKey, sleep } from './utils'
66

7-
describe("createQuery's in Suspense mode with transitions", () => {
7+
describe("useQuery's in Suspense mode with transitions", () => {
88
const queryCache = new QueryCache()
99
const queryClient = createQueryClient({ queryCache })
1010

1111
it('should render the content when the transition is done', async () => {
1212
const key = queryKey()
1313

1414
function Suspended() {
15-
const state = createQuery(() => ({
15+
const state = useQuery(() => ({
1616
queryKey: key,
1717
queryFn: async () => {
1818
await sleep(10)

0 commit comments

Comments
 (0)