Show response headers

src-web/hooks/useDebouncedSetState.ts

@@ -2,7 +2,7 @@ import type { Dispatch, SetStateAction } from 'react';
 import { useMemo, useState } from 'react';
 import { debounce } from '../lib/debounce';
 
-export function useDebouncedSetState<T extends string | number>(
+export function useDebouncedSetState<T>(
   defaultValue: T,
   delay?: number,
 ): [T, Dispatch<SetStateAction<T>>] {

src-web/hooks/useDebouncedValue.ts

@@ -1,7 +1,7 @@
 import { useEffect } from 'react';
 import { useDebouncedSetState } from './useDebouncedSetState';
 
-export function useDebouncedValue<T extends string | number>(value: T, delay?: number) {
+export function useDebouncedValue<T>(value: T, delay?: number) {
   const [state, setState] = useDebouncedSetState<T>(value, delay);
   useEffect(() => setState(value), [setState, value]);
   return state;

src-web/hooks/useIntrospectGraphQL.ts

@@ -1,6 +1,7 @@
 import { useQuery } from '@tanstack/react-query';
 import type { GraphQLSchema } from 'graphql';
 import { buildClientSchema, getIntrospectionQuery } from '../components/core/Editor';
+import { minPromiseMillis } from '../lib/minPromiseMillis';
 import type { HttpRequest } from '../lib/models';
 import { sendEphemeralRequest } from '../lib/sendEphemeralRequest';
 import { useDebouncedValue } from './useDebouncedValue';
@@ -13,23 +14,27 @@ const introspectionRequestBody = JSON.stringify({
 export function useIntrospectGraphQL(baseRequest: HttpRequest) {
   // Debounce the URL because it can change rapidly, and we don't
   // want to send so many requests.
-  const debouncedUrl = useDebouncedValue(baseRequest.url);
+  const request = useDebouncedValue(baseRequest);
 
   return useQuery<GraphQLSchema, Error>({
-    queryKey: ['introspectGraphQL', { url: debouncedUrl }],
-    refetchOnWindowFocus: true,
-    // staleTime: 1000 * 60 * 60, // 1 hour
+    queryKey: ['introspectGraphQL', { url: request.url, method: request.method }],
     refetchInterval: 1000 * 60, // Refetch every minute
     queryFn: async () => {
-      const response = await sendEphemeralRequest({
-        ...baseRequest,
-        body: introspectionRequestBody,
-      });
+      const response = await minPromiseMillis(
+        sendEphemeralRequest({ ...baseRequest, body: introspectionRequestBody }),
+        700,
+      );
 
       if (response.error) {
         return Promise.reject(new Error(response.error));
       }
 
+      if (response.status < 200 || response.status >= 300) {
+        return Promise.reject(
+          new Error(`Request failed with status ${response.status}.\n\n${response.body}`),
+        );
+      }
+
       const { data } = JSON.parse(response.body);
       return buildClientSchema(data);
     },