Fix: share operation graphiql to lab (#7839)

Author: mskorokhodov

.changeset/tall-guests-slide.md

@@ -0,0 +1,6 @@
+---
+'@graphql-hive/laboratory': patch
+'@graphql-hive/render-laboratory': patch
+---
+
+exposed renderLaboratory function to use window location as default endpoint

packages/libraries/laboratory/src/index.tsx

@@ -36,7 +36,9 @@ export const renderLaboratory = (el: HTMLElement) => {
   return ReactDOM.createRoot(el).render(
     <Laboratory
       theme="dark"
-      defaultEndpoint={getLocalStorage('endpoint') ?? null}
+      defaultEndpoint={
+        getLocalStorage('endpoint') ?? window.location.origin + window.location.pathname
+      }
       onEndpointChange={endpoint => {
         setLocalStorage('endpoint', endpoint ?? '');
       }}

packages/web/app/src/lib/hooks/laboratory/use-current-operation.ts

@@ -61,6 +61,7 @@ export function useCurrentOperationWithFetchingState(props: {
       id: operationIdFromSearch || '',
     },
     pause: !operationIdFromSearch,
+    requestPolicy: 'network-only',
   });
 
   return {

packages/web/app/src/pages/target-laboratory-new.tsx

@@ -28,7 +28,6 @@ import { useRedirect } from '@/lib/access/common';
 import { useLocalStorage, useToggle } from '@/lib/hooks';
 import { useCurrentOperationWithFetchingState } from '@/lib/hooks/laboratory/use-current-operation';
 import { TargetLaboratoryPageQuery } from '@/lib/hooks/laboratory/use-operation-collections-plugin';
-import { useSyncOperationState } from '@/lib/hooks/laboratory/use-sync-operation-state';
 import { useOperationFromQueryString } from '@/lib/hooks/laboratory/useOperationFromQueryString';
 import { useResetState } from '@/lib/hooks/use-reset-state';
 import { cn } from '@/lib/utils';
@@ -403,7 +402,7 @@ function useLaboratoryState(props: {
 
   const deleteOperation = useMemo(
     () =>
-      throttle((collection: LaboratoryCollection, operation: LaboratoryCollectionOperation) => {
+      throttle((_collection: LaboratoryCollection, operation: LaboratoryCollectionOperation) => {
         void mutateDelete({
           selector: {
             targetSlug: props.targetSlug,
@@ -478,32 +477,26 @@ function useLaboratoryState(props: {
       targetSlug: props.targetSlug,
     });
 
-  const { savedOperation } = useSyncOperationState({
-    organizationSlug: props.organizationSlug,
-    projectSlug: props.projectSlug,
-    targetSlug: props.targetSlug,
-  });
-
   const defaultOperations = useMemo(() => {
-    if (currentOperation && savedOperation) {
+    if (currentOperation) {
       return [
         ...getLocalStorageState('operations', []),
         {
           id: currentOperation.id,
           name: currentOperation.name,
-          query: savedOperation.query,
-          variables: savedOperation.variables ?? '{}',
+          query: currentOperation.query,
+          variables: currentOperation.variables ?? '{}',
           headers: currentOperation.headers ?? '{}',
           extensions: '{}',
         } satisfies LaboratoryOperation,
       ];
     }
 
     return getLocalStorageState('operations', []);
-  }, [currentOperation, savedOperation]);
+  }, [currentOperation]);
 
   const defaultTabs = useMemo(() => {
-    if (currentOperation && savedOperation) {
+    if (currentOperation) {
       return [
         ...getLocalStorageState('tabs', []),
         {
@@ -522,7 +515,7 @@ function useLaboratoryState(props: {
     }
 
     return getLocalStorageState('tabs', []);
-  }, [currentOperation, savedOperation]);
+  }, [currentOperation]);
 
   const operationIdFromSearch = useOperationFromQueryString();