Permalink
Browse files

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
  • Loading branch information...
1 parent 16d2b5e commit fcc098a0b5c1082cde1ca08811a7fc2d7a0841da @leebyron leebyron committed on GitHub Jan 10, 2017
Showing with 38 additions and 12 deletions.
  1. +13 −0 css/doc-explorer.css
  2. +16 −10 src/components/DocExplorer.js
  3. +9 −2 src/components/GraphiQL.js
View
@@ -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%);
+}
@@ -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>
);
@@ -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)
+ });
});
}

0 comments on commit fcc098a

Please sign in to comment.