Skip to content

Commit a94fc97

Browse files
boschniboschni
committed
refactor: define configuration merging strategy
1 parent 75a1d3d commit a94fc97

13 files changed

+168
-140
lines changed

‎src/core/config.ts‎

Lines changed: 73 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ import {
44
QueryKey,
55
QueryKeySerializerFunction,
66
ReactQueryConfig,
7+
QueryConfig,
8+
MutationConfig,
79
} from './types'
810

911
// TYPES
@@ -29,6 +31,22 @@ export const defaultQueryKeySerializerFn: QueryKeySerializerFunction = (
2931
}
3032
}
3133

34+
/**
35+
* Config merging strategy
36+
*
37+
* When using hooks the config will be merged in the following order:
38+
*
39+
* 1. These defaults.
40+
* 2. Defaults from the hook query cache.
41+
* 3. Combined defaults from any config providers in the tree.
42+
* 4. Query/mutation config provided to the hook.
43+
*
44+
* When using a query cache directly the config will be merged in the following order:
45+
*
46+
* 1. These defaults.
47+
* 2. Defaults from the query cache.
48+
* 3. Query/mutation config provided to the query cache method.
49+
*/
3250
export const DEFAULT_CONFIG: ReactQueryConfig = {
3351
queries: {
3452
queryKeySerializerFn: defaultQueryKeySerializerFn,
@@ -42,6 +60,59 @@ export const DEFAULT_CONFIG: ReactQueryConfig = {
4260
},
4361
}
4462

45-
export const defaultConfigRef: ReactQueryConfigRef = {
46-
current: DEFAULT_CONFIG,
63+
export function mergeReactQueryConfigs(
64+
a: ReactQueryConfig,
65+
b: ReactQueryConfig
66+
): ReactQueryConfig {
67+
return {
68+
shared: {
69+
...a.shared,
70+
...b.shared,
71+
},
72+
queries: {
73+
...a.queries,
74+
...b.queries,
75+
},
76+
mutations: {
77+
...a.mutations,
78+
...b.mutations,
79+
},
80+
}
81+
}
82+
83+
export function getDefaultedQueryConfig<TResult, TError>(
84+
queryCacheConfig?: ReactQueryConfig,
85+
contextConfig?: ReactQueryConfig,
86+
config?: QueryConfig<TResult, TError>
87+
): QueryConfig<TResult, TError> {
88+
return {
89+
...DEFAULT_CONFIG.shared,
90+
...DEFAULT_CONFIG.queries,
91+
...queryCacheConfig?.shared,
92+
...queryCacheConfig?.queries,
93+
...contextConfig?.shared,
94+
...contextConfig?.queries,
95+
...config,
96+
} as QueryConfig<TResult, TError>
97+
}
98+
99+
export function getDefaultedMutationConfig<
100+
TResult,
101+
TError,
102+
TVariables,
103+
TSnapshot
104+
>(
105+
queryCacheConfig?: ReactQueryConfig,
106+
contextConfig?: ReactQueryConfig,
107+
config?: MutationConfig<TResult, TError, TVariables, TSnapshot>
108+
): MutationConfig<TResult, TError, TVariables, TSnapshot> {
109+
return {
110+
...DEFAULT_CONFIG.shared,
111+
...DEFAULT_CONFIG.mutations,
112+
...queryCacheConfig?.shared,
113+
...queryCacheConfig?.mutations,
114+
...contextConfig?.shared,
115+
...contextConfig?.mutations,
116+
...config,
117+
} as MutationConfig<TResult, TError, TVariables, TSnapshot>
47118
}

‎src/core/queryCache.ts‎

Lines changed: 11 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import {
66
isObject,
77
Updater,
88
} from './utils'
9-
import { defaultConfigRef, ReactQueryConfigRef } from './config'
9+
import { getDefaultedQueryConfig } from './config'
1010
import { Query } from './query'
1111
import {
1212
QueryConfig,
@@ -76,7 +76,6 @@ export class QueryCache {
7676
isFetching: number
7777

7878
private config: QueryCacheConfig
79-
private configRef: ReactQueryConfigRef
8079
private globalListeners: QueryCacheListener[]
8180

8281
constructor(config?: QueryCacheConfig) {
@@ -85,25 +84,6 @@ export class QueryCache {
8584
// A frozen cache does not add new queries to the cache
8685
this.globalListeners = []
8786

88-
this.configRef = this.config.defaultConfig
89-
? {
90-
current: {
91-
shared: {
92-
...defaultConfigRef.current.shared,
93-
...this.config.defaultConfig.shared,
94-
},
95-
queries: {
96-
...defaultConfigRef.current.queries,
97-
...this.config.defaultConfig.queries,
98-
},
99-
mutations: {
100-
...defaultConfigRef.current.mutations,
101-
...this.config.defaultConfig.mutations,
102-
},
103-
},
104-
}
105-
: defaultConfigRef
106-
10787
this.queries = {}
10888
this.isFetching = 0
10989
}
@@ -118,16 +98,16 @@ export class QueryCache {
11898
}
11999

120100
getDefaultConfig() {
121-
return this.configRef.current
101+
return this.config.defaultConfig
122102
}
123103

124-
getDefaultedConfig<TResult, TError>(config?: QueryConfig<TResult, TError>) {
125-
return {
126-
...this.configRef.current.shared!,
127-
...this.configRef.current.queries!,
128-
queryCache: this,
104+
getDefaultedQueryConfig<TResult, TError>(
105+
config?: QueryConfig<TResult, TError>
106+
): QueryConfig<TResult, TError> {
107+
return getDefaultedQueryConfig(this.config.defaultConfig, undefined, {
129108
...config,
130-
} as QueryConfig<TResult, TError>
109+
queryCache: this,
110+
})
131111
}
132112

133113
subscribe(listener: QueryCacheListener): () => void {
@@ -158,8 +138,8 @@ export class QueryCache {
158138
if (typeof predicate === 'function') {
159139
predicateFn = predicate as QueryPredicateFn
160140
} else {
161-
const [queryHash, queryKey] = this.configRef.current.queries!
162-
.queryKeySerializerFn!(predicate)
141+
const config = this.getDefaultedQueryConfig()
142+
const [queryHash, queryKey] = config.queryKeySerializerFn!(predicate)
163143

164144
predicateFn = d =>
165145
options?.exact
@@ -234,7 +214,7 @@ export class QueryCache {
234214
userQueryKey: QueryKey,
235215
queryConfig?: QueryConfig<TResult, TError>
236216
): Query<TResult, TError> {
237-
const config = this.getDefaultedConfig(queryConfig)
217+
const config = this.getDefaultedQueryConfig(queryConfig)
238218

239219
const [queryHash, queryKey] = config.queryKeySerializerFn!(userQueryKey)
240220

‎src/core/types.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -215,6 +215,10 @@ export interface MutationConfig<
215215
onMutate?: (variables: TVariables) => Promise<TSnapshot> | TSnapshot
216216
useErrorBoundary?: boolean
217217
suspense?: boolean
218+
/**
219+
* By default the query cache from the context is used, but a different cache can be specified.
220+
*/
221+
queryCache?: QueryCache
218222
}
219223

220224
export type MutationFunction<TResult, TVariables = unknown> = (

‎src/react/ReactQueryCacheProvider.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,10 @@ export const queryCacheContext = React.createContext(defaultQueryCache)
1111

1212
export const useQueryCache = () => React.useContext(queryCacheContext)
1313

14+
export function useQueryCacheConfig() {
15+
return useQueryCache().getDefaultConfig()
16+
}
17+
1418
export interface ReactQueryCacheProviderProps {
1519
queryCache?: QueryCache
1620
}

‎src/react/ReactQueryConfigProvider.tsx‎

Lines changed: 47 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,74 +1,70 @@
11
import React from 'react'
2-
import { DEFAULT_CONFIG, defaultConfigRef } from '../core/config'
3-
import { ReactQueryConfig } from '../core/types'
2+
3+
import {
4+
mergeReactQueryConfigs,
5+
getDefaultedQueryConfig,
6+
getDefaultedMutationConfig,
7+
} from '../core/config'
8+
import { ReactQueryConfig, QueryConfig, MutationConfig } from '../core/types'
49
import { useQueryCache } from './ReactQueryCacheProvider'
510

611
const configContext = React.createContext<ReactQueryConfig | undefined>(
712
undefined
813
)
914

10-
export function useConfigContext() {
11-
const queryCache = useQueryCache()
12-
return (
13-
React.useContext(configContext) ||
14-
queryCache.getDefaultConfig() ||
15-
defaultConfigRef.current
16-
)
15+
function useContextConfig() {
16+
return React.useContext(configContext)
17+
}
18+
19+
export function useDefaultedQueryConfig<TResult, TError>(
20+
config?: QueryConfig<TResult, TError>
21+
): QueryConfig<TResult, TError> {
22+
const contextCache = useQueryCache()
23+
const cache = config?.queryCache || contextCache
24+
const cacheConfig = cache.getDefaultConfig()
25+
const contextConfig = useContextConfig()
26+
return getDefaultedQueryConfig(cacheConfig, contextConfig, {
27+
...config,
28+
queryCache: cache,
29+
})
1730
}
1831

19-
export interface ReactQueryProviderConfig extends ReactQueryConfig {}
32+
export function useDefaultedMutationConfig<
33+
TResult,
34+
TError,
35+
TVariables,
36+
TSnapshot
37+
>(
38+
config?: MutationConfig<TResult, TError, TVariables, TSnapshot>
39+
): MutationConfig<TResult, TError, TVariables, TSnapshot> {
40+
const contextCache = useQueryCache()
41+
const cache = config?.queryCache || contextCache
42+
const cacheConfig = cache.getDefaultConfig()
43+
const contextConfig = useContextConfig()
44+
return getDefaultedMutationConfig(cacheConfig, contextConfig, {
45+
...config,
46+
queryCache: cache,
47+
})
48+
}
2049

2150
export interface ReactQueryConfigProviderProps {
22-
config: ReactQueryProviderConfig
51+
config: ReactQueryConfig
2352
}
2453

2554
export const ReactQueryConfigProvider: React.FC<ReactQueryConfigProviderProps> = ({
2655
config,
2756
children,
2857
}) => {
29-
const configContextValueOrDefault = useConfigContext()
30-
const configContextValue = React.useContext(configContext)
31-
32-
const newConfig = React.useMemo<ReactQueryConfig>(() => {
33-
const { shared = {}, queries = {}, mutations = {} } = config
34-
const {
35-
shared: contextShared = {},
36-
queries: contextQueries = {},
37-
mutations: contextMutations = {},
38-
} = configContextValueOrDefault
39-
40-
return {
41-
shared: {
42-
...contextShared,
43-
...shared,
44-
},
45-
queries: {
46-
...contextQueries,
47-
...queries,
48-
},
49-
mutations: {
50-
...contextMutations,
51-
...mutations,
52-
},
53-
}
54-
}, [config, configContextValueOrDefault])
58+
const contextConfig = useContextConfig()
5559

56-
React.useEffect(() => {
57-
// restore previous config on unmount
58-
return () => {
59-
defaultConfigRef.current = {
60-
...(configContextValueOrDefault || DEFAULT_CONFIG),
61-
}
62-
}
63-
}, [configContextValueOrDefault])
64-
65-
// If this is the outermost provider, overwrite the shared default config
66-
if (!configContextValue) {
67-
defaultConfigRef.current = newConfig
68-
}
60+
const combinedConfig = React.useMemo(
61+
() =>
62+
contextConfig ? mergeReactQueryConfigs(contextConfig, config) : config,
63+
[config, contextConfig]
64+
)
6965

7066
return (
71-
<configContext.Provider value={newConfig}>
67+
<configContext.Provider value={combinedConfig}>
7268
{children}
7369
</configContext.Provider>
7470
)

‎src/react/index.ts‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,4 @@ export type { UseQueryObjectConfig } from './useQuery'
1717
export type { UseInfiniteQueryObjectConfig } from './useInfiniteQuery'
1818
export type { UsePaginatedQueryObjectConfig } from './usePaginatedQuery'
1919
export type { ReactQueryCacheProviderProps } from './ReactQueryCacheProvider'
20-
export type {
21-
ReactQueryConfigProviderProps,
22-
ReactQueryProviderConfig,
23-
} from './ReactQueryConfigProvider'
20+
export type { ReactQueryConfigProviderProps } from './ReactQueryConfigProvider'

‎src/react/tests/ReactQueryConfigProvider.test.tsx‎

Lines changed: 15 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,8 @@ describe('ReactQueryConfigProvider', () => {
4242
})
4343

4444
it('should allow overriding the default config from the outermost provider', async () => {
45-
const key = queryKey()
45+
const key1 = queryKey()
46+
const key2 = queryKey()
4647

4748
const outerConfig = {
4849
queries: {
@@ -65,25 +66,28 @@ describe('ReactQueryConfigProvider', () => {
6566
function Container() {
6667
return (
6768
<ReactQueryConfigProvider config={outerConfig}>
69+
<First />
6870
<ReactQueryConfigProvider config={innerConfig}>
69-
<h1>Placeholder</h1>
71+
<Second />
7072
</ReactQueryConfigProvider>
7173
</ReactQueryConfigProvider>
7274
)
7375
}
7476

75-
const rendered = render(<Container />)
76-
77-
await waitFor(() => rendered.getByText('Placeholder'))
78-
79-
await queryCache.prefetchQuery(key)
77+
function First() {
78+
const { data } = useQuery(key1)
79+
return <span>First: {String(data)}</span>
80+
}
8081

81-
expect(outerConfig.queries.queryFn).toHaveBeenCalledWith(key)
82-
expect(innerConfig.queries.queryFn).not.toHaveBeenCalled()
82+
function Second() {
83+
const { data } = useQuery(key2)
84+
return <span>Second: {String(data)}</span>
85+
}
8386

84-
const data = queryCache.getQueryData(key)
87+
const rendered = render(<Container />)
8588

86-
expect(data).toEqual('outer')
89+
await waitFor(() => rendered.getByText('First: outer'))
90+
await waitFor(() => rendered.getByText('Second: inner'))
8791
})
8892

8993
it('should reset to defaults when unmounted', async () => {

‎src/react/useBaseQuery.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,13 @@ import React from 'react'
33
import { useRerenderer } from './utils'
44
import { QueryObserver } from '../core/queryObserver'
55
import { QueryResultBase, QueryObserverConfig } from '../core/types'
6+
import { useDefaultedQueryConfig } from './ReactQueryConfigProvider'
67

78
export function useBaseQuery<TResult, TError>(
89
config: QueryObserverConfig<TResult, TError> = {}
910
): QueryResultBase<TResult, TError> {
11+
config = useDefaultedQueryConfig(config)
12+
1013
// Make a rerender function
1114
const rerender = useRerenderer()
1215

0 commit comments

Comments
 (0)