Indicate when schema cannot be loaded in doc explorer. (#269)

When introspection fails to load a schema (or a schema is intentionally excluded via providing `null` as the prop), the doc explorer currently continues to show a loading indicator. This change alters that behavior to instead declare that no schema exists. This also ensures schema is set to `null` after failure to load via introspection.

Fixes #212

Author: leebyron

css/doc-explorer.css

@@ -159,3 +159,16 @@
   padding: 0;
   width: 100%;
 }
+
+.graphiql-container .error-container {
+  font-weight: bold;
+  left: 0;
+  letter-spacing: 1px;
+  opacity: 0.5;
+  position: absolute;
+  right: 0;
+  text-align: center;
+  text-transform: uppercase;
+  top: 50%;
+  transform: translate(0, -50%);
+}

src/components/DocExplorer.js

@@ -62,9 +62,22 @@ export class DocExplorer extends React.Component {
       navItem = navStack[navStack.length - 1];
     }
 
-    let title;
+    let title = 'Documentation Explorer';
     let content;
-    if (navItem) {
+    if (schema === undefined) {
+      // Schema is undefined when it is being loaded via introspection.
+      content =
+        <div className="spinner-container">
+          <div className="spinner" />
+        </div>;
+    } else if (schema === null) {
+      // Schema is null when it explicitly does not exist, typically due to
+      // an error during introspection.
+      content =
+        <div className="error-container">
+          {'No Schema Available'}
+        </div>;
+    } else if (navItem) {
       if (navItem.name === 'Search Results') {
         title = navItem.name;
         content =
@@ -95,7 +108,6 @@ export class DocExplorer extends React.Component {
         }
       }
     } else if (schema) {
-      title = 'Documentation Explorer';
       content =
         <SchemaDoc schema={schema} onClickType={this.handleClickTypeOrField} />;
     }
@@ -107,12 +119,6 @@ export class DocExplorer extends React.Component {
       prevName = navStack[navStack.length - 2].name;
     }
 
-    const spinnerDiv = (
-      <div className="spinner-container">
-        <div className="spinner" />
-      </div>
-    );
-
     const shouldSearchBoxAppear = content && (
       content.type === SearchResults || content.type === SchemaDoc
     );
@@ -140,7 +146,7 @@ export class DocExplorer extends React.Component {
             isShown={shouldSearchBoxAppear}
             onSearch={this.handleSearch}
           />
-          {this.props.schema ? content : spinnerDiv}
+          {content}
         </div>
       </div>
     );

src/components/GraphiQL.js

@@ -403,10 +403,17 @@ export class GraphiQL extends React.Component {
         const responseString = typeof result === 'string' ?
           result :
           JSON.stringify(result, null, 2);
-        this.setState({ response: responseString });
+        this.setState({
+          // Set schema to `null` to explicitly indicate that no schema exists.
+          schema: null,
+          response: responseString
+        });
       }
     }).catch(error => {
-      this.setState({ response: error && String(error.stack || error) });
+      this.setState({
+        schema: null,
+        response: error && String(error.stack || error)
+      });
     });
   }