merge branch master into beta

Author: TkDodo

README.md

@@ -30,7 +30,8 @@ Enjoy this library? Try the entire [TanStack](https://tanstack.com)! [React Tabl
 
 ## Visit [react-query.tanstack.com](https://react-query.tanstack.com) for docs, guides, API and more!
 
-Still on **React Query v2**? No problem! Check out the v2 docs here: https://react-query-v2.tanstack.com/.
+Still on **React Query v2**? No problem! Check out the v2 docs here: https://react-query-v2.tanstack.com/. <br />
+Would you like to try **React Query v4beta**? Check out the v4 beta docs here: https://react-query-beta.tanstack.com/.
 ## Quick Features
 
 - Transport/protocol/backend agnostic data fetching (REST, GraphQL, promises, whatever!)

docs/src/components/LayoutDocs.js

@@ -119,7 +119,7 @@ export const LayoutDocs = props => {
                         <p className='text-sm'>
                           Fast track your learning and {' '}
                           <a
-                            href="https://ui.dev/checkout/react-query?from=tanstack"
+                            href="https://ui.dev/react-query?from=tanstack"
                             className="text-blue-600 font-semibold transition-colors duration-150 ease-out"
                           >
                             take the offical course ↗️
@@ -128,14 +128,19 @@ export const LayoutDocs = props => {
                       </div>
                       <div className="mt-12 relative">
                         <h4 className="font-semibold uppercase text-sm mb-2 mt-2 text-gray-500">
-                          Subscribe to Bytes
+                          Subscribe to{' '}
+                          <a
+                            className="text-blue-600"
+                            href="https://bytes.dev?r=tanstack"
+                          >
+                            Bytes
+                          </a>
                         </h4>
                         <p className="mt-4  text-sm leading-6 mb-4">
-                          The best JavaScript newsletter! Delivered every
-                          Monday to over 76,000 devs.
+                          Your weekly dose of JavaScript news. Delivered every
+                          Monday to over 80,000 devs, for free.
                         </p>
                         <BytesForm />
-                        
                       </div>
                     </div>
                   </div>

docs/src/components/Nav.js

@@ -37,7 +37,7 @@ export const Nav = () => (
             </div>
             <div>
               <a
-                href="https://learn.tanstack.com/p/react-query-essentials"
+                href="https://ui.dev/react-query?from=tanstack"
                 target="_blank"
                 className="leading-6 font-medium"
               >

docs/src/components/PPPBanner.js

@@ -49,7 +49,7 @@ export function PPPBanner() {
             Course with code{' '}
             <a
               className="underline cursor-pointer"
-              href={`/checkout/react-query?from=tanstack&coupon_code=${data.coupon}`}
+              href={`https://ui.dev/react-query?from=tanstack&coupon_code=${data.coupon}`}
             >
               <strong>{data.coupon}</strong>
             </a>

docs/src/pages/guides/query-cancellation.md

@@ -127,8 +127,8 @@ const query = useQuery(['todos'], ({ signal }) => {
 You might want to cancel a query manually. For example, if the request takes a long time to finish, you can allow the user to click a cancel button to stop the request. To do this, you just need to call `queryClient.cancelQueries(key)`, which will cancel the query and revert it back to its previous state. If `promise.cancel` is available, or you have consumed the `signal` passed to the query function, React Query will additionally also cancel the Promise.
 
 ```js
-const query = useQuery(['todos'], await ({ signal }) => {
-  const resp = fetch('/todos', { signal })
+const query = useQuery(['todos'], async ({ signal }) => {
+  const resp = await fetch('/todos', { signal })
   return resp.json()
 })
 

docs/src/pages/index.js

@@ -74,10 +74,10 @@ const Home = ({ sponsors }) => {
                     <p>
                       Want to skip the docs?{' '}
                       <a
-                        href="https://ui.dev/checkout/react-query?from=tanstack"
+                        href="https://ui.dev/react-query?from=tanstack"
                         className="text-blue-600 font-semibold transition-colors duration-150 ease-out"
                       >
-                        Take the offical course
+                        Take the official course
                       </a>
                     </p>
                   </div>
@@ -177,7 +177,7 @@ const Home = ({ sponsors }) => {
                   </span>
                 </div>
                 <a
-                  href="https://ui.dev/checkout/react-query?from=tanstack"
+                  href="https://ui.dev/react-query?from=tanstack"
                   target="_blank"
                   className="inline-block mt-8 rounded shadow-lg bg-coral text-white font-bold text-xl px-4 py-3"
                 >
@@ -375,7 +375,7 @@ const Home = ({ sponsors }) => {
             </h2>
             <div className="mt-8 flex lg:flex-shrink-0 md:mt-0">
               <div className="inline-flex rounded-md shadow">
-                  <a href="https://ui.dev/checkout/react-query?from=tanstack" className="inline-flex items-center justify-center text-center px-5 py-3 border border-transparent text-base leading-6 font-medium rounded-md text-white bg-coral hover:bg-coral-light focus:outline-none focus:shadow-outline transition duration-150 ease-in-out">
+                  <a href="https://ui.dev/react-query?from=tanstack" className="inline-flex items-center justify-center text-center px-5 py-3 border border-transparent text-base leading-6 font-medium rounded-md text-white bg-coral hover:bg-coral-light focus:outline-none focus:shadow-outline transition duration-150 ease-in-out">
                     Take the course
                   </a>
               </div>

docs/src/pages/overview.md

@@ -84,5 +84,5 @@ function Example() {
 
 ## You talked me into it, so what now?
 
-- Consider taking the official [React Query Course](https://ui.dev/checkout/react-query?from=tanstack) (or buying it for your whole team!)
+- Consider taking the official [React Query Course](https://ui.dev/react-query?from=tanstack) (or buying it for your whole team!)
 - Learn React Query at your own pace with our amazingly thorough [Walkthrough Guide](../installation) and [API Reference](../reference/useQuery)

docs/src/pages/react-native.md

@@ -55,16 +55,19 @@ import React from 'react'
 import { useFocusEffect } from '@react-navigation/native'
 
 export function useRefreshOnFocus<T>(refetch: () => Promise<T>) {
-  const enabledRef = React.useRef(false)
+  const firstTimeRef = React.useRef(true)
 
   useFocusEffect(
     React.useCallback(() => {
-      if (enabledRef.current) {
-        refetch()
-      } else {
-        enabledRef.current = true
+      if (firstTimeRef.current) {
+         firstTimeRef.current = false;
+         return;
       }
+
+      refetch()
     }, [refetch])
   )
 }
 ```
+
+In the above code, `refetch` is skipped the first time because `useFocusEffect` calls our callback on mount in addition to screen focus.

docs/src/pages/reference/useQuery.md

@@ -114,24 +114,27 @@ const result = useQuery({
 - `refetchIntervalInBackground: boolean`
   - Optional
   - If set to `true`, queries that are set to continuously refetch with a `refetchInterval` will continue to refetch while their tab/window is in the background
-- `refetchOnMount: boolean | "always"`
+- `refetchOnMount: boolean | "always" | ((query: Query) => boolean | "always")`
   - Optional
   - Defaults to `true`
   - If set to `true`, the query will refetch on mount if the data is stale.
   - If set to `false`, the query will not refetch on mount.
   - If set to `"always"`, the query will always refetch on mount.
-- `refetchOnWindowFocus: boolean | "always"`
+  - If set to a function, the function will be executed with the query to compute the value
+- `refetchOnWindowFocus: boolean | "always" | ((query: Query) => boolean | "always")`
   - Optional
   - Defaults to `true`
   - If set to `true`, the query will refetch on window focus if the data is stale.
   - If set to `false`, the query will not refetch on window focus.
   - If set to `"always"`, the query will always refetch on window focus.
-- `refetchOnReconnect: boolean | "always"`
+  - If set to a function, the function will be executed with the query to compute the value
+- `refetchOnReconnect: boolean | "always" | ((query: Query) => boolean | "always")`
   - Optional
   - Defaults to `true`
   - If set to `true`, the query will refetch on reconnect if the data is stale.
   - If set to `false`, the query will not refetch on reconnect.
   - If set to `"always"`, the query will always refetch on reconnect.
+  - If set to a function, the function will be executed with the query to compute the value
 - `notifyOnChangeProps: string[] | "all"`
   - Optional
   - If set, the component will only re-render if any of the listed properties change.

src/core/queryObserver.ts

@@ -120,11 +120,19 @@ export class QueryObserver<
   }
 
   shouldFetchOnReconnect(): boolean {
-    return shouldFetchOnReconnect(this.currentQuery, this.options)
+    return shouldFetchOn(
+      this.currentQuery,
+      this.options,
+      this.options.refetchOnReconnect
+    )
   }
 
   shouldFetchOnWindowFocus(): boolean {
-    return shouldFetchOnWindowFocus(this.currentQuery, this.options)
+    return shouldFetchOn(
+      this.currentQuery,
+      this.options,
+      this.options.refetchOnWindowFocus
+    )
   }
 
   destroy(): void {
@@ -694,47 +702,30 @@ function shouldLoadOnMount(
   )
 }
 
-function shouldRefetchOnMount(
-  query: Query<any, any, any, any>,
-  options: QueryObserverOptions<any, any, any, any>
-): boolean {
-  return (
-    options.enabled !== false &&
-    query.state.dataUpdatedAt > 0 &&
-    (options.refetchOnMount === 'always' ||
-      (options.refetchOnMount !== false && isStale(query, options)))
-  )
-}
-
 function shouldFetchOnMount(
   query: Query<any, any, any, any>,
   options: QueryObserverOptions<any, any, any, any, any>
 ): boolean {
   return (
-    shouldLoadOnMount(query, options) || shouldRefetchOnMount(query, options)
+    shouldLoadOnMount(query, options) ||
+    (query.state.dataUpdatedAt > 0 &&
+      shouldFetchOn(query, options, options.refetchOnMount))
   )
 }
 
-function shouldFetchOnReconnect(
+function shouldFetchOn(
   query: Query<any, any, any, any>,
-  options: QueryObserverOptions<any, any, any, any, any>
-): boolean {
-  return (
-    options.enabled !== false &&
-    (options.refetchOnReconnect === 'always' ||
-      (options.refetchOnReconnect !== false && isStale(query, options)))
-  )
-}
-
-function shouldFetchOnWindowFocus(
-  query: Query<any, any, any, any>,
-  options: QueryObserverOptions<any, any, any, any, any>
-): boolean {
-  return (
-    options.enabled !== false &&
-    (options.refetchOnWindowFocus === 'always' ||
-      (options.refetchOnWindowFocus !== false && isStale(query, options)))
-  )
+  options: QueryObserverOptions<any, any, any, any, any>,
+  field: typeof options['refetchOnMount'] &
+    typeof options['refetchOnWindowFocus'] &
+    typeof options['refetchOnReconnect']
+) {
+  if (options.enabled !== false) {
+    const value = typeof field === 'function' ? field(query) : field
+
+    return value === 'always' || (value !== false && isStale(query, options))
+  }
+  return false
 }
 
 function shouldFetchOptionally(