refresh editor after hiding (#2537)

graphql · Aug 5, 2022 · b7c349f · b7c349f
1 parent 2db407c
commit b7c349f
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 16 deletions.
diff --git a/packages/graphiql-react/src/editor/components/header-editor.tsx b/packages/graphiql-react/src/editor/components/header-editor.tsx
@@ -1,3 +1,6 @@
+import { useEffect } from 'react';
+
+import { useEditorContext } from '../context';
 import { useHeaderEditor, UseHeaderEditorArgs } from '../header-editor';
 
 import '../style/codemirror.css';
@@ -7,7 +10,18 @@ import '../style/editor.css';
 type HeaderEditorProps = UseHeaderEditorArgs & { isHidden?: boolean };
 
 export function HeaderEditor({ isHidden, ...hookArgs }: HeaderEditorProps) {
+  const { headerEditor } = useEditorContext({
+    nonNull: true,
+    caller: HeaderEditor,
+  });
   const ref = useHeaderEditor(hookArgs);
+
+  useEffect(() => {
+    if (headerEditor && !isHidden) {
+      headerEditor.refresh();
+    }
+  }, [headerEditor, isHidden]);
+
   return (
     <div className={`graphiql-editor${isHidden ? ' hidden' : ''}`} ref={ref} />
   );

diff --git a/packages/graphiql-react/src/editor/components/variable-editor.tsx b/packages/graphiql-react/src/editor/components/variable-editor.tsx
@@ -1,3 +1,6 @@
+import { useEffect } from 'react';
+
+import { useEditorContext } from '../context';
 import { useVariableEditor, UseVariableEditorArgs } from '../variable-editor';
 
 import '../style/codemirror.css';
@@ -11,7 +14,18 @@ type VariableEditorProps = UseVariableEditorArgs & {
 };
 
 export function VariableEditor({ isHidden, ...hookArgs }: VariableEditorProps) {
+  const { variableEditor } = useEditorContext({
+    nonNull: true,
+    caller: VariableEditor,
+  });
   const ref = useVariableEditor(hookArgs);
+
+  useEffect(() => {
+    if (variableEditor && !isHidden) {
+      variableEditor.refresh();
+    }
+  }, [variableEditor, isHidden]);
+
   return (
     <div className={`graphiql-editor${isHidden ? ' hidden' : ''}`} ref={ref} />
   );

diff --git a/packages/graphiql/src/components/GraphiQL.tsx b/packages/graphiql/src/components/GraphiQL.tsx
@@ -803,14 +803,9 @@ class GraphiQLWithContext extends React.Component<
                                 null,
                               );
                             }
-                            this.setState(
-                              {
-                                activeSecondaryEditor: 'variable',
-                              },
-                              () => {
-                                this.props.editorContext.variableEditor?.refresh();
-                              },
-                            );
+                            this.setState({
+                              activeSecondaryEditor: 'variable',
+                            });
                           }}>
                           Variables
                         </UnStyledButton>
@@ -830,14 +825,9 @@ class GraphiQLWithContext extends React.Component<
                                   null,
                                 );
                               }
-                              this.setState(
-                                {
-                                  activeSecondaryEditor: 'header',
-                                },
-                                () => {
-                                  this.props.editorContext.headerEditor?.refresh();
-                                },
-                              );
+                              this.setState({
+                                activeSecondaryEditor: 'header',
+                              });
                             }}>
                             Headers
                           </UnStyledButton>