From b7c349f680a138f25fac96356862e71c7bf8b495 Mon Sep 17 00:00:00 2001
From: Thomas Heyenbrock <thomas.heyenbrock@gmail.com>
Date: Mon, 4 Jul 2022 17:07:18 +0200
Subject: [PATCH] refresh editor after hiding (#2537)

---
 .../src/editor/components/header-editor.tsx   | 14 ++++++++++++
 .../src/editor/components/variable-editor.tsx | 14 ++++++++++++
 packages/graphiql/src/components/GraphiQL.tsx | 22 +++++--------------
 3 files changed, 34 insertions(+), 16 deletions(-)

diff --git a/packages/graphiql-react/src/editor/components/header-editor.tsx b/packages/graphiql-react/src/editor/components/header-editor.tsx
index 22beee38bfb..dd3acdad175 100644
--- 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
index 162987473f0..81c0b4395f6 100644
--- 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
index ae0e1c2f3a1..129f6288a1e 100644
--- 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>