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
 
diff --git a/packages/query-core/src/query.ts b/packages/query-core/src/query.ts
index e6ad4ca4ee..0a310fb101 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
@@ -615,6 +655,8 @@ export class Query<
             ...state,
             ...action.state,
           }
+        default:
+          return state
       }
     }
 
diff --git a/packages/query-devtools/src/Devtools.tsx b/packages/query-devtools/src/Devtools.tsx
index 962497275c..ed15b021c2 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'
@@ -120,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()
 
@@ -939,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,
@@ -1768,28 +1775,34 @@ const QueryDetails = () => {
   const color = createMemo(() => getQueryStatusColorByLabel(statusLabel()))
 
   const handleRefetch = () => {
+    notifyDevtools(queryClient, activeQuery(), 'REFETCH')
     const promise = activeQuery()?.fetch()
     promise?.catch(() => {})
   }
 
   const triggerError = (errorType?: DevtoolsErrorType) => {
+    const activeQueryVal = activeQuery()
+    if (!activeQueryVal) return
+    notifyDevtools(queryClient, 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 any,
-    } as QueryState<unknown, Error>)
+      },
+    })
   }
 
   const restoreQueryAfterLoadingOrError = () => {
+    notifyDevtools(queryClient, activeQuery(), 'RESTORE_LOADING')
     const activeQueryVal = activeQuery()!
     const previousState = activeQueryVal.state
     const previousOptions = activeQueryVal.state.fetchMeta
@@ -1899,7 +1912,10 @@ const QueryDetails = () => {
               'tsqd-query-details-actions-btn',
               'tsqd-query-details-action-invalidate',
             )}
-            onClick={() => queryClient.invalidateQueries(activeQuery())}
+            onClick={() => {
+              notifyDevtools(queryClient, activeQuery(), 'INVALIDATE')
+              queryClient.invalidateQueries(activeQuery())
+            }}
             disabled={queryStatus() === 'pending'}
           >
             <span
@@ -1917,7 +1933,10 @@ const QueryDetails = () => {
               'tsqd-query-details-actions-btn',
               'tsqd-query-details-action-reset',
             )}
-            onClick={() => queryClient.resetQueries(activeQuery())}
+            onClick={() => {
+              notifyDevtools(queryClient, activeQuery(), 'RESET')
+              queryClient.resetQueries(activeQuery())
+            }}
             disabled={queryStatus() === 'pending'}
           >
             <span
@@ -1936,6 +1955,7 @@ const QueryDetails = () => {
               'tsqd-query-details-action-remove',
             )}
             onClick={() => {
+              notifyDevtools(queryClient, activeQuery(), 'REMOVE')
               queryClient.removeQueries(activeQuery())
               setSelectedQueryHash(null)
             }}
@@ -1962,6 +1982,7 @@ const QueryDetails = () => {
                 setRestoringLoading(true)
                 restoreQueryAfterLoadingOrError()
               } else {
+                notifyDevtools(queryClient, activeQuery(), 'TRIGGER_LOADING')
                 const activeQueryVal = activeQuery()
                 if (!activeQueryVal) return
                 const __previousQueryOptions = activeQueryVal.options
@@ -1981,8 +2002,8 @@ const QueryDetails = () => {
                   fetchMeta: {
                     ...activeQueryVal.state.fetchMeta,
                     __previousQueryOptions,
-                  } as any,
-                } as QueryState<unknown, Error>)
+                  },
+                } as unknown as QueryState<unknown, Error>)
               }
             }}
           >
@@ -2006,6 +2027,7 @@ const QueryDetails = () => {
                 if (!activeQuery()!.state.error) {
                   triggerError()
                 } else {
+                  notifyDevtools(queryClient, activeQuery(), 'RESTORE_ERROR')
                   queryClient.resetQueries(activeQuery())
                 }
               }}
@@ -2438,6 +2460,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 = (
+  queryClient: QueryClient,
+  query: Query | undefined,
+  actionType: keyof typeof DevtoolsActions,
+) => {
+  if (!queryClient || !query) return
+  queryClient.getQueryCache().notify({
+    query,
+    type: 'updated',
+    action: {
+      type: DevtoolsActions[actionType],
+    },
+  })
+}
+
 const stylesFactory = (
   theme: 'light' | 'dark',
   css: (typeof goober)['css'],