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

Author: tannerlinsley

docs/src/manifests/manifest.json

@@ -42,6 +42,11 @@
               "title": "TypeScript",
               "path": "/docs/typescript",
               "editUrl": "/docs/typescript.md"
+            },
+            {
+              "title": "React Native",
+              "path": "/docs/react-native",
+              "editUrl": "/docs/react-native.md"
             }
           ]
         },

docs/src/pages/docs/api.md

@@ -12,16 +12,19 @@ const {
   error,
   failureCount,
   isError,
+  isFetchedAfterMount,
   isFetching,
   isIdle,
   isLoading,
+  isPreviousData,
   isStale,
   isSuccess,
   refetch,
   status,
 } = useQuery(queryKey, queryFn?, {
   cacheTime,
   enabled,
+  forceFetchOnMount,
   initialData,
   initialStale,
   isDataEqual,
@@ -99,8 +102,7 @@ const queryInfo = useQuery({
   - Set this to `true` or `false` to enable/disable automatic refetching on reconnect for this query.
 - `notifyOnStatusChange: Boolean`
   - Optional
-  - Whether a change to the query status should re-render a component.
-  - If set to `false`, the component will only re-render when the actual `data` or `error` changes.
+  - Set this to `false` to only re-render when there are changes to `data` or `error`.
   - Defaults to `true`.
 - `onSuccess: Function(data) => data`
   - Optional
@@ -128,6 +130,10 @@ const queryInfo = useQuery({
   - Optional
   - Defaults to `false`
   - If set, any previous `data` will be kept when fetching new data because the query key changed.
+- `forceFetchOnMount: Boolean`
+  - Optional
+  - Defaults to `false`
+  - Set this to `true` to always fetch when the component mounts (regardless of staleness).
 - `refetchOnMount: Boolean`
   - Optional
   - Defaults to `true`
@@ -165,6 +171,11 @@ const queryInfo = useQuery({
   - The error object for the query, if an error was thrown.
 - `isStale: Boolean`
   - Will be `true` if the cache data is stale.
+- `isPreviousData: Boolean`
+  - Will be `true` when `keepPreviousData` is set and data from the previous query is returned.
+- `isFetchedAfterMount: Boolean`
+  - Will be `true` if the query has been fetched after the component mounted.
+  - This property can be used to not show any previously cached data.
 - `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.

docs/src/pages/docs/react-native.md

@@ -0,0 +1,22 @@
+---
+id: react-native
+title: React Native
+---
+
+When using React Query on React Native you may face the following error:
+
+> React Native throws fullscreen error when promises are rejected
+
+This is happening because by default React Query uses `console.error` to log promise rejection.
+
+To fix this issue you can replace `console.error` with `console.warn` using [setConsole](https://react-query.tanstack.com/docs/api#setconsole).
+
+```js
+import { setConsole } from 'react-query'
+
+setConsole({
+  log: console.log,
+  warn: console.warn,
+  error: console.warn,
+})
+```

src/core/config.ts

@@ -51,16 +51,16 @@ export const DEFAULT_STALE_TIME = 0
 export const DEFAULT_CACHE_TIME = 5 * 60 * 1000
 export const DEFAULT_CONFIG: ReactQueryConfig = {
   queries: {
-    queryKeySerializerFn: defaultQueryKeySerializerFn,
+    cacheTime: DEFAULT_CACHE_TIME,
     enabled: true,
+    notifyOnStatusChange: true,
+    queryKeySerializerFn: defaultQueryKeySerializerFn,
+    refetchOnMount: true,
+    refetchOnReconnect: true,
+    refetchOnWindowFocus: true,
     retry: 3,
     retryDelay: attemptIndex => Math.min(1000 * 2 ** attemptIndex, 30000),
     staleTime: DEFAULT_STALE_TIME,
-    cacheTime: DEFAULT_CACHE_TIME,
-    refetchOnWindowFocus: true,
-    refetchOnReconnect: true,
-    refetchOnMount: true,
-    notifyOnStatusChange: true,
     structuralSharing: true,
   },
 }

src/core/query.ts

@@ -9,6 +9,7 @@ import {
   isDocumentVisible,
   isOnline,
   isServer,
+  noop,
   replaceEqualDeep,
   sleep,
 } from './utils'
@@ -38,6 +39,7 @@ export interface QueryState<TResult, TError> {
   data?: TResult
   error: TError | null
   failureCount: number
+  fetchedCount: number
   isError: boolean
   isFetched: boolean
   isFetching: boolean
@@ -135,7 +137,7 @@ export class Query<TResult, TError> {
     this.state = queryReducer(this.state, action)
 
     this.observers.forEach(observer => {
-      observer.onQueryUpdate(this.state, action)
+      observer.onQueryUpdate(action)
     })
 
     this.notifyGlobalListeners(this)
@@ -157,20 +159,6 @@ export class Query<TResult, TError> {
     }, this.cacheTime)
   }
 
-  async refetch(
-    options?: RefetchOptions,
-    config?: QueryConfig<TResult, TError>
-  ): Promise<TResult | undefined> {
-    try {
-      return await this.fetch(undefined, config)
-    } catch (error) {
-      if (options?.throwOnError === true) {
-        throw error
-      }
-      return undefined
-    }
-  }
-
   cancel(): void {
     this.cancelFetch?.()
   }
@@ -252,8 +240,9 @@ export class Query<TResult, TError> {
           observer.config.refetchOnWindowFocus
       )
     ) {
-      this.fetch()
+      this.fetch().catch(noop)
     }
+
     this.continue()
   }
 
@@ -266,8 +255,9 @@ export class Query<TResult, TError> {
           observer.config.refetchOnReconnect
       )
     ) {
-      this.fetch()
+      this.fetch().catch(noop)
     }
+
     this.continue()
   }
 
@@ -306,6 +296,35 @@ export class Query<TResult, TError> {
     this.scheduleGc()
   }
 
+  async refetch(
+    options?: RefetchOptions,
+    config?: QueryConfig<TResult, TError>
+  ): Promise<TResult | undefined> {
+    try {
+      return await this.fetch(undefined, config)
+    } catch (error) {
+      if (options?.throwOnError === true) {
+        throw error
+      }
+    }
+  }
+
+  async fetchMore(
+    fetchMoreVariable?: unknown,
+    options?: FetchMoreOptions,
+    config?: QueryConfig<TResult, TError>
+  ): Promise<TResult | undefined> {
+    return this.fetch(
+      {
+        fetchMore: {
+          fetchMoreVariable,
+          previous: options?.previous || false,
+        },
+      },
+      config
+    )
+  }
+
   async fetch(
     options?: FetchOptions,
     config?: QueryConfig<TResult, TError>
@@ -548,22 +567,6 @@ export class Query<TResult, TError> {
       run()
     })
   }
-
-  fetchMore(
-    fetchMoreVariable?: unknown,
-    options?: FetchMoreOptions,
-    config?: QueryConfig<TResult, TError>
-  ): Promise<TResult | undefined> {
-    return this.fetch(
-      {
-        fetchMore: {
-          fetchMoreVariable,
-          previous: options?.previous || false,
-        },
-      },
-      config
-    )
-  }
 }
 
 function getLastPage<TResult>(pages: TResult[], previous?: boolean): TResult {
@@ -578,7 +581,6 @@ function hasMorePages<TResult, TError>(
   if (config.infinite && config.getFetchMore && Array.isArray(pages)) {
     return Boolean(config.getFetchMore(getLastPage(pages, previous), pages))
   }
-  return undefined
 }
 
 function getDefaultState<TResult, TError>(
@@ -604,6 +606,7 @@ function getDefaultState<TResult, TError>(
     isFetching: initialStatus === QueryStatus.Loading,
     isFetchingMore: false,
     failureCount: 0,
+    fetchedCount: 0,
     data: initialData,
     updatedAt: Date.now(),
     canFetchMore: hasMorePages(config, initialData),
@@ -638,6 +641,7 @@ export function queryReducer<TResult, TError>(
         ...getStatusProps(QueryStatus.Success),
         data: action.data,
         error: null,
+        fetchedCount: state.fetchedCount + 1,
         isFetched: true,
         isFetching: false,
         isFetchingMore: false,
@@ -650,6 +654,7 @@ export function queryReducer<TResult, TError>(
         ...state,
         ...getStatusProps(QueryStatus.Error),
         error: action.error,
+        fetchedCount: state.fetchedCount + 1,
         isFetched: true,
         isFetching: false,
         isFetchingMore: false,