RemoteDebugger component

Author: josydeleon

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

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import { QueryDevtoolProps } from '../../types';
+
+import useRemoteDevtool from '../../hooks/useRemoteDevtool';
+
+const RemoteDebugger: React.FC<QueryDevtoolProps> = ({
+  queryClient,
+  version,
+}) => {
+  useRemoteDevtool({ queryClient, version });
+
+  return null;
+};
+
+export default RemoteDebugger;

…ery-devtool/src/hooks/useQueryDevtool.ts …ry-devtool/src/hooks/useRemoteDevtool.tspackages/react-native-query-devtool/src/hooks/useQueryDevtool.ts renamed to packages/react-native-query-devtool/src/hooks/useRemoteDevtool.ts packages/react-native-query-devtool/src/hooks/useQueryDevtool.ts renamed to packages/react-native-query-devtool/src/hooks/useRemoteDevtool.ts

@@ -1,21 +1,23 @@
-import { useEffect, useRef, useState } from "react";
-import { Platform } from "react-native";
-import { isDevMode } from "../utils/isDevMode";
-import debounce from "../utils/debounce";
-import {
-  getQueryDevtoolData,
-  handleQueryDevtoolData,
-} from "../utils/queryListener";
+import { useEffect, useRef, useState } from 'react';
+
+import { Platform } from 'react-native';
+
 import {
   ListenerEventType,
   QueryDevtoolData,
   QueryDevtoolProps,
-} from "../types";
+} from '../types';
+import debounce from '../utils/debounce';
+import { isDevMode } from '../utils/isDevMode';
+import {
+  getQueryDevtoolData,
+  handleQueryDevtoolData,
+} from '../utils/queryListener';
 
 const PORT = 9017;
 
-const useQueryDevtool = (props: QueryDevtoolProps) => {
-  const { queryClient, version } = props;
+const useRemoteDevtool = (props: QueryDevtoolProps) => {
+  const { queryClient, version = 'v5' } = props;
 
   const websocket = useRef<WebSocket>();
   const timeoutRef = useRef<NodeJS.Timeout>();
@@ -36,15 +38,15 @@ const useQueryDevtool = (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()
@@ -114,7 +116,7 @@ const useQueryDevtool = (props: QueryDevtoolProps) => {
         subscribe();
       }
     };
-  }, [connected, queryClient]);
+  }, [connected, queryClient, version]);
 };
 
-export default useQueryDevtool;
+export default useRemoteDevtool;

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

@@ -1,14 +1,20 @@
 import React from "react";
-import useQueryDevtool from "./hooks/useQueryDevtool";
+
+import RemoteDebugger from "./components/RemoteDebugger";
 import { QueryDevtoolProps } from "./types";
 
 const QueryNativeDevtool: React.FC<QueryDevtoolProps> = ({
   queryClient,
   version = "v5",
+  useRemoteDebugger = false,
 }) => {
-  useQueryDevtool({ queryClient, version });
-
-  return null;
+  return (
+    <>
+      {useRemoteDebugger && (
+        <RemoteDebugger queryClient={queryClient} version={version} />
+      )}
+    </>
+  );
 };
 
 export { QueryNativeDevtool };

packages/react-native-query-devtool/src/types/index.ts

@@ -1,10 +1,12 @@
-export type ReactQueryVersion = "v3" | "v4" | "v5";
+export type ReactQueryVersion = 'v3' | 'v4' | 'v5';
 
-export type QueryKey = string | string[] | unknown;
+export type QueryKey = string | string[];
 
 export type QueryDevtoolProps = {
   queryClient: any;
   version?: ReactQueryVersion;
+  useRemoteDebugger?: boolean;
+  hideFloatingButton?: boolean;
 };
 
 export type QueryDevtoolData = {
@@ -18,19 +20,19 @@ export type QueryDevtoolData = {
 };
 
 export type ListenerV3 =
-  | "queryAdded"
-  | "queryUpdated"
-  | "queryRemoved"
-  | "observerAdded"
-  | "observerRemoved"
-  | "observerResultsUpdated";
+  | 'queryAdded'
+  | 'queryUpdated'
+  | 'queryRemoved'
+  | 'observerAdded'
+  | 'observerRemoved'
+  | 'observerResultsUpdated';
 
 export type ListenerV4 =
-  | "added"
-  | "updated"
-  | "removed"
-  | "observerAdded"
-  | "observerRemoved"
-  | "observerResultsUpdated";
+  | 'added'
+  | 'updated'
+  | 'removed'
+  | 'observerAdded'
+  | 'observerRemoved'
+  | 'observerResultsUpdated';
 
 export type ListenerEventType = ListenerV3 | ListenerV4;

packages/react-native-query-devtool/src/utils/queryListener.ts

@@ -2,7 +2,7 @@ import {
   ListenerEventType,
   QueryDevtoolData,
   ReactQueryVersion,
-} from "../types";
+} from '../types';
 
 export const getQueryDevtoolData = (
   version: ReactQueryVersion,
@@ -13,9 +13,9 @@ export const getQueryDevtoolData = (
   const isStale = query.isStale();
   const isActive = query.isActive() && query.getObserversCount() > 0;
   const isFetching =
-    version === "v3"
+    version === 'v3'
       ? query.isFetching()
-      : query.state.fetchStatus === "fetching";
+      : query.state.fetchStatus === 'fetching';
 
   return {
     queryKey: query.queryKey,
@@ -36,10 +36,10 @@ export const handleQueryDevtoolData = (
   queryDevtoolDataArray: QueryDevtoolData[]
 ) => {
   switch (listenerType) {
-    case "queryAdded":
-    case "queryUpdated":
-    case "added":
-    case "updated":
+    case 'queryAdded':
+    case 'queryUpdated':
+    case 'added':
+    case 'updated':
       const queryData = query.state.data;
       if (queryData) {
         return updateQueryDevtoolDataArray(
@@ -50,16 +50,16 @@ export const handleQueryDevtoolData = (
         );
       }
       break;
-    case "observerAdded":
-    case "observerRemoved":
-    case "observerResultsUpdated":
+    case 'observerAdded':
+    case 'observerRemoved':
+    case 'observerResultsUpdated':
       if (queryKeyIndex !== -1) {
         queryDevtoolDataArray[queryKeyIndex].observers =
           query.getObserversCount();
       }
       break;
-    case "queryRemoved":
-    case "removed":
+    case 'queryRemoved':
+    case 'removed':
       if (queryKeyIndex !== -1) {
         queryDevtoolDataArray.splice(queryKeyIndex, 1);
       }