Merge branch 'master' into refetchInterval-test

Author: tannerlinsley

README.md

@@ -257,8 +257,10 @@ This library is being built and maintained by me, @tannerlinsley and I am always
   - [`queryCache.isFetching`](#querycacheisfetching)
   - [`queryCache.subscribe`](#querycachesubscribe)
   - [`queryCache.clear`](#querycacheclear)
+  - [`useQueryCache`](#usequerycache)
   - [`useIsFetching`](#useisfetching)
   - [`ReactQueryConfigProvider`](#reactqueryconfigprovider)
+  - [`ReactQueryCacheProvider`](#reactquerycacheprovider)
   - [`setConsole`](#setconsole)
 - [Contributors ✨](#contributors-)
 
@@ -2524,6 +2526,18 @@ queryCache.clear()
 - `queries: Array<Query>`
   - This will be an array containing the queries that were found.
 
+## `useQueryCache`
+
+The `useQueryCache` hook returns the current queryCache instance.
+
+```js
+import { useQueryCache } from 'react-query';
+
+const queryCache = useQueryCache()
+```
+
+If you are using the `ReactQueryCacheProvider` to set a custom cache, you cannot simply import `{ queryCache }` any more. This hook will ensure you're getting the correct instance.
+
 ## `useIsFetching`
 
 `useIsFetching` is an optional hook that returns the `number` of the queries that your application is loading or fetching in the background (useful for app-wide loading indicators).
@@ -2584,6 +2598,29 @@ function App() {
   - Must be **stable** or **memoized**. Do not create an inline object!
   - For non-global properties please see their usage in both the [`useQuery` hook](#usequery) and the [`useMutation` hook](#usemutation).
 
+## `ReactQueryCacheProvider`
+
+`ReactQueryCacheProvider` is an optional provider component for explicitly setting the query cache used by React Query. This is useful for creating component-level caches that are not completely global, as well as making truly isolated unit tests.
+
+```js
+import { ReactQueryCacheProvider, makeQueryCache } from 'react-query';
+
+const queryCache = makeQueryCache()
+
+function App() {
+  return (
+    <ReactQueryCacheProvider queryCache={queryCache}>
+      ...
+    </ReactQueryCacheProvider>
+  )
+}
+```
+
+### Options
+- `queryCache: Object`
+  - In instance of queryCache, you can use the `makeQueryCache` factory to create this.
+  - If not provided, a new cache will be generated.
+
 ## `setConsole`
 
 `setConsole` is an optional utility function that allows you to replace the `console` interface used to log errors. By default, the `window.console` object is used. If no global `console` object is found in the environment, nothing will be logged.

src/index.js

@@ -1,4 +1,9 @@
-export { queryCache } from './queryCache'
+export {
+  queryCache,
+  makeQueryCache,
+  ReactQueryCacheProvider,
+  useQueryCache,
+} from './queryCache'
 export { ReactQueryConfigProvider } from './config'
 export { setFocusHandler } from './setFocusHandler'
 export { useIsFetching } from './useIsFetching'
@@ -13,4 +18,5 @@ export {
   statusError,
   stableStringify,
   setConsole,
+  deepIncludes,
 } from './utils'

src/index.production.js

@@ -1,4 +1,9 @@
-export { queryCache } from './queryCache'
+export {
+  queryCache,
+  makeQueryCache,
+  ReactQueryCacheProvider,
+  useQueryCache,
+} from './queryCache'
 export { ReactQueryConfigProvider } from './config'
 export { setFocusHandler } from './setFocusHandler'
 export { useIsFetching } from './useIsFetching'

src/queryCache.js

@@ -1,3 +1,4 @@
+import React from 'react'
 import {
   isServer,
   functionalUpdate,
@@ -14,6 +15,42 @@ import { defaultConfigRef } from './config'
 
 export const queryCache = makeQueryCache()
 
+export const queryCacheContext = React.createContext(queryCache)
+
+export const queryCaches = [queryCache]
+
+export function useQueryCache() {
+  return React.useContext(queryCacheContext)
+}
+
+export function ReactQueryCacheProvider({ queryCache, children }) {
+  const cache = React.useMemo(() => queryCache || makeQueryCache(), [
+    queryCache,
+  ])
+
+  React.useEffect(() => {
+    queryCaches.push(cache)
+
+    return () => {
+      // remove the cache from the active list
+      const i = queryCaches.indexOf(cache)
+      if (i >= 0) {
+        queryCaches.splice(i, 1)
+      }
+      // if the cache was created by us, we need to tear it down
+      if (queryCache == null) {
+        cache.clear()
+      }
+    }
+  }, [cache, queryCache])
+
+  return (
+    <queryCacheContext.Provider value={cache}>
+      {children}
+    </queryCacheContext.Provider>
+  )
+}
+
 const actionInit = {}
 const actionFailed = {}
 const actionMarkStale = {}
@@ -32,7 +69,7 @@ export function makeQueryCache() {
   }
 
   const notifyGlobalListeners = () => {
-    cache.isFetching = Object.values(queryCache.queries).reduce(
+    cache.isFetching = Object.values(cache.queries).reduce(
       (acc, query) => (query.state.isFetching ? acc + 1 : acc),
       0
     )
@@ -87,11 +124,7 @@ export function makeQueryCache() {
     const foundQueries = findQueries(predicate, { exact })
 
     foundQueries.forEach(query => {
-      query.cancelled = cancelledError
-
-      if (query.cancelQueries) {
-        query.cancelQueries()
-      }
+      query.cancel()
     })
 
     if (foundQueries.length) {
@@ -129,6 +162,7 @@ export function makeQueryCache() {
       query.config = { ...query.config, ...config }
     } else {
       query = makeQuery({
+        cache,
         queryKey,
         queryHash,
         queryVariables,
@@ -212,6 +246,7 @@ export function makeQueryCache() {
   }
 
   function makeQuery(options) {
+    const queryCache = options.cache
     const reducer = options.config.queryReducer || defaultQueryReducer
 
     const noQueryHash = typeof options.queryHash === 'undefined'
@@ -288,6 +323,18 @@ export function makeQueryCache() {
       query.cancelled = null
     }
 
+    query.cancel = () => {
+      query.cancelled = cancelledError
+
+      if (query.cancelPromises) {
+        query.cancelPromises()
+      }
+
+      delete query.promise
+
+      notifyGlobalListeners()
+    }
+
     query.updateInstance = instance => {
       let found = query.instances.find(d => d.id === instance.id)
 
@@ -310,12 +357,7 @@ export function makeQueryCache() {
         query.instances = query.instances.filter(d => d.id !== instanceId)
 
         if (!query.instances.length) {
-          // Cancel any side-effects
-          query.cancelled = cancelledError
-
-          if (query.cancelQueries) {
-            query.cancelQueries()
-          }
+          query.cancel()
 
           // Schedule garbage collection
           query.scheduleGarbageCollection()
@@ -329,16 +371,16 @@ export function makeQueryCache() {
         // Perform the query
         const promise = queryFn(...query.config.queryFnParamsFilter(args))
 
-        query.cancelQueries = () => promise.cancel?.()
+        query.cancelPromises = () => promise.cancel?.()
 
         const data = await promise
 
-        delete query.cancelQueries
+        delete query.cancelPromises
         if (query.cancelled) throw query.cancelled
 
         return data
       } catch (error) {
-        delete query.cancelQueries
+        delete query.cancelPromises
         if (query.cancelled) throw query.cancelled
 
         // If we fail, increase the failureCount

src/setFocusHandler.js

@@ -1,6 +1,6 @@
 import { isOnline, isDocumentVisible, Console, isServer } from './utils'
 import { defaultConfigRef } from './config'
-import { queryCache } from './queryCache'
+import { queryCaches } from './queryCache'
 
 const visibilityChangeEvent = 'visibilitychange'
 const focusEvent = 'focus'
@@ -9,29 +9,31 @@ const onWindowFocus = () => {
   const { refetchAllOnWindowFocus } = defaultConfigRef.current
 
   if (isDocumentVisible() && isOnline()) {
-    queryCache
-      .refetchQueries(query => {
-        if (!query.instances.length) {
-          return false
-        }
-
-        if (query.config.manual === true) {
-          return false
-        }
-
-        if (query.shouldContinueRetryOnFocus) {
-          // delete promise, so `fetch` will create new one
-          delete query.promise
-          return true
-        }
-
-        if (typeof query.config.refetchOnWindowFocus === 'undefined') {
-          return refetchAllOnWindowFocus
-        } else {
-          return query.config.refetchOnWindowFocus
-        }
-      })
-      .catch(Console.error)
+    queryCaches.forEach(queryCache =>
+      queryCache
+        .refetchQueries(query => {
+          if (!query.instances.length) {
+            return false
+          }
+
+          if (query.config.manual === true) {
+            return false
+          }
+
+          if (query.shouldContinueRetryOnFocus) {
+            // delete promise, so `fetch` will create new one
+            delete query.promise
+            return true
+          }
+
+          if (typeof query.config.refetchOnWindowFocus === 'undefined') {
+            return refetchAllOnWindowFocus
+          } else {
+            return query.config.refetchOnWindowFocus
+          }
+        })
+        .catch(Console.error)
+    )
   }
 }