Merge branch 'main' into devtools-in-prod

Author: TkDodo

.github/workflows/pr.yml

@@ -65,7 +65,7 @@ jobs:
         run: |
           echo "COMMIT_SHA=${{ github.event.pull_request.head.sha || github.sha }}" >> $GITHUB_ENV
       - name: Preview Bundle Size
-        uses: marocchino/sticky-pull-request-comment@28d58c4b5a5eae3bbe45348c3990dcbc2ffcdc69
+        uses: marocchino/sticky-pull-request-comment@9c40848920de7cd32a71773ba792d8b04f03bf7a
         with:
           message: |
             Sizes for commit ${{ env.COMMIT_SHA }}:

docs/framework/angular/devtools.md

@@ -5,9 +5,9 @@ title: Devtools
 
 > For Chrome, Firefox, and Edge users: Third-party browser extensions are available for debugging TanStack Query directly in browser DevTools. These provide the same functionality as the framework-specific devtools packages:
 >
-> - <img alt="Chrome logo" src="https://www.google.com/chrome/static/images/chrome-logo.svg" width="16" height="16" class="inline mr-1" /> [Devtools for Chrome](https://chromewebstore.google.com/detail/tanstack-query-devtools/annajfchloimdhceglpgglpeepfghfai)
-> - <img alt="Firefox logo" src="https://upload.wikimedia.org/wikipedia/commons/a/a0/Firefox_logo%2C_2019.svg" width="16" height="16" class="inline mr-1" /> [Devtools for Firefox](https://addons.mozilla.org/en-US/firefox/addon/tanstack-query-devtools/)
-> - <img alt="Edge logo" src="https://upload.wikimedia.org/wikipedia/commons/9/98/Microsoft_Edge_logo_%282019%29.svg" width="16" height="16" class="inline mr-1" /> [Devtools for Edge](https://microsoftedge.microsoft.com/addons/detail/tanstack-query-devtools/edmdpkgkacmjopodhfolmphdenmddobj)
+> - <img alt="Chrome logo" src="https://www.google.com/chrome/static/images/chrome-logo.svg" width="16" height="16" class="inline mr-1 not-prose" /> [Devtools for Chrome](https://chromewebstore.google.com/detail/tanstack-query-devtools/annajfchloimdhceglpgglpeepfghfai)
+> - <img alt="Firefox logo" src="https://upload.wikimedia.org/wikipedia/commons/a/a0/Firefox_logo%2C_2019.svg" width="16" height="16" class="inline mr-1 not-prose" /> [Devtools for Firefox](https://addons.mozilla.org/en-US/firefox/addon/tanstack-query-devtools/)
+> - <img alt="Edge logo" src="https://upload.wikimedia.org/wikipedia/commons/9/98/Microsoft_Edge_logo_%282019%29.svg" width="16" height="16" class="inline mr-1 not-prose" /> [Devtools for Edge](https://microsoftedge.microsoft.com/addons/detail/tanstack-query-devtools/edmdpkgkacmjopodhfolmphdenmddobj)
 
 ## Enable devtools
 

docs/framework/react/community/community-projects.md

@@ -37,9 +37,9 @@ Browser extensions for Chrome, Firefox, and Edge that provide devtools for TanSt
 
 Links:
 
-- <img alt="Chrome logo" src="https://www.google.com/chrome/static/images/chrome-logo.svg" width="16" height="16" class="inline mr-1" /> [Devtools for Chrome](https://chromewebstore.google.com/detail/tanstack-query-devtools/annajfchloimdhceglpgglpeepfghfai)
-- <img alt="Firefox logo" src="https://upload.wikimedia.org/wikipedia/commons/a/a0/Firefox_logo%2C_2019.svg" width="16" height="16" class="inline mr-1" /> [Devtools for Firefox](https://addons.mozilla.org/en-US/firefox/addon/tanstack-query-devtools/)
-- <img alt="Edge logo" src="https://upload.wikimedia.org/wikipedia/commons/9/98/Microsoft_Edge_logo_%282019%29.svg" width="16" height="16" class="inline mr-1" /> [Devtools for Edge](https://microsoftedge.microsoft.com/addons/detail/tanstack-query-devtools/edmdpkgkacmjopodhfolmphdenmddobj)
+- <img alt="Chrome logo" src="https://www.google.com/chrome/static/images/chrome-logo.svg" width="16" height="16" class="inline mr-1 not-prose" /> [Devtools for Chrome](https://chromewebstore.google.com/detail/tanstack-query-devtools/annajfchloimdhceglpgglpeepfghfai)
+- <img alt="Firefox logo" src="https://upload.wikimedia.org/wikipedia/commons/a/a0/Firefox_logo%2C_2019.svg" width="16" height="16" class="inline mr-1 not-prose" /> [Devtools for Firefox](https://addons.mozilla.org/en-US/firefox/addon/tanstack-query-devtools/)
+- <img alt="Edge logo" src="https://upload.wikimedia.org/wikipedia/commons/9/98/Microsoft_Edge_logo_%282019%29.svg" width="16" height="16" class="inline mr-1 not-prose" /> [Devtools for Edge](https://microsoftedge.microsoft.com/addons/detail/tanstack-query-devtools/edmdpkgkacmjopodhfolmphdenmddobj)
 
 ## GraphQL Code Generator
 

docs/framework/react/devtools.md

@@ -9,9 +9,9 @@ When you begin your React Query journey, you'll want these devtools by your side
 
 > For Chrome, Firefox, and Edge users: Third-party browser extensions are available for debugging TanStack Query directly in browser DevTools. These provide the same functionality as the framework-specific devtools packages:
 >
-> - <img alt="Chrome logo" src="https://www.google.com/chrome/static/images/chrome-logo.svg" width="16" height="16" class="inline mr-1" /> [Devtools for Chrome](https://chromewebstore.google.com/detail/tanstack-query-devtools/annajfchloimdhceglpgglpeepfghfai)
-> - <img alt="Firefox logo" src="https://upload.wikimedia.org/wikipedia/commons/a/a0/Firefox_logo%2C_2019.svg" width="16" height="16" class="inline mr-1" /> [Devtools for Firefox](https://addons.mozilla.org/en-US/firefox/addon/tanstack-query-devtools/)
-> - <img alt="Edge logo" src="https://upload.wikimedia.org/wikipedia/commons/9/98/Microsoft_Edge_logo_%282019%29.svg" width="16" height="16" class="inline mr-1" /> [Devtools for Edge](https://microsoftedge.microsoft.com/addons/detail/tanstack-query-devtools/edmdpkgkacmjopodhfolmphdenmddobj)
+> - <img alt="Chrome logo" src="https://www.google.com/chrome/static/images/chrome-logo.svg" width="16" height="16" class="inline mr-1 not-prose" /> [Devtools for Chrome](https://chromewebstore.google.com/detail/tanstack-query-devtools/annajfchloimdhceglpgglpeepfghfai)
+> - <img alt="Firefox logo" src="https://upload.wikimedia.org/wikipedia/commons/a/a0/Firefox_logo%2C_2019.svg" width="16" height="16" class="inline mr-1 not-prose" /> [Devtools for Firefox](https://addons.mozilla.org/en-US/firefox/addon/tanstack-query-devtools/)
+> - <img alt="Edge logo" src="https://upload.wikimedia.org/wikipedia/commons/9/98/Microsoft_Edge_logo_%282019%29.svg" width="16" height="16" class="inline mr-1 not-prose" /> [Devtools for Edge](https://microsoftedge.microsoft.com/addons/detail/tanstack-query-devtools/edmdpkgkacmjopodhfolmphdenmddobj)
 
 > For React Native users: A third-party native macOS app is available for debugging React Query in ANY js-based application. Monitor queries across devices in real-time. Check it out here: [rn-better-dev-tools](https://github.com/LovesWorking/rn-better-dev-tools)
 

docs/framework/react/guides/invalidations-from-mutations.md

@@ -27,15 +27,25 @@ const queryClient = useQueryClient()
 // When this mutation succeeds, invalidate any queries with the `todos` or `reminders` query key
 const mutation = useMutation({
   mutationFn: addTodo,
-  onSuccess: () => {
-    queryClient.invalidateQueries({ queryKey: ['todos'] })
-    queryClient.invalidateQueries({ queryKey: ['reminders'] })
+  onSuccess: async () => {
+    // If you're invalidating a single query
+    await queryClient.invalidateQueries({ queryKey: ['todos'] })
+
+    // If you're invalidating multiple queries
+    await Promise.all([
+      queryClient.invalidateQueries({ queryKey: ['todos'] }),
+      queryClient.invalidateQueries({ queryKey: ['reminders'] }),
+    ])
   },
 })
 ```
 
 [//]: # 'Example2'
 
+Returning a Promise on `onSuccess` makes sure the data is updated before the mutation is entirely complete (i.e., isPending is true until onSuccess is fulfilled)
+
+[//]: # 'Example2'
+
 You can wire up your invalidations to happen using any of the callbacks available in the [`useMutation` hook](../mutations.md)
 
 [//]: # 'Materials'

docs/framework/react/react-native.md

@@ -74,13 +74,15 @@ useEffect(() => {
 ## Refresh on Screen focus
 
 In some situations, you may want to refetch the query when a React Native Screen is focused again.
-This custom hook will call the provided `refetch` function when the screen is focused again.
+This custom hook will refetch **all active stale queries** when the screen is focused again.
 
 ```tsx
 import React from 'react'
 import { useFocusEffect } from '@react-navigation/native'
+import { useQueryClient } from '@tanstack/react-query'
 
-export function useRefreshOnFocus<T>(refetch: () => Promise<T>) {
+export function useRefreshOnFocus() {
+  const queryClient = useQueryClient()
   const firstTimeRef = React.useRef(true)
 
   useFocusEffect(
@@ -90,13 +92,18 @@ export function useRefreshOnFocus<T>(refetch: () => Promise<T>) {
         return
       }
 
-      refetch()
-    }, [refetch]),
+      // refetch all stale active queries
+      queryClient.refetchQueries({
+        queryKey: ['posts'],
+        stale: true,
+        type: 'active',
+      })
+    }, [queryClient]),
   )
 }
 ```
 
-In the above code, `refetch` is skipped the first time because `useFocusEffect` calls our callback on mount in addition to screen focus.
+In the above code, the first focus (when the screen is initially mounted) is skipped because `useFocusEffect` calls our callback on mount in addition to screen focus.
 
 ## Disable queries on out of focus screens
 

docs/framework/react/reference/hydration.md

@@ -91,7 +91,7 @@ hydrate(queryClient, dehydratedState, options)
     - `mutations: MutationOptions` The default mutation options to use for the hydrated mutations.
     - `queries: QueryOptions` The default query options to use for the hydrated queries.
     - `deserializeData?: (data: any) => any` A function to transform (deserialize) data before it is put into the cache.
-  - `queryClient?: QueryClient`,
+  - `queryClient?: QueryClient`
     - Use this to use a custom QueryClient. Otherwise, the one from the nearest context will be used.
 
 ### Limitations
@@ -122,7 +122,7 @@ function App() {
   - Optional
   - `defaultOptions: QueryOptions`
     - The default query options to use for the hydrated queries.
-  - `queryClient?: QueryClient`,
+  - `queryClient?: QueryClient`
     - Use this to use a custom QueryClient. Otherwise, the one from the nearest context will be used.
 
 [//]: # 'HydrationBoundary'

docs/framework/react/reference/useIsFetching.md

@@ -16,7 +16,7 @@ const isFetchingPosts = useIsFetching({ queryKey: ['posts'] })
 **Options**
 
 - `filters?: QueryFilters`: [Query Filters](../../guides/filters.md#query-filters)
-- `queryClient?: QueryClient`,
+- `queryClient?: QueryClient`
   - Use this to use a custom QueryClient. Otherwise, the one from the nearest context will be used.
 
 **Returns**

docs/framework/react/reference/useIsMutating.md

@@ -16,7 +16,7 @@ const isMutatingPosts = useIsMutating({ mutationKey: ['posts'] })
 **Options**
 
 - `filters?: MutationFilters`: [Mutation Filters](../../guides/filters.md#mutation-filters)
-- `queryClient?: QueryClient`,
+- `queryClient?: QueryClient`
   - Use this to use a custom QueryClient. Otherwise, the one from the nearest context will be used.
 
 **Returns**

docs/framework/react/reference/useMutation.md

@@ -103,7 +103,7 @@ mutate(variables, {
 
 **Parameter2 (QueryClient)**
 
-- `queryClient?: QueryClient`,
+- `queryClient?: QueryClient`
   - Use this to use a custom QueryClient. Otherwise, the one from the nearest context will be used.
 
 **Returns**
@@ -128,7 +128,7 @@ mutate(variables, {
   - If you make multiple requests, `onSuccess` will fire only after the latest call you've made.
 - `mutateAsync: (variables: TVariables, { onSuccess, onSettled, onError }) => Promise<TData>`
   - Similar to `mutate` but returns a promise which can be awaited.
-- `status: string`
+- `status: MutationStatus`
   - Will be:
     - `idle` initial status prior to the mutation function executing.
     - `pending` if the mutation is currently executing.