Feat/lab settings

packages/libraries/laboratory/package.json

@@ -29,16 +29,19 @@
   "peerDependencies": {
     "@tanstack/react-form": "^1.23.8",
     "date-fns": "^4.1.0",
+    "graphql-sse": "^2.5.3",
     "graphql-ws": "^6.0.6",
     "lucide-react": "^0.548.0",
     "lz-string": "^1.5.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
+    "subscriptions-transport-ws": "^0.11.0",
     "tslib": "^2.8.1",
     "zod": "^4.1.12"
   },
   "dependencies": {
     "@base-ui/react": "^1.1.0",
+    "@graphql-tools/url-loader": "^9.1.0",
     "radix-ui": "^1.4.3",
     "react-zoom-pan-pinch": "^3.7.0",
     "uuid": "^13.0.0"
@@ -98,6 +101,7 @@
     "eslint-plugin-react-refresh": "^0.4.26",
     "globals": "^16.5.0",
     "graphql": "^16.12.0",
+    "graphql-sse": "^2.5.3",
     "graphql-ws": "^6.0.6",
     "lodash": "^4.18.1",
     "lucide-react": "^0.548.0",
@@ -114,6 +118,7 @@
     "react-shadow": "^20.6.0",
     "rollup-plugin-typescript2": "^0.36.0",
     "sonner": "^2.0.7",
+    "subscriptions-transport-ws": "^0.11.0",
     "tailwind-merge": "^3.4.0",
     "tailwindcss": "^4.1.18",
     "tailwindcss-scoped-preflight": "^3.5.7",

packages/libraries/laboratory/src/components/laboratory/laboratory.tsx

@@ -402,7 +402,7 @@ const LaboratoryContent = () => {
                 >
                   Preflight Script
                 </DropdownMenuItem>
-                {/* <DropdownMenuSeparator />
+                <DropdownMenuSeparator />
                 <DropdownMenuItem
                   onSelect={() => {
                     const tab =
@@ -416,7 +416,7 @@ const LaboratoryContent = () => {
                   }}
                 >
                   Settings
-                </DropdownMenuItem> */}
+                </DropdownMenuItem>
               </DropdownMenuContent>
             </DropdownMenu>
             <TooltipContent side="right">Settings</TooltipContent>
@@ -514,7 +514,10 @@ export const Laboratory = (
   const pluginsApi = usePlugins(props);
   const testsApi = useTests(props);
   const tabsApi = useTabs(props);
-  const endpointApi = useEndpoint(props);
+  const endpointApi = useEndpoint({
+    ...props,
+    settingsApi,
+  });
   const collectionsApi = useCollections({
     ...props,
     tabsApi,

packages/libraries/laboratory/src/components/laboratory/operation.tsx

@@ -392,7 +392,7 @@ export const Response = ({ historyItem }: { historyItem?: LaboratoryHistoryReque
         )}
         {historyItem ? (
           <div className="ml-auto flex items-center gap-2">
-            {historyItem?.status && (
+            {!!historyItem?.status && (
               <Badge
                 className={cn('bg-green-400/10 text-green-500', {
                   'bg-red-400/10 text-red-500': isError,
@@ -537,16 +537,31 @@ export const Query = (props: {
         return;
       }
 
-      const status = response.status;
+      const extensionsResponse = (response.extensions?.response as {
+        status: number;
+        headers: Record<string, string>;
+      }) ?? {
+        status: 0,
+        headers: {},
+      };
+
+      delete response.extensions?.request;
+      delete response.extensions?.response;
+
+      if (Object.keys(response.extensions ?? {}).length === 0) {
+        delete response.extensions;
+      }
+
+      const status = extensionsResponse.status;
       const duration = performance.now() - startTime;
-      const responseText = await response.text();
+      const responseText = JSON.stringify(response, null, 2);
       const size = responseText.length;
 
       const newItemHistory = addHistory({
         status,
         duration,
         size,
-        headers: JSON.stringify(Object.fromEntries(response.headers.entries()), null, 2),
+        headers: JSON.stringify(extensionsResponse.headers, null, 2),
         operation,
         preflightLogs: result?.logs ?? [],
         response: responseText,

packages/libraries/laboratory/src/components/laboratory/settings.tsx

@@ -18,7 +18,6 @@ const settingsFormSchema = z.object({
     protocol: z.enum(['SSE', 'GRAPHQL_SSE', 'WS', 'LEGACY_WS']),
   }),
   introspection: z.object({
-    queryName: z.string().optional(),
     method: z.enum(['GET', 'POST']).optional(),
     schemaDescription: z.boolean().optional(),
   }),
@@ -87,8 +86,12 @@ export const Settings = () => {
                       <Input
                         type="number"
                         name={field.name}
-                        value={field.state.value}
-                        onChange={e => field.handleChange(Number(e.target.value))}
+                        value={field.state.value ?? ''}
+                        onChange={e =>
+                          field.handleChange(
+                            e.target.value === '' ? undefined : Number(e.target.value),
+                          )
+                        }
                       />
                     </Field>
                   );
@@ -102,8 +105,12 @@ export const Settings = () => {
                       <Input
                         type="number"
                         name={field.name}
-                        value={field.state.value}
-                        onChange={e => field.handleChange(Number(e.target.value))}
+                        value={field.state.value ?? ''}
+                        onChange={e =>
+                          field.handleChange(
+                            e.target.value === '' ? undefined : Number(e.target.value),
+                          )
+                        }
                       />
                     </Field>
                   );
@@ -115,7 +122,7 @@ export const Settings = () => {
                     <Field className="flex-row items-center">
                       <Switch
                         className="!w-8"
-                        checked={field.state.value}
+                        checked={field.state.value ?? false}
                         onCheckedChange={field.handleChange}
                       />
                       <FieldLabel htmlFor={field.name}>Use GET for queries</FieldLabel>
@@ -175,20 +182,6 @@ export const Settings = () => {
           </CardHeader>
           <CardContent>
             <FieldGroup>
-              <form.Field name="introspection.queryName">
-                {field => {
-                  return (
-                    <Field>
-                      <FieldLabel htmlFor={field.name}>Query name</FieldLabel>
-                      <Input
-                        name={field.name}
-                        value={field.state.value}
-                        onChange={e => field.handleChange(e.target.value)}
-                      />
-                    </Field>
-                  );
-                }}
-              </form.Field>
               <form.Field name="introspection.method">
                 {field => {
                   const isInvalid = field.state.meta.isTouched && !field.state.meta.isValid;
@@ -219,7 +212,7 @@ export const Settings = () => {
                     <Field className="flex-row items-center">
                       <Switch
                         className="!w-8"
-                        checked={field.state.value}
+                        checked={field.state.value ?? false}
                         onCheckedChange={field.handleChange}
                       />
                       <FieldLabel htmlFor={field.name}>Schema description</FieldLabel>

packages/libraries/laboratory/src/lib/endpoint.ts

@@ -1,13 +1,15 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import {
   buildClientSchema,
-  getIntrospectionQuery,
   GraphQLSchema,
+  introspectionFromSchema,
   type IntrospectionQuery,
 } from 'graphql';
 import { toast } from 'sonner';
-import z from 'zod';
+// import z from 'zod';
 import { asyncInterval } from '@/lib/utils';
+import { SubscriptionProtocol, UrlLoader } from '@graphql-tools/url-loader';
+import type { LaboratorySettingsActions, LaboratorySettingsState } from './settings';
 
 export interface LaboratoryEndpointState {
   endpoint: string | null;
@@ -22,20 +24,11 @@ export interface LaboratoryEndpointActions {
   restoreDefaultEndpoint: () => void;
 }
 
-const GraphQLResponseErrorSchema = z
-  .object({
-    errors: z.array(
-      z.object({
-        message: z.string(),
-      }),
-    ),
-  })
-  .strict();
-
 export const useEndpoint = (props: {
   defaultEndpoint?: string | null;
   onEndpointChange?: (endpoint: string | null) => void;
   defaultSchemaIntrospection?: IntrospectionQuery | null;
+  settingsApi?: LaboratorySettingsState & LaboratorySettingsActions;
 }): LaboratoryEndpointState & LaboratoryEndpointActions => {
   const [endpoint, _setEndpoint] = useState<string | null>(props.defaultEndpoint ?? null);
   const [introspection, setIntrospection] = useState<IntrospectionQuery | null>(null);
@@ -52,6 +45,8 @@ export const useEndpoint = (props: {
     return introspection ? buildClientSchema(introspection) : null;
   }, [introspection]);
 
+  const loader = useMemo(() => new UrlLoader(), []);
+
   const fetchSchema = useCallback(
     async (signal?: AbortSignal) => {
       if (endpoint === props.defaultEndpoint && props.defaultSchemaIntrospection) {
@@ -65,28 +60,37 @@ export const useEndpoint = (props: {
       }
 
       try {
-        const response = await fetch(endpoint, {
-          signal,
-          method: 'POST',
-          body: JSON.stringify({
-            query: getIntrospectionQuery(),
-          }),
-          headers: {
-            'Content-Type': 'application/json',
-          },
-        }).then(r => r.json());
-
-        const parsedResponse = GraphQLResponseErrorSchema.safeParse(response);
-
-        if (parsedResponse.success) {
-          throw new Error(parsedResponse.data.errors.map(e => e.message).join('\n'));
+        const result = await loader.load(endpoint, {
+          subscriptionsEndpoint: endpoint,
+          subscriptionsProtocol:
+            (props.settingsApi?.settings.subscriptions.protocol as SubscriptionProtocol) ??
+            SubscriptionProtocol.GRAPHQL_SSE,
+          credentials: props.settingsApi?.settings.fetch.credentials,
+          specifiedByUrl: true,
+          directiveIsRepeatable: true,
+          inputValueDeprecation: true,
+          retry: props.settingsApi?.settings.fetch.retry,
+          timeout: props.settingsApi?.settings.fetch.timeout,
+          useGETForQueries: props.settingsApi?.settings.fetch.useGETForQueries,
+          exposeHTTPDetailsInExtensions: true,
+          descriptions: props.settingsApi?.settings.introspection.schemaDescription ?? false,
+          method: props.settingsApi?.settings.introspection.method ?? 'POST',
+          fetch: (input: string | URL | Request, init?: RequestInit) =>
+            fetch(input, {
+              ...init,
+              signal,
+            }),
+        });
+
+        if (result.length === 0) {
+          throw new Error('Failed to fetch schema');
         }
 
-        if (response.error && typeof response.error === 'string') {
-          throw new Error(response.error);
+        if (!result[0].schema) {
+          throw new Error('Failed to fetch schema');
         }
 
-        setIntrospection(response.data as IntrospectionQuery);
+        setIntrospection(introspectionFromSchema(result[0].schema));
       } catch (error: unknown) {
         if (
           error &&
@@ -104,7 +108,12 @@ export const useEndpoint = (props: {
         throw error;
       }
     },
-    [endpoint],
+    [
+      endpoint,
+      props.settingsApi?.settings.fetch.timeout,
+      props.settingsApi?.settings.introspection.method,
+      props.settingsApi?.settings.introspection.schemaDescription,
+    ],
   );
 
   const shouldPollSchema = useMemo(() => {
@@ -129,6 +138,7 @@ export const useEndpoint = (props: {
       5000,
       intervalController.signal,
     );
+
     return () => {
       intervalController.abort();
     };