Fix INVALID_NETWORK_ERR

Author: josydeleon

packages/react-native-query-devtool/src/components/Devtool/index.tsx

@@ -25,11 +25,7 @@ const Devtool: React.FC<QueryDevtoolProps> = (props) => {
 
   const renderHeader = () => (
     <View style={styles.searchbarContainer}>
-      <Searchbar
-        filter={filter}
-        setFilter={setFilter}
-        placeholder={`${filteredQueries.length} Queries`}
-      />
+      <Searchbar filter={filter} setFilter={setFilter} />
     </View>
   );
 

packages/react-native-query-devtool/src/components/Searchbar/index.tsx

@@ -17,7 +17,8 @@ const Searchbar: React.FC<SearchbarProps> = ({
       onChangeText={setFilter}
       autoCapitalize="none"
       placeholder={placeholder}
-      placeholderTextColor="black"
+      placeholderTextColor="gray"
+      clearButtonMode="while-editing"
     />
   );
 };

packages/react-native-query-devtool/src/hooks/useRemoteDevtool.ts

@@ -1,23 +1,23 @@
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from "react";
 
-import { Platform } from 'react-native';
+import { Platform } from "react-native";
 
 import {
   ListenerEventType,
   QueryDevtoolData,
   QueryDevtoolProps,
-} from '../types';
-import debounce from '../utils/debounce';
-import { isDevMode } from '../utils/isDevMode';
+} from "../types";
+import debounce from "../utils/debounce";
+import { isDevMode } from "../utils/isDevMode";
 import {
   getQueryDevtoolData,
   handleQueryDevtoolData,
-} from '../utils/queryListener';
+} from "../utils/queryListener";
 
 const PORT = 9017;
 
 const useRemoteDevtool = (props: QueryDevtoolProps) => {
-  const { queryClient, version = 'v5' } = props;
+  const { queryClient, version = "v5" } = props;
 
   const websocket = useRef<WebSocket>();
   const timeoutRef = useRef<NodeJS.Timeout>();
@@ -38,15 +38,15 @@ const useRemoteDevtool = (props: QueryDevtoolProps) => {
 
     const createWebSocket = () => {
       websocket.current = new WebSocket(
-        Platform.OS === 'ios'
+        Platform.OS === "ios"
           ? `ws://localhost:${PORT}`
           : `ws://10.0.2.2:${PORT}`
       );
 
       // When connection is established with server, all queries are sent once
       websocket.current.onopen = () => {
         setConnnected(true);
-        console.info('✅ Conected with Native Query Devtool');
+        console.info("✅ Conected with Native Query Devtool");
 
         const allQueries = queryClient
           .getQueryCache()
@@ -73,10 +73,11 @@ const useRemoteDevtool = (props: QueryDevtoolProps) => {
         clearTimeout(timeoutRef.current);
       }
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   useEffect(() => {
+    if (!connected) return;
+
     const debounceProcessAndSendData = debounce(
       (queryData: QueryDevtoolData[]) => sendData(queryData),
       400