Set extensions in history, add prettify

Author: dondonz

packages/graphiql-react/src/editor/hooks.ts

@@ -212,7 +212,7 @@ type UsePrettifyEditorsArgs = {
 };
 
 export function usePrettifyEditors({ caller }: UsePrettifyEditorsArgs = {}) {
-  const { queryEditor, headerEditor, variableEditor } = useEditorContext({
+  const { queryEditor, headerEditor, variableEditor, extensionEditor } = useEditorContext({
     nonNull: true,
     caller: caller || usePrettifyEditors,
   });
@@ -233,6 +233,23 @@ export function usePrettifyEditors({ caller }: UsePrettifyEditorsArgs = {}) {
       }
     }
 
+    if (extensionEditor) {
+      const extensionEditorContent = extensionEditor.getValue();
+
+      try {
+        const prettifiedExtensionEditorContent = JSON.stringify(
+            JSON.parse(extensionEditorContent),
+            null,
+            2,
+        );
+        if (prettifiedExtensionEditorContent !== extensionEditorContent) {
+          extensionEditor.setValue(prettifiedExtensionEditorContent);
+        }
+      } catch {
+        /* Parsing JSON failed, skip prettification */
+      }
+    }
+
     if (headerEditor) {
       const headerEditorContent = headerEditor.getValue();
 
@@ -258,7 +275,7 @@ export function usePrettifyEditors({ caller }: UsePrettifyEditorsArgs = {}) {
         queryEditor.setValue(prettifiedEditorContent);
       }
     }
-  }, [queryEditor, variableEditor, headerEditor]);
+  }, [queryEditor, variableEditor, headerEditor, extensionEditor]);
 }
 
 export type UseAutoCompleteLeafsArgs = {

packages/graphiql-react/src/editor/tabs.ts

@@ -130,6 +130,7 @@ export function getDefaultTabState({
           title: operationName || DEFAULT_TITLE,
           query,
           variables,
+          extensions,
           headers,
           operationName,
           response: null,
@@ -148,6 +149,7 @@ export function getDefaultTabState({
           {
             query: query ?? defaultQuery,
             variables,
+            extensions,
             headers: headers ?? defaultHeaders,
           },
         ]
@@ -178,6 +180,7 @@ function isTabState(obj: any): obj is TabState {
     hasStringKey(obj, 'title') &&
     hasStringOrNullKey(obj, 'query') &&
     hasStringOrNullKey(obj, 'variables') &&
+    hasStringOrNullKey(obj, 'extensions') &&
     hasStringOrNullKey(obj, 'headers') &&
     hasStringOrNullKey(obj, 'operationName') &&
     hasStringOrNullKey(obj, 'response')
@@ -226,7 +229,7 @@ export function useSynchronizeActiveTabValues({
         operationName,
       });
     },
-    [queryEditor, variableEditor, headerEditor, responseEditor],
+    [queryEditor, variableEditor, extensionEditor, headerEditor, responseEditor],
   );
 }
 

packages/graphiql-react/src/history/components.tsx

@@ -112,7 +112,7 @@ export function HistoryItem(props: QueryHistoryItemProps) {
       nonNull: true,
       caller: HistoryItem,
     });
-  const { headerEditor, queryEditor, variableEditor } = useEditorContext({
+  const { headerEditor, queryEditor, variableEditor, extensionEditor } = useEditorContext({
     nonNull: true,
     caller: HistoryItem,
   });
@@ -151,12 +151,13 @@ export function HistoryItem(props: QueryHistoryItemProps) {
 
   const handleHistoryItemClick: MouseEventHandler<HTMLButtonElement> =
     useCallback(() => {
-      const { query, variables, headers } = props.item;
+      const { query, variables, extensions, headers } = props.item;
       queryEditor?.setValue(query ?? '');
       variableEditor?.setValue(variables ?? '');
+      extensionEditor?.setValue(extensions ?? '');
       headerEditor?.setValue(headers ?? '');
       setActive(props.item);
-    }, [headerEditor, props.item, queryEditor, setActive, variableEditor]);
+    }, [headerEditor, props.item, queryEditor, setActive, variableEditor, extensionEditor]);
 
   const handleDeleteItemFromHistory: MouseEventHandler<HTMLButtonElement> =
     useCallback(

packages/graphiql-toolkit/src/storage/history.ts

@@ -28,7 +28,7 @@ export class HistoryStore {
   private shouldSaveQuery(
     query?: string,
     variables?: string,
-    extensions?: string,
+    // extensions?: string, // dz todo: ask about saving strategy for extensions
     headers?: string,
     lastQuerySaved?: QueryStoreItem,
   ) {
@@ -80,7 +80,6 @@ export class HistoryStore {
       !this.shouldSaveQuery(
         query,
         variables,
-        extensions,
         headers,
         this.history.fetchRecent(),
       )