From 4b3e884b8dee36e03a74fbcdb00c5dbc5d5e9e30 Mon Sep 17 00:00:00 2001
From: lovesworking <austinlovesworking@gmail.com>
Date: Sat, 22 Mar 2025 09:18:34 -0600
Subject: [PATCH 1/8] test

---
 packages/query-devtools/src/Devtools.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/query-devtools/src/Devtools.tsx b/packages/query-devtools/src/Devtools.tsx
index df1f4e64e3..f6f41380d2 100644
--- a/packages/query-devtools/src/Devtools.tsx
+++ b/packages/query-devtools/src/Devtools.tsx
@@ -1771,10 +1771,10 @@ const QueryDetails = () => {
     const promise = activeQuery()?.fetch()
     promise?.catch(() => {})
   }
-
+  // trigger error
   const triggerError = (errorType?: DevtoolsErrorType) => {
     const error =
-      errorType?.initializer(activeQuery()!) ??
+      errorType?.initializer(activeQuery()) ??
       new Error('Unknown error from devtools')
 
     const __previousQueryOptions = activeQuery()!.options
@@ -1785,10 +1785,10 @@ const QueryDetails = () => {
       fetchMeta: {
         ...activeQuery()!.state.fetchMeta,
         __previousQueryOptions,
-      } as any,
+      },
     } as QueryState<unknown, Error>)
   }
-
+  // restore error
   const restoreQueryAfterLoadingOrError = () => {
     const activeQueryVal = activeQuery()!
     const previousState = activeQueryVal.state
@@ -1835,7 +1835,7 @@ const QueryDetails = () => {
         class={cx(styles().detailsContainer, 'tsqd-query-details-container')}
       >
         <div class={cx(styles().detailsHeader, 'tsqd-query-details-header')}>
-          Query Details
+          Query Detailszzzz
         </div>
         <div
           class={cx(
@@ -1981,7 +1981,7 @@ const QueryDetails = () => {
                   fetchMeta: {
                     ...activeQueryVal.state.fetchMeta,
                     __previousQueryOptions,
-                  } as any,
+                  },
                 } as QueryState<unknown, Error>)
               }
             }}

From f7b02b4d03e00dfcee3c6f0794404425c714d1fa Mon Sep 17 00:00:00 2001
From: lovesworking <austinlovesworking@gmail.com>
Date: Sun, 23 Mar 2025 11:10:14 -0600
Subject: [PATCH 2/8] feat(devtools): add action event types and notify
 functionality for query actions

---
 packages/query-core/src/query.ts         | 40 +++++++++++++++
 packages/query-devtools/src/Devtools.tsx | 62 ++++++++++++++++++++----
 2 files changed, 92 insertions(+), 10 deletions(-)

diff --git a/packages/query-core/src/query.ts b/packages/query-core/src/query.ts
index e6ad4ca4ee..3351108eb7 100644
--- a/packages/query-core/src/query.ts
+++ b/packages/query-core/src/query.ts
@@ -133,6 +133,38 @@ interface ContinueAction {
   type: 'continue'
 }
 
+export interface RefetchActionEvent {
+  type: 'ACTION-REFETCH'
+}
+
+export interface InvalidateActionEvent {
+  type: 'ACTION-INVALIDATE'
+}
+
+export interface TriggerErrorActionEvent {
+  type: 'ACTION-TRIGGER-ERROR'
+}
+
+export interface RestoreErrorActionEvent {
+  type: 'ACTION-RESTORE-ERROR'
+}
+
+export interface ResetActionEvent {
+  type: 'ACTION-RESET'
+}
+
+export interface RemoveActionEvent {
+  type: 'ACTION-REMOVE'
+}
+
+export interface TriggerLoadingActionEvent {
+  type: 'ACTION-TRIGGER-LOADING'
+}
+
+export interface RestoreLoadingActionEvent {
+  type: 'ACTION-RESTORE-LOADING'
+}
+
 interface SetStateAction<TData, TError> {
   type: 'setState'
   state: Partial<QueryState<TData, TError>>
@@ -148,6 +180,14 @@ export type Action<TData, TError> =
   | PauseAction
   | SetStateAction<TData, TError>
   | SuccessAction<TData>
+  | TriggerErrorActionEvent
+  | RestoreErrorActionEvent
+  | RefetchActionEvent
+  | RestoreLoadingActionEvent
+  | RemoveActionEvent
+  | TriggerLoadingActionEvent
+  | ResetActionEvent
+  | InvalidateActionEvent
 
 export interface SetStateOptions {
   meta?: any
diff --git a/packages/query-devtools/src/Devtools.tsx b/packages/query-devtools/src/Devtools.tsx
index f6f41380d2..10bba3fd86 100644
--- a/packages/query-devtools/src/Devtools.tsx
+++ b/packages/query-devtools/src/Devtools.tsx
@@ -1768,28 +1768,34 @@ const QueryDetails = () => {
   const color = createMemo(() => getQueryStatusColorByLabel(statusLabel()))
 
   const handleRefetch = () => {
+    notifyDevtools(activeQuery(), 'REFETCH')
     const promise = activeQuery()?.fetch()
     promise?.catch(() => {})
   }
   // trigger error
   const triggerError = (errorType?: DevtoolsErrorType) => {
+    const activeQueryVal = activeQuery()
+    if (!activeQueryVal) return
+    notifyDevtools(activeQueryVal, 'TRIGGER_ERROR')
     const error =
-      errorType?.initializer(activeQuery()) ??
+      errorType?.initializer(activeQueryVal) ??
       new Error('Unknown error from devtools')
 
-    const __previousQueryOptions = activeQuery()!.options
+    const __previousQueryOptions = activeQueryVal.options
 
-    activeQuery()!.setState({
+    activeQueryVal.setState({
       status: 'error',
       error,
       fetchMeta: {
-        ...activeQuery()!.state.fetchMeta,
+        ...activeQueryVal.state.fetchMeta,
+        // @ts-ignore This does exist
         __previousQueryOptions,
       },
-    } as QueryState<unknown, Error>)
+    })
   }
-  // restore error
+
   const restoreQueryAfterLoadingOrError = () => {
+    notifyDevtools(activeQuery(), 'RESTORE_LOADING')
     const activeQueryVal = activeQuery()!
     const previousState = activeQueryVal.state
     const previousOptions = activeQueryVal.state.fetchMeta
@@ -1835,7 +1841,7 @@ const QueryDetails = () => {
         class={cx(styles().detailsContainer, 'tsqd-query-details-container')}
       >
         <div class={cx(styles().detailsHeader, 'tsqd-query-details-header')}>
-          Query Detailszzzz
+          Query Details
         </div>
         <div
           class={cx(
@@ -1899,7 +1905,10 @@ const QueryDetails = () => {
               'tsqd-query-details-actions-btn',
               'tsqd-query-details-action-invalidate',
             )}
-            onClick={() => queryClient.invalidateQueries(activeQuery())}
+            onClick={() => {
+              notifyDevtools(activeQuery(), 'INVALIDATE')
+              queryClient.invalidateQueries(activeQuery())
+            }}
             disabled={queryStatus() === 'pending'}
           >
             <span
@@ -1917,7 +1926,10 @@ const QueryDetails = () => {
               'tsqd-query-details-actions-btn',
               'tsqd-query-details-action-reset',
             )}
-            onClick={() => queryClient.resetQueries(activeQuery())}
+            onClick={() => {
+              notifyDevtools(activeQuery(), 'RESET')
+              queryClient.resetQueries(activeQuery())
+            }}
             disabled={queryStatus() === 'pending'}
           >
             <span
@@ -1936,6 +1948,7 @@ const QueryDetails = () => {
               'tsqd-query-details-action-remove',
             )}
             onClick={() => {
+              notifyDevtools(activeQuery(), 'REMOVE')
               queryClient.removeQueries(activeQuery())
               setSelectedQueryHash(null)
             }}
@@ -1959,9 +1972,11 @@ const QueryDetails = () => {
             disabled={restoringLoading()}
             onClick={() => {
               if (activeQuery()?.state.data === undefined) {
+                notifyDevtools(activeQuery(), 'RESTORE_LOADING')
                 setRestoringLoading(true)
                 restoreQueryAfterLoadingOrError()
               } else {
+                notifyDevtools(activeQuery(), 'TRIGGER_LOADING')
                 const activeQueryVal = activeQuery()
                 if (!activeQueryVal) return
                 const __previousQueryOptions = activeQueryVal.options
@@ -1982,7 +1997,7 @@ const QueryDetails = () => {
                     ...activeQueryVal.state.fetchMeta,
                     __previousQueryOptions,
                   },
-                } as QueryState<unknown, Error>)
+                } as unknown as QueryState<unknown, Error>)
               }
             }}
           >
@@ -2006,6 +2021,7 @@ const QueryDetails = () => {
                 if (!activeQuery()!.state.error) {
                   triggerError()
                 } else {
+                  notifyDevtools(activeQuery(), 'RESTORE_ERROR')
                   queryClient.resetQueries(activeQuery())
                 }
               }}
@@ -2438,6 +2454,32 @@ const createSubscribeToMutationCacheBatcher = <T,>(
   return value
 }
 
+const DevtoolsActions = {
+  REFETCH: 'ACTION-REFETCH',
+  INVALIDATE: 'ACTION-INVALIDATE',
+  RESET: 'ACTION-RESET',
+  REMOVE: 'ACTION-REMOVE',
+  TRIGGER_ERROR: 'ACTION-TRIGGER-ERROR',
+  RESTORE_ERROR: 'ACTION-RESTORE-ERROR',
+  TRIGGER_LOADING: 'ACTION-TRIGGER-LOADING',
+  RESTORE_LOADING: 'ACTION-RESTORE-LOADING',
+} as const
+
+const notifyDevtools = (
+  query: Query | undefined,
+  actionType: keyof typeof DevtoolsActions,
+) => {
+  if (!query) return
+  const queryClient = useQueryDevtoolsContext().client
+  queryClient.getQueryCache().notify({
+    query,
+    type: 'updated',
+    action: {
+      type: DevtoolsActions[actionType],
+    },
+  })
+}
+
 const stylesFactory = (
   theme: 'light' | 'dark',
   css: (typeof goober)['css'],

From 16b0e7d289ea73d122d24fb3c3274c69ab08fa2f Mon Sep 17 00:00:00 2001
From: lovesworking <austinlovesworking@gmail.com>
Date: Sun, 23 Mar 2025 11:14:42 -0600
Subject: [PATCH 3/8] cleanup commeny

---
 packages/query-devtools/src/Devtools.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/query-devtools/src/Devtools.tsx b/packages/query-devtools/src/Devtools.tsx
index 10bba3fd86..0f6b49120a 100644
--- a/packages/query-devtools/src/Devtools.tsx
+++ b/packages/query-devtools/src/Devtools.tsx
@@ -1772,7 +1772,7 @@ const QueryDetails = () => {
     const promise = activeQuery()?.fetch()
     promise?.catch(() => {})
   }
-  // trigger error
+
   const triggerError = (errorType?: DevtoolsErrorType) => {
     const activeQueryVal = activeQuery()
     if (!activeQueryVal) return

From 10074bf8c12161b59b35ff5cac9719557426a73a Mon Sep 17 00:00:00 2001
From: lovesworking <austinlovesworking@gmail.com>
Date: Sun, 23 Mar 2025 11:47:16 -0600
Subject: [PATCH 4/8] fix(devtools): update notifyDevtools to use queryClient
 for all action notifications

---
 packages/query-devtools/src/Devtools.tsx | 23 ++++++++++++-----------
 1 file changed, 12 insertions(+), 11 deletions(-)

diff --git a/packages/query-devtools/src/Devtools.tsx b/packages/query-devtools/src/Devtools.tsx
index 0f6b49120a..60086e3659 100644
--- a/packages/query-devtools/src/Devtools.tsx
+++ b/packages/query-devtools/src/Devtools.tsx
@@ -76,6 +76,7 @@ import type {
   Query,
   QueryCache,
   QueryCacheNotifyEvent,
+  QueryClient,
   QueryState,
 } from '@tanstack/query-core'
 import type { StorageObject, StorageSetter } from '@solid-primitives/storage'
@@ -1768,7 +1769,7 @@ const QueryDetails = () => {
   const color = createMemo(() => getQueryStatusColorByLabel(statusLabel()))
 
   const handleRefetch = () => {
-    notifyDevtools(activeQuery(), 'REFETCH')
+    notifyDevtools(queryClient, activeQuery(), 'REFETCH')
     const promise = activeQuery()?.fetch()
     promise?.catch(() => {})
   }
@@ -1776,7 +1777,7 @@ const QueryDetails = () => {
   const triggerError = (errorType?: DevtoolsErrorType) => {
     const activeQueryVal = activeQuery()
     if (!activeQueryVal) return
-    notifyDevtools(activeQueryVal, 'TRIGGER_ERROR')
+    notifyDevtools(queryClient, activeQueryVal, 'TRIGGER_ERROR')
     const error =
       errorType?.initializer(activeQueryVal) ??
       new Error('Unknown error from devtools')
@@ -1795,7 +1796,7 @@ const QueryDetails = () => {
   }
 
   const restoreQueryAfterLoadingOrError = () => {
-    notifyDevtools(activeQuery(), 'RESTORE_LOADING')
+    notifyDevtools(queryClient, activeQuery(), 'RESTORE_LOADING')
     const activeQueryVal = activeQuery()!
     const previousState = activeQueryVal.state
     const previousOptions = activeQueryVal.state.fetchMeta
@@ -1906,7 +1907,7 @@ const QueryDetails = () => {
               'tsqd-query-details-action-invalidate',
             )}
             onClick={() => {
-              notifyDevtools(activeQuery(), 'INVALIDATE')
+              notifyDevtools(queryClient, activeQuery(), 'INVALIDATE')
               queryClient.invalidateQueries(activeQuery())
             }}
             disabled={queryStatus() === 'pending'}
@@ -1927,7 +1928,7 @@ const QueryDetails = () => {
               'tsqd-query-details-action-reset',
             )}
             onClick={() => {
-              notifyDevtools(activeQuery(), 'RESET')
+              notifyDevtools(queryClient, activeQuery(), 'RESET')
               queryClient.resetQueries(activeQuery())
             }}
             disabled={queryStatus() === 'pending'}
@@ -1948,7 +1949,7 @@ const QueryDetails = () => {
               'tsqd-query-details-action-remove',
             )}
             onClick={() => {
-              notifyDevtools(activeQuery(), 'REMOVE')
+              notifyDevtools(queryClient, activeQuery(), 'REMOVE')
               queryClient.removeQueries(activeQuery())
               setSelectedQueryHash(null)
             }}
@@ -1972,11 +1973,11 @@ const QueryDetails = () => {
             disabled={restoringLoading()}
             onClick={() => {
               if (activeQuery()?.state.data === undefined) {
-                notifyDevtools(activeQuery(), 'RESTORE_LOADING')
+                notifyDevtools(queryClient, activeQuery(), 'RESTORE_LOADING')
                 setRestoringLoading(true)
                 restoreQueryAfterLoadingOrError()
               } else {
-                notifyDevtools(activeQuery(), 'TRIGGER_LOADING')
+                notifyDevtools(queryClient, activeQuery(), 'TRIGGER_LOADING')
                 const activeQueryVal = activeQuery()
                 if (!activeQueryVal) return
                 const __previousQueryOptions = activeQueryVal.options
@@ -2021,7 +2022,7 @@ const QueryDetails = () => {
                 if (!activeQuery()!.state.error) {
                   triggerError()
                 } else {
-                  notifyDevtools(activeQuery(), 'RESTORE_ERROR')
+                  notifyDevtools(queryClient, activeQuery(), 'RESTORE_ERROR')
                   queryClient.resetQueries(activeQuery())
                 }
               }}
@@ -2466,11 +2467,11 @@ const DevtoolsActions = {
 } as const
 
 const notifyDevtools = (
+  queryClient: QueryClient,
   query: Query | undefined,
   actionType: keyof typeof DevtoolsActions,
 ) => {
-  if (!query) return
-  const queryClient = useQueryDevtoolsContext().client
+  if (!queryClient || !query) return
   queryClient.getQueryCache().notify({
     query,
     type: 'updated',

From 33cabd49d40d7c296890eff94fdcdf0fc5d087ce Mon Sep 17 00:00:00 2001
From: lovesworking <austinlovesworking@gmail.com>
Date: Sun, 23 Mar 2025 13:53:05 -0600
Subject: [PATCH 5/8] remove dup call

---
 packages/query-devtools/src/Devtools.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/query-devtools/src/Devtools.tsx b/packages/query-devtools/src/Devtools.tsx
index 60086e3659..8223a57977 100644
--- a/packages/query-devtools/src/Devtools.tsx
+++ b/packages/query-devtools/src/Devtools.tsx
@@ -1973,7 +1973,6 @@ const QueryDetails = () => {
             disabled={restoringLoading()}
             onClick={() => {
               if (activeQuery()?.state.data === undefined) {
-                notifyDevtools(queryClient, activeQuery(), 'RESTORE_LOADING')
                 setRestoringLoading(true)
                 restoreQueryAfterLoadingOrError()
               } else {

From e7150fc0ab2d9975aa008a29c4f9d9b664be17a9 Mon Sep 17 00:00:00 2001
From: lovesworking <austinlovesworking@gmail.com>
Date: Sun, 23 Mar 2025 14:45:59 -0600
Subject: [PATCH 6/8] Fix online manager bug not syncing correctly

---
 packages/query-devtools/src/Devtools.tsx | 20 +++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/packages/query-devtools/src/Devtools.tsx b/packages/query-devtools/src/Devtools.tsx
index 8223a57977..0f2c232a75 100644
--- a/packages/query-devtools/src/Devtools.tsx
+++ b/packages/query-devtools/src/Devtools.tsx
@@ -121,6 +121,18 @@ export const Devtools: Component<DevtoolsPanelProps> = (props) => {
   const styles = createMemo(() => {
     return theme() === 'dark' ? darkStyles(css) : lightStyles(css)
   })
+  const onlineManager = createMemo(
+    () => useQueryDevtoolsContext().onlineManager,
+  )
+  onMount(() => {
+    const unsubscribe = onlineManager().subscribe((online) => {
+      setOffline(!online)
+    })
+
+    onCleanup(() => {
+      unsubscribe()
+    })
+  })
 
   const pip = usePiPWindow()
 
@@ -940,13 +952,7 @@ export const ContentView: Component<ContentViewProps> = (props) => {
             </button>
             <button
               onClick={() => {
-                if (offline()) {
-                  onlineManager().setOnline(true)
-                  setOffline(false)
-                } else {
-                  onlineManager().setOnline(false)
-                  setOffline(true)
-                }
+                onlineManager().setOnline(!onlineManager().isOnline())
               }}
               class={cx(
                 styles().actionsBtn,

From 2ec65f348ac2145aa726f39ac39d36c6a2c02800 Mon Sep 17 00:00:00 2001
From: lovesworking <austinlovesworking@gmail.com>
Date: Mon, 24 Mar 2025 08:23:42 -0600
Subject: [PATCH 7/8] Update docs

---
 docs/framework/react/devtools.md     |  4 +---
 docs/framework/react/react-native.md | 15 ++++++++++-----
 2 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/docs/framework/react/devtools.md b/docs/framework/react/devtools.md
index d836367cd0..1c7d0b7466 100644
--- a/docs/framework/react/devtools.md
+++ b/docs/framework/react/devtools.md
@@ -7,9 +7,7 @@ Wave your hands in the air and shout hooray because React Query comes with dedic
 
 When you begin your React Query journey, you'll want these devtools by your side. They help visualize all the inner workings of React Query and will likely save you hours of debugging if you find yourself in a pinch!
 
-> Please note that for now, the devtools **do not support React Native**. If you would like to help us make the devtools platform-agnostic, please let us know!
-
-> Exciting News: We now have a separate package for React Native React Query DevTools! This new addition brings native support, allowing you to integrate DevTools directly into your React Native projects. Check it out and contribute here: [react-native-react-query-devtools](https://github.com/LovesWorking/react-native-react-query-devtools)
+> For React Native users: We now have an Expo plugin for React Query DevTools! This brings native support, allowing you to integrate DevTools directly into your React Native projects. Check it out here: [tanstack-query-dev-tools-expo-plugin](https://github.com/LovesWorking/tanstack-query-dev-tools-expo-plugin)
 
 > An external tool is also available that enables the use of React Query DevTools via an external dashboard. Find out more and contribute on [react-query-external-sync](https://github.com/LovesWorking/react-query-external-sync)
 
diff --git a/docs/framework/react/react-native.md b/docs/framework/react/react-native.md
index b920ea54df..4eb5d253fa 100644
--- a/docs/framework/react/react-native.md
+++ b/docs/framework/react/react-native.md
@@ -3,15 +3,20 @@ id: react-native
 title: React Native
 ---
 
-React Query is designed to work out of the box with React Native, with the exception of the devtools, which are only supported with React DOM at this time.
+React Query is designed to work out of the box with React Native.
 
-There is a 3rd party [Expo](https://docs.expo.dev/) plugin which you can try: https://github.com/expo/dev-plugins/tree/main/packages/react-query
+## DevTools Support
 
-There is a 3rd party [Flipper](https://fbflipper.com/docs/getting-started/react-native/) plugin which you can try: https://github.com/bgaleotti/react-query-native-devtools
+There are several options available for React Native DevTools integration:
 
-There is a 3rd party [Reactotron](https://github.com/infinitered/reactotron/) plugin which you can try: https://github.com/hsndmr/reactotron-react-query
+1. **Expo Plugin**: A 3rd party plugin for Expo. This is the recommended way to use React Query DevTools in React Native:
+   https://github.com/LovesWorking/tanstack-query-dev-tools-expo-plugin
 
-If you would like to help us make the built-in devtools platform agnostic, please let us know!
+2. **Flipper Plugin**: A 3rd party plugin for Flipper users:
+   https://github.com/bgaleotti/react-query-native-devtools
+
+3. **Reactotron Plugin**: A 3rd party plugin for Reactotron users:
+   https://github.com/hsndmr/reactotron-react-query
 
 ## Online status management
 

From 874bb10c33d03bce45f991daee177d75bfdeb6f5 Mon Sep 17 00:00:00 2001
From: lovesworking <austinlovesworking@gmail.com>
Date: Sun, 30 Mar 2025 12:47:57 -0600
Subject: [PATCH 8/8] Fix default case error due to additional events from dev
 tools.

---
 packages/query-core/src/query.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/query-core/src/query.ts b/packages/query-core/src/query.ts
index 3351108eb7..0a310fb101 100644
--- a/packages/query-core/src/query.ts
+++ b/packages/query-core/src/query.ts
@@ -655,6 +655,8 @@ export class Query<
             ...state,
             ...action.state,
           }
+        default:
+          return state
       }
     }