refactor: define configuration merging strategy

boschni · boschni · commit 4f80fd3d40f6 · 2020-08-15T09:52:39.000+02:00
diff --git a/src/core/config.ts b/src/core/config.ts
@@ -4,6 +4,8 @@ import {
   QueryKey,
   QueryKeySerializerFunction,
   ReactQueryConfig,
+  QueryConfig,
+  MutationConfig,
 } from './types'
 
 // TYPES
@@ -29,6 +31,22 @@ export const defaultQueryKeySerializerFn: QueryKeySerializerFunction = (
   }
 }
 
+/**
+ * Config merging strategy
+ *
+ * When using hooks the config will be merged in the following order:
+ *
+ * 1. These defaults.
+ * 2. Defaults from the hook query cache.
+ * 3. Combined defaults from any config providers in the tree.
+ * 4. Query/mutation config provided to the hook.
+ *
+ * When using a query cache directly the config will be merged in the following order:
+ *
+ * 1. These defaults.
+ * 2. Defaults from the query cache.
+ * 3. Query/mutation config provided to the query cache method.
+ */
 export const DEFAULT_CONFIG: ReactQueryConfig = {
   shared: {
     suspense: false,
@@ -53,6 +71,59 @@ export const DEFAULT_CONFIG: ReactQueryConfig = {
   },
 }
 
-export const defaultConfigRef: ReactQueryConfigRef = {
-  current: DEFAULT_CONFIG,
+export function mergeReactQueryConfigs(
+  a: ReactQueryConfig,
+  b: ReactQueryConfig
+): ReactQueryConfig {
+  return {
+    shared: {
+      ...a.shared,
+      ...b.shared,
+    },
+    queries: {
+      ...a.queries,
+      ...b.queries,
+    },
+    mutations: {
+      ...a.mutations,
+      ...b.mutations,
+    },
+  }
+}
+
+export function getDefaultedQueryConfig<TResult, TError>(
+  queryCacheConfig?: ReactQueryConfig,
+  contextConfig?: ReactQueryConfig,
+  config?: QueryConfig<TResult, TError>
+): QueryConfig<TResult, TError> {
+  return {
+    ...DEFAULT_CONFIG.shared,
+    ...DEFAULT_CONFIG.queries,
+    ...queryCacheConfig?.shared,
+    ...queryCacheConfig?.queries,
+    ...contextConfig?.shared,
+    ...contextConfig?.queries,
+    ...config,
+  } as QueryConfig<TResult, TError>
+}
+
+export function getDefaultedMutationConfig<
+  TResult,
+  TError,
+  TVariables,
+  TSnapshot
+>(
+  queryCacheConfig?: ReactQueryConfig,
+  contextConfig?: ReactQueryConfig,
+  config?: MutationConfig<TResult, TError, TVariables, TSnapshot>
+): MutationConfig<TResult, TError, TVariables, TSnapshot> {
+  return {
+    ...DEFAULT_CONFIG.shared,
+    ...DEFAULT_CONFIG.mutations,
+    ...queryCacheConfig?.shared,
+    ...queryCacheConfig?.mutations,
+    ...contextConfig?.shared,
+    ...contextConfig?.mutations,
+    ...config,
+  } as MutationConfig<TResult, TError, TVariables, TSnapshot>
 }
diff --git a/src/core/queryCache.ts b/src/core/queryCache.ts
@@ -6,7 +6,7 @@ import {
   isObject,
   Updater,
 } from './utils'
-import { defaultConfigRef, ReactQueryConfigRef } from './config'
+import { getDefaultedQueryConfig } from './config'
 import { Query } from './query'
 import {
   QueryConfig,
@@ -76,7 +76,6 @@ export class QueryCache {
   isFetching: number
 
   private config: QueryCacheConfig
-  private configRef: ReactQueryConfigRef
   private globalListeners: QueryCacheListener[]
 
   constructor(config?: QueryCacheConfig) {
@@ -85,25 +84,6 @@ export class QueryCache {
     // A frozen cache does not add new queries to the cache
     this.globalListeners = []
 
-    this.configRef = this.config.defaultConfig
-      ? {
-          current: {
-            shared: {
-              ...defaultConfigRef.current.shared,
-              ...this.config.defaultConfig.shared,
-            },
-            queries: {
-              ...defaultConfigRef.current.queries,
-              ...this.config.defaultConfig.queries,
-            },
-            mutations: {
-              ...defaultConfigRef.current.mutations,
-              ...this.config.defaultConfig.mutations,
-            },
-          },
-        }
-      : defaultConfigRef
-
     this.queries = {}
     this.isFetching = 0
   }
@@ -118,7 +98,13 @@ export class QueryCache {
   }
 
   getDefaultConfig() {
-    return this.configRef.current
+    return this.config.defaultConfig
+  }
+
+  getDefaultedQueryConfig<TResult, TError>(
+    config?: QueryConfig<TResult, TError>
+  ): QueryConfig<TResult, TError> {
+    return getDefaultedQueryConfig(this.config.defaultConfig, undefined, config)
   }
 
   subscribe(listener: QueryCacheListener): () => void {
@@ -149,8 +135,8 @@ export class QueryCache {
     if (typeof predicate === 'function') {
       predicateFn = predicate as QueryPredicateFn
     } else {
-      const [queryHash, queryKey] = this.configRef.current.queries!
-        .queryKeySerializerFn!(predicate)
+      const config = this.getDefaultedQueryConfig()
+      const [queryHash, queryKey] = config.queryKeySerializerFn!(predicate)
 
       predicateFn = d =>
         options?.exact
@@ -226,13 +212,9 @@ export class QueryCache {
 
   buildQuery<TResult, TError = unknown>(
     userQueryKey: QueryKey,
-    queryConfig: QueryConfig<TResult, TError> = {}
+    queryConfig?: QueryConfig<TResult, TError>
   ): Query<TResult, TError> {
-    const config = {
-      ...this.configRef.current.shared!,
-      ...this.configRef.current.queries!,
-      ...queryConfig,
-    } as QueryConfig<TResult, TError>
+    const config = this.getDefaultedQueryConfig(queryConfig)
 
     const [queryHash, queryKey] = config.queryKeySerializerFn!(userQueryKey)
 
@@ -386,7 +368,7 @@ export class QueryCache {
   setQueryData<TResult, TError = unknown>(
     queryKey: QueryKey,
     updater: Updater<TResult | undefined, TResult>,
-    config: QueryConfig<TResult, TError> = {}
+    config?: QueryConfig<TResult, TError>
   ) {
     let query = this.getQuery<TResult, TError>(queryKey)
 
diff --git a/src/react/ReactQueryCacheProvider.tsx b/src/react/ReactQueryCacheProvider.tsx
@@ -11,6 +11,10 @@ export const queryCacheContext = React.createContext(defaultQueryCache)
 
 export const useQueryCache = () => React.useContext(queryCacheContext)
 
+export function useQueryCacheConfig() {
+  return useQueryCache().getDefaultConfig()
+}
+
 export interface ReactQueryCacheProviderProps {
   queryCache?: QueryCache
 }
diff --git a/src/react/ReactQueryConfigProvider.tsx b/src/react/ReactQueryConfigProvider.tsx
@@ -1,74 +1,34 @@
 import React from 'react'
-import { DEFAULT_CONFIG, defaultConfigRef } from '../core/config'
+
+import { mergeReactQueryConfigs } from '../core/config'
 import { ReactQueryConfig } from '../core/types'
-import { useQueryCache } from './ReactQueryCacheProvider'
 
 const configContext = React.createContext<ReactQueryConfig | undefined>(
   undefined
 )
 
-export function useConfigContext() {
-  const queryCache = useQueryCache()
-  return (
-    React.useContext(configContext) ||
-    queryCache.getDefaultConfig() ||
-    defaultConfigRef.current
-  )
+export function useContextConfig() {
+  return React.useContext(configContext)
 }
 
-export interface ReactQueryProviderConfig extends ReactQueryConfig {}
-
 export interface ReactQueryConfigProviderProps {
-  config: ReactQueryProviderConfig
+  config: ReactQueryConfig
 }
 
 export const ReactQueryConfigProvider: React.FC<ReactQueryConfigProviderProps> = ({
   config,
   children,
 }) => {
-  const configContextValueOrDefault = useConfigContext()
-  const configContextValue = React.useContext(configContext)
+  const contextConfig = useContextConfig()
 
-  const newConfig = React.useMemo<ReactQueryConfig>(() => {
-    const { shared = {}, queries = {}, mutations = {} } = config
-    const {
-      shared: contextShared = {},
-      queries: contextQueries = {},
-      mutations: contextMutations = {},
-    } = configContextValueOrDefault
-
-    return {
-      shared: {
-        ...contextShared,
-        ...shared,
-      },
-      queries: {
-        ...contextQueries,
-        ...queries,
-      },
-      mutations: {
-        ...contextMutations,
-        ...mutations,
-      },
-    }
-  }, [config, configContextValueOrDefault])
-
-  React.useEffect(() => {
-    // restore previous config on unmount
-    return () => {
-      defaultConfigRef.current = {
-        ...(configContextValueOrDefault || DEFAULT_CONFIG),
-      }
-    }
-  }, [configContextValueOrDefault])
-
-  // If this is the outermost provider, overwrite the shared default config
-  if (!configContextValue) {
-    defaultConfigRef.current = newConfig
-  }
+  const combinedConfig = React.useMemo(
+    () =>
+      contextConfig ? mergeReactQueryConfigs(contextConfig, config) : config,
+    [config, contextConfig]
+  )
 
   return (
-    <configContext.Provider value={newConfig}>
+    <configContext.Provider value={combinedConfig}>
       {children}
     </configContext.Provider>
   )
diff --git a/src/react/index.ts b/src/react/index.ts
@@ -17,7 +17,4 @@ export type { UseQueryObjectConfig } from './useQuery'
 export type { UseInfiniteQueryObjectConfig } from './useInfiniteQuery'
 export type { UsePaginatedQueryObjectConfig } from './usePaginatedQuery'
 export type { ReactQueryCacheProviderProps } from './ReactQueryCacheProvider'
-export type {
-  ReactQueryConfigProviderProps,
-  ReactQueryProviderConfig,
-} from './ReactQueryConfigProvider'
+export type { ReactQueryConfigProviderProps } from './ReactQueryConfigProvider'
diff --git a/src/react/tests/ReactQueryConfigProvider.test.tsx b/src/react/tests/ReactQueryConfigProvider.test.tsx
@@ -42,7 +42,8 @@ describe('ReactQueryConfigProvider', () => {
   })
 
   it('should allow overriding the default config from the outermost provider', async () => {
-    const key = queryKey()
+    const key1 = queryKey()
+    const key2 = queryKey()
 
     const outerConfig = {
       queries: {
@@ -65,25 +66,28 @@ describe('ReactQueryConfigProvider', () => {
     function Container() {
       return (
         <ReactQueryConfigProvider config={outerConfig}>
+          <First />
           <ReactQueryConfigProvider config={innerConfig}>
-            <h1>Placeholder</h1>
+            <Second />
           </ReactQueryConfigProvider>
         </ReactQueryConfigProvider>
       )
     }
 
-    const rendered = render(<Container />)
-
-    await waitFor(() => rendered.getByText('Placeholder'))
-
-    await queryCache.prefetchQuery(key)
+    function First() {
+      const { data } = useQuery(key1)
+      return <span>First: {String(data)}</span>
+    }
 
-    expect(outerConfig.queries.queryFn).toHaveBeenCalledWith(key)
-    expect(innerConfig.queries.queryFn).not.toHaveBeenCalled()
+    function Second() {
+      const { data } = useQuery(key2)
+      return <span>Second: {String(data)}</span>
+    }
 
-    const data = queryCache.getQueryData(key)
+    const rendered = render(<Container />)
 
-    expect(data).toEqual('outer')
+    await waitFor(() => rendered.getByText('First: outer'))
+    await waitFor(() => rendered.getByText('Second: inner'))
   })
 
   it('should reset to defaults when unmounted', async () => {
diff --git a/src/react/useMutation.ts b/src/react/useMutation.ts
@@ -1,6 +1,6 @@
 import React from 'react'
 
-import { useConfigContext } from './ReactQueryConfigProvider'
+import { useContextConfig } from './ReactQueryConfigProvider'
 import { useGetLatest, useMountedCallback } from './utils'
 import { Console, uid, getStatusProps } from '../core/utils'
 import {
@@ -10,6 +10,8 @@ import {
   MutationConfig,
   MutateConfig,
 } from '../core/types'
+import { useQueryCacheConfig } from './ReactQueryCacheProvider'
+import { getDefaultedMutationConfig } from '../core/config'
 
 // TYPES
 
@@ -113,13 +115,12 @@ export function useMutation<
 
   const getMutationFn = useGetLatest(mutationFn)
 
-  const contextConfig = useConfigContext()
+  const contextConfig = useContextConfig()
+  const queryCacheConfig = useQueryCacheConfig()
 
-  const getConfig = useGetLatest({
-    ...contextConfig.shared,
-    ...contextConfig.mutations,
-    ...config,
-  })
+  const getConfig = useGetLatest(
+    getDefaultedMutationConfig(queryCacheConfig, contextConfig, config)
+  )
 
   const latestMutationRef = React.useRef<number>()
 
diff --git a/src/react/useQueryArgs.ts b/src/react/useQueryArgs.ts

Original file line number	Diff line number	Diff line change
`@@ -11,6 +11,10 @@ export const queryCacheContext = React.createContext(defaultQueryCache)`
`11`	`11`
`12`	`12`	`export const useQueryCache = () => React.useContext(queryCacheContext)`
`13`	`13`
	`14`	`+export function useQueryCacheConfig() {`
	`15`	`+ return useQueryCache().getDefaultConfig()`
	`16`	`+}`
	`17`	`+`
`14`	`18`	`export interface ReactQueryCacheProviderProps {`
`15`	`19`	`queryCache?: QueryCache`
`16`	`20`	`}`