Use react query to cache myles query

Summary: The call to myles was a little slow and very cachable so use react query. Additionally it depends on VPN / light so added an error state to make that clear.

Reviewed By: lblasa

Differential Revision: D42990344

fbshipit-source-id: 8d6ad20aea79f1972a7cf1f61f8af729e5f3464f

desktop/plugins/public/ui-debugger/components/main.tsx

@@ -24,6 +24,8 @@ import {useKeyboardModifiers} from '../hooks/useKeyboardModifiers';
 import {Inspector} from './sidebar/Inspector';
 import {Controls} from './Controls';
 import {Spin} from 'antd';
+import {QueryClientProvider} from 'react-query';
+
 import {Tree2} from './Tree';
 
 export function Component() {
@@ -45,46 +47,48 @@ export function Component() {
 
   if (rootId) {
     return (
-      <Layout.Container grow padh="small" padv="medium">
-        <Controls />
-        <Layout.Horizontal grow pad="small" gap="small">
-          <Layout.Container grow gap="small">
-            <Layout.ScrollContainer>
-              <Tree2
+      <QueryClientProvider client={instance.queryClient}>
+        <Layout.Container grow padh="small" padv="medium">
+          <Controls />
+          <Layout.Horizontal grow pad="small" gap="small">
+            <Layout.Container grow gap="small">
+              <Layout.ScrollContainer>
+                <Tree2
+                  selectedNode={selectedNode}
+                  onSelectNode={setSelectedNode}
+                  nodes={nodes}
+                  rootId={rootId}
+                />
+              </Layout.ScrollContainer>
+            </Layout.Container>
+
+            <ResizablePanel
+              position="right"
+              minWidth={200}
+              width={visualiserWidth}
+              maxWidth={800}
+              onResize={(width) => {
+                setVisualiserWidth(width);
+              }}
+              gutter>
+              <Visualization2D
+                rootId={rootId}
+                width={visualiserWidth}
+                nodes={nodes}
                 selectedNode={selectedNode}
                 onSelectNode={setSelectedNode}
-                nodes={nodes}
-                rootId={rootId}
+                modifierPressed={ctrlPressed}
               />
-            </Layout.ScrollContainer>
-          </Layout.Container>
-
-          <ResizablePanel
-            position="right"
-            minWidth={200}
-            width={visualiserWidth}
-            maxWidth={800}
-            onResize={(width) => {
-              setVisualiserWidth(width);
-            }}
-            gutter>
-            <Visualization2D
-              rootId={rootId}
-              width={visualiserWidth}
-              nodes={nodes}
-              selectedNode={selectedNode}
-              onSelectNode={setSelectedNode}
-              modifierPressed={ctrlPressed}
-            />
-          </ResizablePanel>
-          <DetailSidebar width={350}>
-            <Inspector
-              metadata={metadata}
-              node={selectedNode ? nodes.get(selectedNode) : undefined}
-            />
-          </DetailSidebar>
-        </Layout.Horizontal>
-      </Layout.Container>
+            </ResizablePanel>
+            <DetailSidebar width={350}>
+              <Inspector
+                metadata={metadata}
+                node={selectedNode ? nodes.get(selectedNode) : undefined}
+              />
+            </DetailSidebar>
+          </Layout.Horizontal>
+        </Layout.Container>
+      </QueryClientProvider>
     );
   }
 

desktop/plugins/public/ui-debugger/index.tsx

@@ -24,6 +24,7 @@ import {
   UINode,
 } from './types';
 import {Draft} from 'immer';
+import {QueryClient, setLogger} from 'react-query';
 
 type SnapshotInfo = {nodeId: Id; base64Image: Snapshot};
 type LiveClientState = {
@@ -166,6 +167,8 @@ export function plugin(client: PluginClient<Events>) {
     }
   });
 
+  const queryClient = new QueryClient({});
+
   return {
     rootId,
     uiState,
@@ -175,6 +178,7 @@ export function plugin(client: PluginClient<Events>) {
     metadata,
     perfEvents,
     setPlayPause,
+    queryClient,
   };
 }
 
@@ -283,3 +287,16 @@ function collapseinActiveChildren(node: UINode, expandedNodes: Draft<Set<Id>>) {
 }
 
 export {Component} from './components/main';
+
+setLogger({
+  log: (...args) => {
+    console.log(...args);
+  },
+  warn: (...args) => {
+    console.warn(...args);
+  },
+  error: (...args) => {
+    //downgrade react query network errors to warning so they dont get sent to scribe
+    console.warn(...args);
+  },
+});

desktop/plugins/public/ui-debugger/package.json

@@ -15,7 +15,8 @@
   "dependencies": {
     "lodash": "^4.17.21",
     "react-color": "^2.19.3",
-    "react-hotkeys-hook": "^3.4.7"
+    "react-hotkeys-hook": "^3.4.7",
+    "react-query": "^3.39.1"
   },
   "bugs": {
     "url": "https://github.com/facebook/flipper/issues"