fix(ReactQueryConfigProvider): correctly update defaultConfigRef (TanStack#775)

`useConfigContext` will always be populated. Checking the context value before defaultConfig update

Author: TuckerWhitehouse

src/react/ReactQueryConfigProvider.js

@@ -10,15 +10,16 @@ export function useConfigContext() {
 }
 
 export function ReactQueryConfigProvider({ config, children }) {
-  let configContextValue = useConfigContext()
+  let configContextValueOrDefault = useConfigContext()
+  let configContextValue = React.useContext(configContext)
 
   const newConfig = React.useMemo(() => {
     const { shared = {}, queries = {}, mutations = {} } = config
     const {
       shared: contextShared = {},
       queries: contextQueries = {},
       mutations: contextMutations = {},
-    } = configContextValue
+    } = configContextValueOrDefault
 
     return {
       shared: {
@@ -34,15 +35,18 @@ export function ReactQueryConfigProvider({ config, children }) {
         ...mutations,
       },
     }
-  }, [config, configContextValue])
+  }, [config, configContextValueOrDefault])
 
   React.useEffect(() => {
     // restore previous config on unmount
     return () => {
-      defaultConfigRef.current = { ...(configContextValue || DEFAULT_CONFIG) }
+      defaultConfigRef.current = {
+        ...(configContextValueOrDefault || DEFAULT_CONFIG),
+      }
     }
-  }, [configContextValue])
+  }, [configContextValueOrDefault])
 
+  // If this is the outermost provider, overwrite the shared default config
   if (!configContextValue) {
     defaultConfigRef.current = newConfig
   }

…/react/tests/ReactQueryConfigProvider.js …t/tests/ReactQueryConfigProvider.test.jssrc/react/tests/ReactQueryConfigProvider.js renamed to src/react/tests/ReactQueryConfigProvider.test.js src/react/tests/ReactQueryConfigProvider.js renamed to src/react/tests/ReactQueryConfigProvider.test.js

@@ -48,6 +48,49 @@ describe('ReactQueryConfigProvider', () => {
     expect(onSuccess).toHaveBeenCalledWith('data')
   })
 
+  it('should allow overriding the default config from the outermost provider', async () => {
+    const outerConfig = {
+      queries: {
+        queryFn: jest.fn(async () => {
+          await sleep(10)
+          return 'outer'
+        }),
+      },
+    }
+
+    const innerConfig = {
+      queries: {
+        queryFn: jest.fn(async () => {
+          await sleep(10)
+          return 'inner'
+        }),
+      },
+    }
+
+    function Container() {
+      return (
+        <ReactQueryConfigProvider config={outerConfig}>
+          <ReactQueryConfigProvider config={innerConfig}>
+            <h1>Placeholder</h1>
+          </ReactQueryConfigProvider>
+        </ReactQueryConfigProvider>
+      )
+    }
+
+    const rendered = render(<Container />)
+
+    await waitFor(() => rendered.findByText('Placeholder'))
+
+    await queryCache.prefetchQuery('test')
+
+    expect(outerConfig.queries.queryFn).toHaveBeenCalledWith('test')
+    expect(innerConfig.queries.queryFn).not.toHaveBeenCalled()
+
+    const data = queryCache.getQueryData('test')
+
+    expect(data).toEqual('outer')
+  })
+
   it('should reset to defaults when unmounted', async () => {
     const onSuccess = jest.fn()