handle null editor value in explorer plugin

Author: acao

.changeset/pink-mails-occur.md

@@ -0,0 +1,5 @@
+---
+'@graphiql/plugin-explorer': patch
+---
+
+handle null editor in explorer plugin

packages/graphiql-plugin-code-exporter/src/index.tsx

@@ -21,7 +21,9 @@ function GraphiQLCodeExporterPlugin(props: GraphiQLCodeExporterPluginProps) {
   );
 }
 
-export function codeExporterPlugin(props: GraphiQLCodeExporterPluginProps) {
+export function codeExporterPlugin(
+  props: GraphiQLCodeExporterPluginProps,
+): GraphiQLPlugin {
   return {
     title: 'GraphiQL Code Exporter',
     icon: () => (
@@ -42,5 +44,5 @@ export function codeExporterPlugin(props: GraphiQLCodeExporterPluginProps) {
     content() {
       return <GraphiQLCodeExporterPlugin {...props} />;
     },
-  } as GraphiQLPlugin;
+  };
 }

packages/graphiql-plugin-explorer/src/index.tsx

@@ -135,10 +135,12 @@ function ExplorerPlugin(props: GraphiQLExplorerPluginProps) {
   );
   // todo: document how to do this!
   const handleEditOperation = useCallback(
-    (value: string) => queryEditor!.setValue(value),
+    (value: string) => queryEditor?.setValue(value),
     [queryEditor],
   );
 
+  const operationDocument = queryEditor?.getValue() ?? '';
+
   return (
     <GraphiQLExplorer
       schema={schema}
@@ -150,7 +152,7 @@ function ExplorerPlugin(props: GraphiQLExplorerPluginProps) {
       checkboxUnchecked={checkboxUnchecked}
       checkboxChecked={checkboxChecked}
       styles={styles}
-      query={queryEditor!.getValue()}
+      query={operationDocument}
       onEdit={handleEditOperation}
       {...props}
     />