Add support for inspecting iframes

src/application/App.tsx

@@ -1,11 +1,13 @@
 import React, { useEffect, useState } from "react";
 import { useReactiveVar, gql, useQuery, makeVar } from "@apollo/client";
 
-import { currentScreen, Screens } from "./components/Layouts/Navigation";
+import { currentScreen } from "./components/Layouts/Navigation";
+import { Screens } from "./components/Layouts/screens";
 import { Queries } from "./components/Queries/Queries";
 import { Mutations } from "./components/Mutations/Mutations";
 import { Explorer } from "./components/Explorer/Explorer";
 import { Cache } from "./components/Cache/Cache";
+import { clients, currentClient } from ".";
 
 export const reloadStatus = makeVar<boolean>(false);
 
@@ -16,19 +18,35 @@ const screens = {
   [Screens.Cache]: Cache,
 };
 
-const GET_OPERATION_COUNTS = gql`
-  query GetOperationCounts {
-    watchedQueries @client {
-      count
-    }
-    mutationLog @client {
-      count
+export const GET_OPERATION_COUNTS = gql`
+  query GetOperationCounts($clientId: ID!) {
+    client(id: $id) @client {
+      watchedQueries {
+        queries {
+          id
+        }
+        count
+      }
+      mutationLog {
+        count
+      }
     }
   }
 `;
 
 export const App = (): JSX.Element => {
-  const { data } = useQuery(GET_OPERATION_COUNTS);
+  const selectedClient = useReactiveVar(currentClient)
+  const allClients = useReactiveVar(clients);
+
+  if (allClients.length > 0 && !selectedClient) {
+    currentClient(allClients[0])
+  }
+
+  const { data } = useQuery(GET_OPERATION_COUNTS, {
+    variables: {
+      id: selectedClient
+    },
+  });
   const selected = useReactiveVar<Screens>(currentScreen);
   const reloading = useReactiveVar<boolean>(reloadStatus);
   const [embeddedExplorerIFrame, setEmbeddedExplorerIFrame] = useState<HTMLIFrameElement | null>(null);
@@ -52,8 +70,8 @@ export const App = (): JSX.Element => {
         <Screen
           isVisible={undefined}
           navigationProps={{
-            queriesCount: data?.watchedQueries?.count,
-            mutationsCount: data?.mutationLog?.count,
+            queriesCount: data?.client?.watchedQueries?.count ?? 0,
+            mutationsCount: data?.client?.mutationLog?.count ?? 0,
           }}
           embeddedExplorerProps={{
             embeddedExplorerIFrame,
@@ -68,8 +86,8 @@ export const App = (): JSX.Element => {
       <Explorer
         isVisible={selected === Screens.Explorer}
         navigationProps={{
-          queriesCount: data?.watchedQueries?.count,
-          mutationsCount: data?.mutationLog?.count,
+          queriesCount: data?.client?.watchedQueries?.count,
+          mutationsCount: data?.client?.mutationLog?.count,
         }}
         embeddedExplorerProps={{
           embeddedExplorerIFrame,
@@ -79,3 +97,4 @@ export const App = (): JSX.Element => {
     </>
   );
 };
+

src/application/__tests__/App.test.tsx

@@ -2,8 +2,9 @@ import React from "react";
 import { waitFor } from "@testing-library/react";
 
 import { renderWithApolloClient } from "../utilities/testing/renderWithApolloClient";
-import { currentScreen, Screens } from "../components/Layouts/Navigation";
+import { currentScreen } from "../components/Layouts/Navigation";
 import { App, reloadStatus } from "../App";
+import { Screens } from "../components/Layouts/screens";
 
 jest.mock("../components/Queries/Queries", () => ({
   Queries: ({ navigationProps }) => (
@@ -37,7 +38,7 @@ describe("<App />", () => {
 
   test("after reload, renders the Queries screen", async () => {
     currentScreen(Screens.Mutations);
-    const { getByText, debug } = renderWithApolloClient(<App />);
+    const { getByText } = renderWithApolloClient(<App />);
     const element = getByText("Mutations (0)");
     expect(element).toBeInTheDocument();
     await waitFor(() => {

src/application/components/Cache/Cache.tsx

@@ -1,6 +1,6 @@
 import { Fragment, useState } from "react";
 import { css } from "@emotion/react";
-import { gql, useQuery } from "@apollo/client";
+import { gql, useQuery, useReactiveVar } from "@apollo/client";
 import { rem } from "polished";
 import { colors } from "@apollo/space-kit/colors";
 
@@ -9,6 +9,7 @@ import { Search } from "./sidebar/Search";
 import { EntityList } from "./sidebar/EntityList";
 import { EntityView } from "./main/EntityView";
 import { Loading } from "./common/Loading";
+import { currentClient } from "../..";
 
 const { Header, Sidebar, Main, Content } = SidebarLayout;
 
@@ -37,8 +38,10 @@ const noDataStyles = css`
 `;
 
 const GET_CACHE = gql`
-  query GetCache {
-    cache @client
+  query GetCache($clientId: ID!) {
+    client(id: $clientId) @client {
+      cache
+    }
   }
 `;
 
@@ -50,12 +53,17 @@ export function Cache({ navigationProps }: {
 }): JSX.Element {
   const [searchResults, setSearchResults] = useState({});
   const [cacheId, setCacheId] = useState<string>("ROOT_QUERY");
+  const selectedClient = useReactiveVar(currentClient);
 
-  const { loading, data } = useQuery(GET_CACHE);
+  const { loading, data } = useQuery(GET_CACHE, {
+    variables: {
+      clientId: selectedClient
+    }
+  });
 
   let parsedData: Record<string, any> = {};
-  if (!loading && data && data.cache) {
-    parsedData = JSON.parse(data.cache);
+  if (!loading && data && data?.client?.cache) {
+    parsedData = JSON.parse(data.client.cache);
   }
 
   const dataExists = parsedData && Object.keys(parsedData).length > 0;

src/application/components/Cache/__tests__/Cache.test.tsx

@@ -3,7 +3,7 @@ import { within, waitFor, fireEvent } from "@testing-library/react";
 
 import { Cache } from "../Cache";
 import { renderWithApolloClient } from "../../../utilities/testing/renderWithApolloClient";
-import { client, writeData } from "../../../index";
+import { client, currentClient, writeData } from "../../../index";
 
 const CACHE_DATA = {
   "Result:1": {
@@ -65,15 +65,20 @@ describe("Cache component tests", () => {
 
   describe("With cache data", () => {
     beforeEach(() => {
-      client.resetStore();
-
+      const clientId = "client-1";
+      currentClient(clientId);
       writeData({
+        id: clientId,
         queries: [],
         mutations: [],
         cache: JSON.stringify(CACHE_DATA),
       });
     });
 
+    afterEach(() => {
+      client.resetStore();
+    });
+
     it("should show list of root cache ids in the sidebar", () => {
       const { getByTestId } = renderWithApolloClient(
         <Cache navigationProps={navigationProps} />
@@ -122,7 +127,10 @@ describe("Cache component tests", () => {
     const selectedMainStyles = "background-color: yellow";
 
     beforeEach(() => {
+      const clientId = "client-1";
+      currentClient(clientId);
       writeData({
+        id: clientId,
         queries: [],
         mutations: [],
         cache: JSON.stringify(CACHE_DATA),

src/application/components/Layouts/Navigation.tsx

@@ -4,13 +4,8 @@ import { css } from "@emotion/react";
 import { rem } from "polished";
 import { colors } from "@apollo/space-kit/colors";
 import { ApolloLogo } from "@apollo/space-kit/icons/ApolloLogo";
-
-export enum Screens {
-  Cache = "cache",
-  Queries = "queries",
-  Mutations = "mutations",
-  Explorer = "explorer",
-}
+import { clients, currentClient } from "../..";
+import { Screens } from "./screens";
 
 type NavButtonProps = {
   children: ReactNode;
@@ -78,6 +73,9 @@ const logoStyles = css`
 
 const borderStyles = css`
   border-right: ${rem(1)} solid var(--whiteTransparent);
+  height: 100%;
+  display: flex;
+  align-items: center;
 `;
 
 const NavButton = ({
@@ -100,8 +98,14 @@ export const Navigation: React.FC<NavigationProps> = ({
   mutationsCount,
 }) => {
   const selected = useReactiveVar<Screens>(currentScreen);
+  const allClients = useReactiveVar(clients)
+  const selectedClient = useReactiveVar(currentClient);
+
   const isSelected = (NavButton: Screens) => selected === NavButton;
   const onNavigate = (screen: Screens) => currentScreen(screen);
+  const handleClientChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    currentClient(event.target.value)
+  }
 
   return (
     <nav css={navigationStyles}>
@@ -149,6 +153,17 @@ export const Navigation: React.FC<NavigationProps> = ({
             Cache
           </NavButton>
         </li>
+        {allClients.length > 1 && (
+          <li>
+            <select value={selectedClient ?? allClients[0]} onChange={handleClientChange}>
+              {allClients.map((client) => (
+                <option value={client} key={client}>
+                  {client}
+                </option>
+              ))}
+            </select>
+          </li>
+        )}
       </ul>
     </nav>
   );

src/application/components/Layouts/screens.ts

@@ -0,0 +1,6 @@
+export enum Screens {
+  Cache = "cache",
+  Queries = "queries",
+  Mutations = "mutations",
+  Explorer = "explorer",
+}

src/application/components/Mutations/Mutations.tsx

@@ -1,5 +1,5 @@
 import { Fragment, useState } from "react";
-import { gql, useQuery } from "@apollo/client";
+import { gql, useQuery, useReactiveVar } from "@apollo/client";
 import { List } from "@apollo/space-kit/List";
 import { ListItem } from "@apollo/space-kit/ListItem";
 
@@ -13,25 +13,30 @@ import {
   listStyles,
 } from "../Queries/Queries";
 import { MutationViewer } from "./MutationViewer";
+import { currentClient } from "../..";
 
 const GET_MUTATIONS = gql`
-  query GetMutations {
-    mutationLog @client {
-      mutations {
-        id
-        name
+  query GetMutations($clientId: ID!) {
+    client(id: $clientId) {
+      mutationLog {
+        mutations {
+          id
+          name
+        }
       }
     }
   }
 `;
 
 const GET_SELECTED_MUTATION = gql`
-  query GetSelectedMutation($id: ID!) {
-    mutation(id: $id) @client {
-      id
-      name
-      mutationString
-      variables
+  query GetSelectedMutation($clientId: ID!, $id: ID!) {
+    client(id: $clientId) {
+      mutation(id: $id) @client {
+        id
+        name
+        mutationString
+        variables
+      }
     }
   }
 `;
@@ -46,14 +51,19 @@ export const Mutations = ({ navigationProps, embeddedExplorerProps }: {
   }
 }): JSX.Element => {
   const [selected, setSelected] = useState<number>(0);
+  const selectedClient = useReactiveVar(currentClient)
   const theme = useTheme();
-  const { data } = useQuery(GET_MUTATIONS);
+  const { data } = useQuery(GET_MUTATIONS, {
+    variables: {
+      clientId: selectedClient
+    }
+  });
   const { data: selectedMutationData } = useQuery(GET_SELECTED_MUTATION, {
-    variables: { id: selected },
+    variables: { clientId: selectedClient, id: selected },
     returnPartialData: true,
   });
 
-  const shouldRender = !!data?.mutationLog?.mutations?.length;
+  const shouldRender = !!data?.client?.mutationLog?.mutations?.length;
 
   return (
     <SidebarLayout navigationProps={navigationProps}>
@@ -66,7 +76,7 @@ export const Mutations = ({ navigationProps, embeddedExplorerProps }: {
           selectedColor={theme.sidebarSelected}
           hoverColor={theme.sidebarHover}
         >
-          {data?.mutationLog?.mutations.map(({ name, id }) => {
+          {data?.client?.mutationLog?.mutations.map(({ name, id }) => {
             return (
               <ListItem
                 key={`${name}-${id}`}
@@ -83,11 +93,11 @@ export const Mutations = ({ navigationProps, embeddedExplorerProps }: {
         <SidebarLayout.Header>
           {shouldRender && (
             <Fragment>
-              <h1 css={h1Styles}>{selectedMutationData?.mutation.name}</h1>
+              <h1 css={h1Styles}>{selectedMutationData?.client?.mutation?.name}</h1>
               <span css={operationNameStyles}>Mutation</span>
               <RunInExplorerButton
-                operation={selectedMutationData?.mutation?.mutationString}
-                variables={selectedMutationData?.mutation?.variables}
+                operation={selectedMutationData?.client?.mutation?.mutationString}
+                variables={selectedMutationData?.client?.mutation?.variables}
                 embeddedExplorerIFrame={embeddedExplorerProps.embeddedExplorerIFrame}
               />
             </Fragment>
@@ -96,8 +106,8 @@ export const Mutations = ({ navigationProps, embeddedExplorerProps }: {
         <SidebarLayout.Main>
           {shouldRender && (
             <MutationViewer
-              mutationString={selectedMutationData?.mutation?.mutationString}
-              variables={selectedMutationData?.mutation?.variables}
+              mutationString={selectedMutationData?.client?.mutation?.mutationString}
+              variables={selectedMutationData?.client?.mutation?.variables}
             />
           )}
         </SidebarLayout.Main>