Skip to content

Commit 395a509

Browse files
TkDodoTkDodo
committed
fix(useQuery): pass TQueryKey down to queryObserver
for more type safety and to make queryKeyHashFn generic as well
1 parent bb437eb commit 395a509

File tree

7 files changed

+219
-89
lines changed

7 files changed

+219
-89
lines changed

‎src/core/query.ts‎

Lines changed: 40 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -22,12 +22,17 @@ import { Retryer, CancelOptions, isCancelledError } from './retryer'
2222

2323
// TYPES
2424

25-
interface QueryConfig<TQueryFnData, TError, TData> {
25+
interface QueryConfig<
26+
TQueryFnData,
27+
TError,
28+
TData,
29+
TQueryKey extends QueryKey = QueryKey
30+
> {
2631
cache: QueryCache
27-
queryKey: QueryKey
32+
queryKey: TQueryKey
2833
queryHash: string
29-
options?: QueryOptions<TQueryFnData, TError, TData>
30-
defaultOptions?: QueryOptions<TQueryFnData, TError, TData>
34+
options?: QueryOptions<TQueryFnData, TError, TData, TQueryKey>
35+
defaultOptions?: QueryOptions<TQueryFnData, TError, TData, TQueryKey>
3136
state?: QueryState<TData, TError>
3237
}
3338

@@ -46,20 +51,28 @@ export interface QueryState<TData = unknown, TError = unknown> {
4651
status: QueryStatus
4752
}
4853

49-
export interface FetchContext<TQueryFnData, TError, TData> {
54+
export interface FetchContext<
55+
TQueryFnData,
56+
TError,
57+
TData,
58+
TQueryKey extends QueryKey = QueryKey
59+
> {
5060
fetchFn: () => unknown | Promise<unknown>
5161
fetchOptions?: FetchOptions
52-
options: QueryOptions<TQueryFnData, TError, TData>
53-
queryKey: QueryKey
62+
options: QueryOptions<TQueryFnData, TError, TData, TQueryKey>
63+
queryKey: TQueryKey
5464
state: QueryState<TData, TError>
5565
}
5666

5767
export interface QueryBehavior<
5868
TQueryFnData = unknown,
5969
TError = unknown,
60-
TData = TQueryFnData
70+
TData = TQueryFnData,
71+
TQueryKey extends QueryKey = QueryKey
6172
> {
62-
onFetch: (context: FetchContext<TQueryFnData, TError, TData>) => void
73+
onFetch: (
74+
context: FetchContext<TQueryFnData, TError, TData, TQueryKey>
75+
) => void
6376
}
6477

6578
export interface FetchOptions {
@@ -128,11 +141,12 @@ export interface SetStateOptions {
128141
export class Query<
129142
TQueryFnData = unknown,
130143
TError = unknown,
131-
TData = TQueryFnData
144+
TData = TQueryFnData,
145+
TQueryKey extends QueryKey = QueryKey
132146
> {
133-
queryKey: QueryKey
147+
queryKey: TQueryKey
134148
queryHash: string
135-
options!: QueryOptions<TQueryFnData, TError, TData>
149+
options!: QueryOptions<TQueryFnData, TError, TData, TQueryKey>
136150
initialState: QueryState<TData, TError>
137151
revertState?: QueryState<TData, TError>
138152
state: QueryState<TData, TError>
@@ -142,10 +156,10 @@ export class Query<
142156
private promise?: Promise<TData>
143157
private gcTimeout?: number
144158
private retryer?: Retryer<TData, TError>
145-
private observers: QueryObserver<any, any, any, any>[]
146-
private defaultOptions?: QueryOptions<TQueryFnData, TError, TData>
159+
private observers: QueryObserver<any, any, any, any, any>[]
160+
private defaultOptions?: QueryOptions<TQueryFnData, TError, TData, TQueryKey>
147161

148-
constructor(config: QueryConfig<TQueryFnData, TError, TData>) {
162+
constructor(config: QueryConfig<TQueryFnData, TError, TData, TQueryKey>) {
149163
this.defaultOptions = config.defaultOptions
150164
this.setOptions(config.options)
151165
this.observers = []
@@ -158,7 +172,7 @@ export class Query<
158172
}
159173

160174
private setOptions(
161-
options?: QueryOptions<TQueryFnData, TError, TData>
175+
options?: QueryOptions<TQueryFnData, TError, TData, TQueryKey>
162176
): void {
163177
this.options = { ...this.defaultOptions, ...options }
164178

@@ -169,7 +183,9 @@ export class Query<
169183
)
170184
}
171185

172-
setDefaultOptions(options: QueryOptions<TQueryFnData, TError, TData>): void {
186+
setDefaultOptions(
187+
options: QueryOptions<TQueryFnData, TError, TData, TQueryKey>
188+
): void {
173189
this.defaultOptions = options
174190
}
175191

@@ -290,7 +306,7 @@ export class Query<
290306
this.retryer?.continue()
291307
}
292308

293-
addObserver(observer: QueryObserver<any, any, any, any>): void {
309+
addObserver(observer: QueryObserver<any, any, any, any, any>): void {
294310
if (this.observers.indexOf(observer) === -1) {
295311
this.observers.push(observer)
296312

@@ -301,7 +317,7 @@ export class Query<
301317
}
302318
}
303319

304-
removeObserver(observer: QueryObserver<any, any, any, any>): void {
320+
removeObserver(observer: QueryObserver<any, any, any, any, any>): void {
305321
if (this.observers.indexOf(observer) !== -1) {
306322
this.observers = this.observers.filter(x => x !== observer)
307323

@@ -334,7 +350,7 @@ export class Query<
334350
}
335351

336352
fetch(
337-
options?: QueryOptions<TQueryFnData, TError, TData>,
353+
options?: QueryOptions<TQueryFnData, TError, TData, TQueryKey>,
338354
fetchOptions?: FetchOptions
339355
): Promise<TData> {
340356
if (this.state.isFetching) {
@@ -363,7 +379,7 @@ export class Query<
363379

364380
// Create query function context
365381
const queryKey = ensureArray(this.queryKey)
366-
const queryFnContext: QueryFunctionContext = {
382+
const queryFnContext: QueryFunctionContext<unknown[]> = {
367383
queryKey,
368384
pageParam: undefined,
369385
}
@@ -375,7 +391,7 @@ export class Query<
375391
: Promise.reject('Missing queryFn')
376392

377393
// Trigger behavior hook
378-
const context: FetchContext<TQueryFnData, TError, TData> = {
394+
const context: FetchContext<TQueryFnData, TError, TData, any> = {
379395
fetchOptions,
380396
options: this.options,
381397
queryKey,
@@ -421,7 +437,7 @@ export class Query<
421437
if (!isCancelledError(error)) {
422438
// Notify cache callback
423439
if (this.cache.config.onError) {
424-
this.cache.config.onError(error, this as Query)
440+
this.cache.config.onError(error, this as Query<any, any, any, any>)
425441
}
426442

427443
// Log error
@@ -464,7 +480,7 @@ export class Query<
464480
}
465481

466482
protected getDefaultState(
467-
options: QueryOptions<TQueryFnData, TError, TData>
483+
options: QueryOptions<TQueryFnData, TError, TData, TQueryKey>
468484
): QueryState<TData, TError> {
469485
const data =
470486
typeof options.initialData === 'function'

‎src/core/queryCache.ts‎

Lines changed: 23 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -18,40 +18,40 @@ interface QueryCacheConfig {
1818
}
1919

2020
interface QueryHashMap {
21-
[hash: string]: Query<any, any>
21+
[hash: string]: Query<any, any, any, any>
2222
}
2323

2424
interface NotifyEventQueryAdded {
2525
type: 'queryAdded'
26-
query: Query<any, any>
26+
query: Query<any, any, any, any>
2727
}
2828

2929
interface NotifyEventQueryRemoved {
3030
type: 'queryRemoved'
31-
query: Query<any, any>
31+
query: Query<any, any, any, any>
3232
}
3333

3434
interface NotifyEventQueryUpdated {
3535
type: 'queryUpdated'
36-
query: Query<any, any>
36+
query: Query<any, any, any, any>
3737
action: Action<any, any>
3838
}
3939

4040
interface NotifyEventObserverAdded {
4141
type: 'observerAdded'
42-
query: Query<any, any>
43-
observer: QueryObserver<any, any, any, any>
42+
query: Query<any, any, any, any>
43+
observer: QueryObserver<any, any, any, any, any>
4444
}
4545

4646
interface NotifyEventObserverRemoved {
4747
type: 'observerRemoved'
48-
query: Query<any, any>
49-
observer: QueryObserver<any, any, any, any>
48+
query: Query<any, any, any, any>
49+
observer: QueryObserver<any, any, any, any, any>
5050
}
5151

5252
interface NotifyEventObserverResultsUpdated {
5353
type: 'observerResultsUpdated'
54-
query: Query<any, any>
54+
query: Query<any, any, any, any>
5555
}
5656

5757
type QueryCacheNotifyEvent =
@@ -69,7 +69,7 @@ type QueryCacheListener = (event?: QueryCacheNotifyEvent) => void
6969
export class QueryCache extends Subscribable<QueryCacheListener> {
7070
config: QueryCacheConfig
7171

72-
private queries: Query<any, any>[]
72+
private queries: Query<any, any, any, any>[]
7373
private queriesMap: QueryHashMap
7474

7575
constructor(config?: QueryCacheConfig) {
@@ -79,15 +79,15 @@ export class QueryCache extends Subscribable<QueryCacheListener> {
7979
this.queriesMap = {}
8080
}
8181

82-
build<TQueryFnData, TError, TData>(
82+
build<TQueryFnData, TError, TData, TQueryKey extends QueryKey>(
8383
client: QueryClient,
84-
options: QueryOptions<TQueryFnData, TError, TData>,
84+
options: QueryOptions<TQueryFnData, TError, TData, TQueryKey>,
8585
state?: QueryState<TData, TError>
86-
): Query<TQueryFnData, TError, TData> {
86+
): Query<TQueryFnData, TError, TData, TQueryKey> {
8787
const queryKey = options.queryKey!
8888
const queryHash =
8989
options.queryHash ?? hashQueryKeyByOptions(queryKey, options)
90-
let query = this.get<TQueryFnData, TError, TData>(queryHash)
90+
let query = this.get<TQueryFnData, TError, TData, TQueryKey>(queryHash)
9191

9292
if (!query) {
9393
query = new Query({
@@ -104,7 +104,7 @@ export class QueryCache extends Subscribable<QueryCacheListener> {
104104
return query
105105
}
106106

107-
add(query: Query<any, any>): void {
107+
add(query: Query<any, any, any, any>): void {
108108
if (!this.queriesMap[query.queryHash]) {
109109
this.queriesMap[query.queryHash] = query
110110
this.queries.push(query)
@@ -115,7 +115,7 @@ export class QueryCache extends Subscribable<QueryCacheListener> {
115115
}
116116
}
117117

118-
remove(query: Query<any, any>): void {
118+
remove(query: Query<any, any, any, any>): void {
119119
const queryInMap = this.queriesMap[query.queryHash]
120120

121121
if (queryInMap) {
@@ -139,9 +139,14 @@ export class QueryCache extends Subscribable<QueryCacheListener> {
139139
})
140140
}
141141

142-
get<TQueryFnData = unknown, TError = unknown, TData = TQueryFnData>(
142+
get<
143+
TQueryFnData = unknown,
144+
TError = unknown,
145+
TData = TQueryFnData,
146+
TQueyKey extends QueryKey = QueryKey
147+
>(
143148
queryHash: string
144-
): Query<TQueryFnData, TError, TData> | undefined {
149+
): Query<TQueryFnData, TError, TData, TQueyKey> | undefined {
145150
return this.queriesMap[queryHash]
146151
}
147152

‎src/core/queryClient.ts‎

Lines changed: 37 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -417,7 +417,7 @@ export class QueryClient {
417417

418418
getQueryDefaults(
419419
queryKey?: QueryKey
420-
): QueryObserverOptions<any, any, any, any> | undefined {
420+
): QueryObserverOptions<any, any, any, any, any> | undefined {
421421
return queryKey
422422
? this.queryDefaults.find(x => partialMatchKey(queryKey, x.queryKey))
423423
?.defaultOptions
@@ -448,7 +448,21 @@ export class QueryClient {
448448
: undefined
449449
}
450450

451-
defaultQueryOptions<T extends QueryOptions<any, any, any>>(options?: T): T {
451+
defaultQueryOptions<
452+
TQueryFnData,
453+
TError,
454+
TData,
455+
TQueryData,
456+
TQueryKey extends QueryKey
457+
>(
458+
options?: QueryObserverOptions<
459+
TQueryFnData,
460+
TError,
461+
TData,
462+
TQueryData,
463+
TQueryKey
464+
>
465+
): QueryObserverOptions<TQueryFnData, TError, TData, TQueryData, TQueryKey> {
452466
if (options?._defaulted) {
453467
return options
454468
}
@@ -458,7 +472,13 @@ export class QueryClient {
458472
...this.getQueryDefaults(options?.queryKey),
459473
...options,
460474
_defaulted: true,
461-
} as T
475+
} as QueryObserverOptions<
476+
TQueryFnData,
477+
TError,
478+
TData,
479+
TQueryData,
480+
TQueryKey
481+
>
462482

463483
if (!defaultedOptions.queryHash && defaultedOptions.queryKey) {
464484
defaultedOptions.queryHash = hashQueryKeyByOptions(
@@ -471,8 +491,20 @@ export class QueryClient {
471491
}
472492

473493
defaultQueryObserverOptions<
474-
T extends QueryObserverOptions<any, any, any, any, any>
475-
>(options?: T): T {
494+
TQueryFnData,
495+
TError,
496+
TData,
497+
TQueryData,
498+
TQueryKey extends QueryKey
499+
>(
500+
options?: QueryObserverOptions<
501+
TQueryFnData,
502+
TError,
503+
TData,
504+
TQueryData,
505+
TQueryKey
506+
>
507+
): QueryObserverOptions<TQueryFnData, TError, TData, TQueryData, TQueryKey> {
476508
return this.defaultQueryOptions(options)
477509
}
478510

0 commit comments

Comments
 (0)