More control over GraphQL introspection

src-web/components/GraphQLEditor.tsx

@@ -2,12 +2,15 @@ import type { HttpRequest } from '@yaakapp-internal/models';
 import { updateSchema } from 'cm6-graphql';
 import type { EditorView } from 'codemirror';
 import { useEffect, useMemo, useRef, useState } from 'react';
+import { useLocalStorage } from 'react-use';
 import { useIntrospectGraphQL } from '../hooks/useIntrospectGraphQL';
 import { tryFormatJson } from '../lib/formatters';
 import { Button } from './core/Button';
+import { Dropdown } from './core/Dropdown';
 import type { EditorProps } from './core/Editor';
 import { Editor, formatGraphQL } from './core/Editor';
 import { FormattedError } from './core/FormattedError';
+import { Icon } from './core/Icon';
 import { Separator } from './core/Separator';
 import { useDialog } from './DialogContext';
 
@@ -19,18 +22,25 @@ type Props = Pick<EditorProps, 'heightMode' | 'className' | 'forceUpdateKey'> &
 
 export function GraphQLEditor({ body, onChange, baseRequest, ...extraEditorProps }: Props) {
   const editorViewRef = useRef<EditorView>(null);
-  const { schema, isLoading, error, refetch } = useIntrospectGraphQL(baseRequest);
+  const [autoIntrospectDisabled, setAutoIntrospectDisabled] = useLocalStorage<
-  const [currentBody, setCurrentBody] = useState<{ query: string; variables: string | undefined }>(() => {
+    Record<string, boolean>
-    // Migrate text bodies to GraphQL format
+  >('graphQLAutoIntrospectDisabled', {});
-    // NOTE: This is how GraphQL used to be stored
+  const { schema, isLoading, error, refetch, clear } = useIntrospectGraphQL(baseRequest, {
-    if ('text' in body) {
+    disabled: autoIntrospectDisabled?.[baseRequest.id],
-      const b = tryParseJson(body.text, {});
-      const variables = JSON.stringify(b.variables || undefined, null, 2);
-      return { query: b.query ?? '', variables };
-    }
-
-    return { query: body.query ?? '', variables: body.variables ?? '' };
   });
+  const [currentBody, setCurrentBody] = useState<{ query: string; variables: string | undefined }>(
+    () => {
+      // Migrate text bodies to GraphQL format
+      // NOTE: This is how GraphQL used to be stored
+      if ('text' in body) {
+        const b = tryParseJson(body.text, {});
+        const variables = JSON.stringify(b.variables || undefined, null, 2);
+        return { query: b.query ?? '', variables };
+      }
+
+      return { query: body.query ?? '', variables: body.variables ?? '' };
+    },
+  );
 
   const handleChangeQuery = (query: string) => {
     const newBody = { query, variables: currentBody.variables || undefined };
@@ -52,52 +62,109 @@ export function GraphQLEditor({ body, onChange, baseRequest, ...extraEditorProps
 
   const dialog = useDialog();
 
-  const actions = useMemo<EditorProps['actions']>(() => {
+  const actions = useMemo<EditorProps['actions']>(
-    const isValid = error || isLoading;
+    () => [
-    if (!isValid) {
-      return [];
-    }
-
-    const actions: EditorProps['actions'] = [
       <div key="introspection" className="!opacity-100">
-        <Button
+        {isLoading ? (
-          key="introspection"
+          <Button size="sm" variant="border" onClick={refetch} isLoading>
-          size="xs"
+            {isLoading ? 'Introspecting' : 'Schema'}
-          color={error ? 'danger' : 'secondary'}
+          </Button>
-          isLoading={isLoading}
+        ) : !error ? (
-          onClick={() => {
+          <Dropdown
-            dialog.show({
+            items={[
-              title: 'Introspection Failed',
+              {
-              size: 'dynamic',
+                key: 'refresh',
-              id: 'introspection-failed',
+                label: 'Refetch',
-              render: () => (
+                leftSlot: <Icon icon="refresh" />,
-                <>
+                onSelect: refetch,
-                  <FormattedError>{error ?? 'unknown'}</FormattedError>
+              },
-                  <div className="w-full my-4">
+              {
-                    <Button
+                key: 'clear',
-                      onClick={() => {
+                label: 'Clear',
-                        dialog.hide('introspection-failed');
+                onSelect: clear,
-                        refetch();
+                hidden: !schema,
-                      }}
+                variant: 'danger',
-                      className="ml-auto"
+                leftSlot: <Icon icon="trash" />,
-                      color="primary"
+              },
-                      size="sm"
+              {type: 'separator', label: 'Setting'},
-                    >
+              {
-                      Try Again
+                key: 'auto_fetch',
-                    </Button>
+                label: 'Automatic Introspection',
-                  </div>
+                onSelect: () => {
-                </>
+                  setAutoIntrospectDisabled({
-              ),
+                    ...autoIntrospectDisabled,
-            });
+                    [baseRequest.id]: !autoIntrospectDisabled?.[baseRequest.id],
-          }}
+                  });
-        >
+                },
-          {error ? 'Introspection Failed' : 'Introspecting'}
+                leftSlot: (
-        </Button>
+                  <Icon
+                    icon={
+                      autoIntrospectDisabled?.[baseRequest.id]
+                        ? 'check_square_unchecked'
+                        : 'check_square_checked'
+                    }
+                  />
+                ),
+              },
+            ]}
+          >
+            <Button
+              size="sm"
+              variant="border"
+              title="Refetch Schema"
+              color={schema ? 'default' : 'warning'}
+            >
+              {schema ? 'Schema' : 'No Schema'}
+            </Button>
+          </Dropdown>
+        ) : (
+          <Button
+            size="sm"
+            color="danger"
+            isLoading={isLoading}
+            onClick={() => {
+              dialog.show({
+                title: 'Introspection Failed',
+                size: 'dynamic',
+                id: 'introspection-failed',
+                render: ({ hide }) => (
+                  <>
+                    <FormattedError>{error ?? 'unknown'}</FormattedError>
+                    <div className="w-full my-4">
+                      <Button
+                        onClick={async () => {
+                          hide();
+                          await refetch();
+                        }}
+                        className="ml-auto"
+                        color="primary"
+                        size="sm"
+                      >
+                        Try Again
+                      </Button>
+                    </div>
+                  </>
+                ),
+              });
+            }}
+          >
+            Introspection Failed
+          </Button>
+        )}
       </div>,
-    ];
+    ],
-
+    [
-    return actions;
+      isLoading,
-  }, [dialog, error, isLoading, refetch]);
+      refetch,
+      error,
+      autoIntrospectDisabled,
+      baseRequest.id,
+      clear,
+      schema,
+      setAutoIntrospectDisabled,
+      dialog,
+    ],
+  );
 
   return (
     <div className="h-full w-full grid grid-cols-1 grid-rows-[minmax(0,100%)_auto]">

src-web/components/core/Icon.tsx

@@ -22,6 +22,8 @@ const icons = {
   cake: lucide.CakeIcon,
   chat: lucide.MessageSquare,
   check: lucide.CheckIcon,
+  check_square_checked: lucide.SquareCheckIcon,
+  check_square_unchecked: lucide.SquareIcon,
   check_circle: lucide.CheckCircleIcon,
   chevron_down: lucide.ChevronDownIcon,
   chevron_right: lucide.ChevronRightIcon,
@@ -56,6 +58,7 @@ const icons = {
   left_panel_visible: lucide.PanelLeftCloseIcon,
   magic_wand: lucide.Wand2Icon,
   minus: lucide.MinusIcon,
+  minus_circle: lucide.MinusCircleIcon,
   moon: lucide.MoonIcon,
   more_vertical: lucide.MoreVerticalIcon,
   paste: lucide.ClipboardPasteIcon,

src-web/hooks/useIntrospectGraphQL.ts

@@ -14,12 +14,14 @@ const introspectionRequestBody = JSON.stringify({
   operationName: 'IntrospectionQuery',
 });
 
-export function useIntrospectGraphQL(baseRequest: HttpRequest) {
+export function useIntrospectGraphQL(
+  baseRequest: HttpRequest,
+  options: { disabled?: boolean } = {},
+) {
   // Debounce the request because it can change rapidly and we don't
   // want to send so too many requests.
   const request = useDebouncedValue(baseRequest);
   const [activeEnvironment] = useActiveEnvironment();
-  const [refetchKey, setRefetchKey] = useState<number>(0);
   const [isLoading, setIsLoading] = useState<boolean>(false);
   const [error, setError] = useState<string>();
 
@@ -29,10 +31,11 @@ export function useIntrospectGraphQL(baseRequest: HttpRequest) {
     namespace: 'global',
   });
 
-  useEffect(() => {
+  const refetch = useCallback(async () => {
-    const fetchIntrospection = async () => {
+    try {
       setIsLoading(true);
       setError(undefined);
+
       const args = {
         ...baseRequest,
         bodyType: 'application/json',
@@ -44,33 +47,42 @@ export function useIntrospectGraphQL(baseRequest: HttpRequest) {
       );
 
       if (response.error) {
-        throw new Error(response.error);
+        return setError(response.error);
       }
 
       const bodyText = await getResponseBodyText(response);
       if (response.status < 200 || response.status >= 300) {
-        throw new Error(`Request failed with status ${response.status}.\n\n${bodyText}`);
+        return setError(`Request failed with status ${response.status}.\n\n${bodyText}`);
       }
 
       if (bodyText === null) {
-        throw new Error('Empty body returned in response');
+        return setError('Empty body returned in response');
       }
 
       const { data } = JSON.parse(bodyText);
       console.log(`Got introspection response for ${baseRequest.url}`, data);
       await setIntrospection(data);
-    };
+    } catch (err) {
+      setError(String(err));
+    } finally {
+      setIsLoading(false);
+    }
+  }, [activeEnvironment?.id, baseRequest, setIntrospection]);
 
-    fetchIntrospection()
+  useEffect(() => {
-      .catch((e) => setError(e.message))
+    // Skip introspection if automatic is disabled and we already have one
-      .finally(() => setIsLoading(false));
+    if (options.disabled) {
+      return;
+    }
+
+    refetch().catch(console.error);
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [request.id, request.url, request.method, refetchKey, activeEnvironment?.id]);
+  }, [request.id, request.url, request.method, activeEnvironment?.id]);
 
-  const refetch = useCallback(() => {
+  const clear = useCallback(async () => {
-    setRefetchKey((k) => k + 1);
+    await setIntrospection(null);
-  }, []);
+  }, [setIntrospection]);
 
   const schema = useMemo(() => {
     try {
@@ -81,5 +93,5 @@ export function useIntrospectGraphQL(baseRequest: HttpRequest) {
     }
   }, [introspection]);
 
-  return { schema, isLoading, error, refetch };
+  return { schema, isLoading, error, refetch, clear };
 }