Merge branch 'master' of https://github.com/tannerlinsley/react-query

Author: tannerlinsley

docs/src/pages/docs/api.md

@@ -14,6 +14,7 @@ const {
   isError,
   data,
   error,
+  isStale,
   isFetching,
   failureCount,
   refetch,
@@ -142,6 +143,8 @@ const queryInfo = useQuery({
 - `error: null | Error`
   - Defaults to `null`
   - The error object for the query, if an error was thrown.
+- `isStale: Boolean`
+  - Will be `true` if the cache data is stale.
 - `isFetching: Boolean`
   - Defaults to `true` so long as `manual` is set to `false`
   - Will be `true` if the query is currently fetching, including background fetching.
@@ -219,7 +222,7 @@ The returned properties for `usePaginatedQuery` are identical to the [`useQuery`
   - If using `paginated` mode, this will be `true` when fetching more results using the `fetchMore` function.
 - `fetchMore: Function(fetchMoreVariableOverride) => Promise`
   - This function allows you to fetch the next "page" of results.
-  - `fetchMoreVariableOverride` allows you to optionally override the fetch more variable returned from your `getCanFetchMore` option to your query function to retrieve the next page of results.
+  - `fetchMoreVariableOverride` allows you to optionally override the fetch more variable returned from your `getFetchMore` option to your query function to retrieve the next page of results.
 - `canFetchMore: Boolean`
   - If using `paginated` mode, this will be `true` if there is more data to be fetched (known via the required `getFetchMore` option function).
 

package.json

@@ -25,9 +25,6 @@
     "release": "yarn publish",
     "releaseNext": "yarn publish --tag next",
     "format": "prettier {.,src,src/**,example/src,example/src/**,types}/*.{md,js,jsx,tsx,json} --write",
-    "formatReadme": "yarn doctoc",
-    "doctoc": "npx doctoc --maxlevel 2 README.md",
-    "jump2header": "npx @strdr4605/jump2header --header 'documentation' --start 'Installation' -e 2 --silent -l 2",
     "stats": "open ./stats.html",
     "dtslint": "dtslint types"
   },

src/core/query.js

@@ -10,6 +10,7 @@ import {
   statusIdle,
   Console,
   getStatusBools,
+  shallowEqual,
 } from './utils'
 import { makeQueryInstance } from './queryInstance'
 
@@ -63,9 +64,14 @@ export function makeQuery({
   }
 
   query.dispatch = action => {
-    query.state = queryReducer(query.state, action)
-    query.instances.forEach(d => d.onStateUpdate(query.state))
-    notifyGlobalListeners(query)
+    const newState = queryReducer(query.state, action)
+
+    // Only update state if something has changed
+    if (!shallowEqual(query.state, newState)) {
+      query.state = newState
+      query.instances.forEach(d => d.onStateUpdate(query.state))
+      notifyGlobalListeners(query)
+    }
   }
 
   query.scheduleStaleTimeout = () => {
@@ -143,11 +149,19 @@ export function makeQuery({
   query.setState = updater => query.dispatch({ type: actionSetState, updater })
 
   query.setData = updater => {
+    const isStale = query.config.staleTime === 0
+
     // Set data and mark it as cached
-    query.dispatch({ type: actionSuccess, updater })
+    query.dispatch({
+      type: actionSuccess,
+      updater,
+      isStale,
+    })
 
-    // Schedule a fresh invalidation!
-    query.scheduleStaleTimeout()
+    if (!isStale) {
+      // Schedule a fresh invalidation!
+      query.scheduleStaleTimeout()
+    }
   }
 
   query.clear = () => {
@@ -172,11 +186,11 @@ export function makeQuery({
   const tryFetchData = async (fn, ...args) => {
     try {
       // Perform the query
-      const promise = fn(...query.config.queryFnParamsFilter(args))
+      const promiseOrValue = fn(...query.config.queryFnParamsFilter(args))
 
-      query.cancelPromises = () => promise.cancel?.()
+      query.cancelPromises = () => promiseOrValue?.cancel?.()
 
-      const data = await promise
+      const data = await promiseOrValue
       delete query.shouldContinueRetryOnFocus
 
       delete query.cancelPromises
@@ -187,16 +201,16 @@ export function makeQuery({
       delete query.cancelPromises
       if (query.cancelled) throw query.cancelled
 
-      // If we fail, increase the failureCount
-      query.dispatch({ type: actionFailed })
-
       // Do we need to retry the request?
       if (
         query.config.retry === true ||
-        query.state.failureCount <= query.config.retry ||
+        query.state.failureCount < query.config.retry ||
         (typeof query.config.retry === 'function' &&
           query.config.retry(query.state.failureCount, error))
       ) {
+        // If we retry, increase the failureCount
+        query.dispatch({ type: actionFailed })
+
         // Only retry if the document is visible
         if (!isDocumentVisible()) {
           // set this flag to continue retries on focus
@@ -454,14 +468,15 @@ function switchActions(state, action) {
         status: statusSuccess,
         data: functionalUpdate(action.updater, state.data),
         error: null,
-        isStale: false,
+        isStale: action.isStale,
         isFetching: false,
         updatedAt: Date.now(),
         failureCount: 0,
       }
     case actionError:
       return {
         ...state,
+        failureCount: state.failureCount + 1,
         isFetching: false,
         isStale: true,
         ...(!action.cancelled && {

src/core/tests/queryCache.test.js

@@ -47,7 +47,7 @@ describe('queryCache', () => {
   })
 
   test('prefetchQuery should not force fetch', async () => {
-    queryCache.setQueryData('key', 'og')
+    queryCache.setQueryData('key', 'og', { staleTime: 100 })
     const fetchFn = () => Promise.resolve('new')
     const first = await queryCache.prefetchQuery(
       'key',
@@ -77,24 +77,28 @@ describe('queryCache', () => {
     ).rejects.toEqual(new Error('error'))
   })
 
-  test('should notify listeners when new query is added', () => {
+  test('should notify listeners when new query is added', async () => {
     const callback = jest.fn()
 
     queryCache.subscribe(callback)
 
     queryCache.prefetchQuery('test', () => 'data')
 
+    await sleep(100)
+
     expect(callback).toHaveBeenCalled()
   })
 
-  test('should include the queryCache and query when notifying listeners', () => {
+  test('should include the queryCache and query when notifying listeners', async () => {
     const callback = jest.fn()
 
     queryCache.subscribe(callback)
 
     queryCache.prefetchQuery('test', () => 'data')
     const query = queryCache.getQuery('test')
 
+    await sleep(100)
+
     expect(callback).toHaveBeenCalledWith(queryCache, query)
   })
 
@@ -136,6 +140,21 @@ describe('queryCache', () => {
     expect(queryCache.getQuery('key')).toBeFalsy()
   })
 
+  test('setQueryData should schedule stale timeout, if staleTime is set', async () => {
+    queryCache.setQueryData('key', 'test data', { staleTime: 10 })
+    expect(queryCache.getQuery('key').staleTimeout).not.toBeUndefined()
+  })
+
+  test('setQueryData should not schedule stale timeout by default', async () => {
+    queryCache.setQueryData('key', 'test data')
+    expect(queryCache.getQuery('key').staleTimeout).toBeUndefined()
+  })
+
+  test('setQueryData should not schedule stale timeout, if staleTime is set to `Infinity`', async () => {
+    queryCache.setQueryData('key', 'test data', { staleTime: Infinity })
+    expect(queryCache.getQuery('key').staleTimeout).toBeUndefined()
+  })
+
   test('setQueryData schedules stale timeouts appropriately', async () => {
     queryCache.setQueryData('key', 'test data', { staleTime: 100 })
 
@@ -174,7 +193,7 @@ describe('queryCache', () => {
   test('stale timeout dispatch is not called if query is no longer in the query cache', async () => {
     const queryKey = 'key'
     const fetchData = () => Promise.resolve('data')
-    await queryCache.prefetchQuery(queryKey, fetchData)
+    await queryCache.prefetchQuery(queryKey, fetchData, { staleTime: 100 })
     const query = queryCache.getQuery(queryKey)
     expect(query.state.isStale).toBe(false)
     queryCache.removeQueries(queryKey)

src/core/tests/utils.test.js

@@ -1,5 +1,5 @@
 import { setConsole, queryCache, queryCaches } from '../'
-import { deepEqual } from '../utils'
+import { deepEqual, shallowEqual } from '../utils'
 
 describe('core/utils', () => {
   afterEach(() => {
@@ -28,17 +28,76 @@ describe('core/utils', () => {
     setConsole(console)
   })
 
-  it('deepequal should return `false` for different dates', () => {
-    const date1 = new Date(2020, 3, 1)
-    const date2 = new Date(2020, 3, 2)
+  describe('deepEqual', () => {
+    it('should return `true` for equal objects', () => {
+      const a = { a: { b: 'b' }, c: 'c', d: [{ d: 'd ' }] }
+      const b = { a: { b: 'b' }, c: 'c', d: [{ d: 'd ' }] }
+      expect(deepEqual(a, b)).toEqual(true)
+    })
 
-    expect(deepEqual(date1, date2)).toEqual(false)
+    it('should return `false` for non equal objects', () => {
+      const a = { a: { b: 'b' }, c: 'c' }
+      const b = { a: { b: 'c' }, c: 'c' }
+      expect(deepEqual(a, b)).toEqual(false)
+    })
+
+    it('should return `false` for different dates', () => {
+      const date1 = new Date(2020, 3, 1)
+      const date2 = new Date(2020, 3, 2)
+      expect(deepEqual(date1, date2)).toEqual(false)
+    })
+
+    it('return `true` for equal dates', () => {
+      const date1 = new Date(2020, 3, 1)
+      const date2 = new Date(2020, 3, 1)
+      expect(deepEqual(date1, date2)).toEqual(true)
+    })
   })
 
-  it('should return `true` for equal dates', () => {
-    const date1 = new Date(2020, 3, 1)
-    const date2 = new Date(2020, 3, 1)
+  describe('shallowEqual', () => {
+    it('should return `true` for empty objects', () => {
+      expect(shallowEqual({}, {})).toEqual(true)
+    })
+
+    it('should return `true` for equal values', () => {
+      expect(shallowEqual(1, 1)).toEqual(true)
+    })
+
+    it('should return `true` for equal arrays', () => {
+      expect(shallowEqual([1, 2], [1, 2])).toEqual(true)
+    })
+
+    it('should return `true` for equal shallow objects', () => {
+      const a = { a: 'a', b: 'b' }
+      const b = { a: 'a', b: 'b' }
+      expect(shallowEqual(a, b)).toEqual(true)
+    })
+
+    it('should return `true` for equal deep objects with same identities', () => {
+      const deep = { b: 'b' }
+      const a = { a: deep, c: 'c' }
+      const b = { a: deep, c: 'c' }
+      expect(shallowEqual(a, b)).toEqual(true)
+    })
+
+    it('should return `false` for non equal values', () => {
+      expect(shallowEqual(1, 2)).toEqual(false)
+    })
+
+    it('should return `false` for equal arrays', () => {
+      expect(shallowEqual([1, 2], [1, 3])).toEqual(false)
+    })
+
+    it('should return `false` for non equal shallow objects', () => {
+      const a = { a: 'a', b: 'b' }
+      const b = { a: 'a', b: 'c' }
+      expect(shallowEqual(a, b)).toEqual(false)
+    })
 
-    expect(deepEqual(date1, date2)).toEqual(true)
+    it('should return `false` for equal deep objects with different identities', () => {
+      const a = { a: { b: 'b' }, c: 'c' }
+      const b = { a: { b: 'b' }, c: 'c' }
+      expect(shallowEqual(a, b)).toEqual(false)
+    })
   })
 })

src/core/utils.js

@@ -90,18 +90,33 @@ export function getQueryArgs(args) {
   return [queryKey, queryFn ? { ...config, queryFn } : config, ...rest]
 }
 
+export function deepEqual(a, b) {
+  return equal(a, b, true)
+}
+
+export function shallowEqual(a, b) {
+  return equal(a, b, false)
+}
+
 // This deep-equal is directly based on https://github.com/epoberezkin/fast-deep-equal.
 // The parts for comparing any non-JSON-supported values has been removed
-export function deepEqual(a, b) {
+function equal(a, b, deep, depth = 0) {
   if (a === b) return true
 
-  if (a && b && typeof a == 'object' && typeof b == 'object') {
+  if (
+    (deep || !depth) &&
+    a &&
+    b &&
+    typeof a == 'object' &&
+    typeof b == 'object'
+  ) {
     var length, i, keys
     if (Array.isArray(a)) {
       length = a.length
       // eslint-disable-next-line eqeqeq
       if (length != b.length) return false
-      for (i = length; i-- !== 0; ) if (!deepEqual(a[i], b[i])) return false
+      for (i = length; i-- !== 0; )
+        if (!equal(a[i], b[i], deep, depth + 1)) return false
       return true
     }
 
@@ -118,7 +133,7 @@ export function deepEqual(a, b) {
     for (i = length; i-- !== 0; ) {
       var key = keys[i]
 
-      if (!deepEqual(a[key], b[key])) return false
+      if (!equal(a[key], b[key], deep, depth + 1)) return false
     }
 
     return true