Handle long responses graceful. Closes #179

Author: timsuchanek

packages/graphql-playground/package.json

@@ -1,6 +1,6 @@
 {
   "name": "graphql-playground",
-  "version": "1.0.16",
+  "version": "1.0.18",
   "main": "./lib/lib.js",
   "typings": "./lib/lib.d.ts",
   "scripts": {

packages/graphql-playground/src/components/Playground.tsx

@@ -181,7 +181,6 @@ export class Playground extends React.PureComponent<Props & DocsState, State> {
           props.adminAuthToken.length > 0 &&
           props.adminAuthToken) ||
         localStorage.getItem('token'),
-      response: undefined,
       selectUserOpen: false,
       selectUserSessionId: undefined,
       codeGenerationPopupOpen: false,
@@ -193,6 +192,7 @@ export class Playground extends React.PureComponent<Props & DocsState, State> {
       shareHttpHeaders: true,
       shareHistory: true,
       changed: false,
+      response: undefined,
     }
 
     if (typeof window === 'object') {
@@ -698,21 +698,27 @@ export class Playground extends React.PureComponent<Props & DocsState, State> {
             />}
           {this.props.adminAuthToken &&
             this.state.selectUserOpen &&
-            <SelectUserPopup
-              isOpen={this.state.selectUserOpen}
-              onRequestClose={this.handleCloseSelectUser}
-              adminAuthToken={this.props.adminAuthToken}
-              userFields={this.state.userFields}
-              onSelectUser={this.handleUserSelection}
-              endpointUrl={this.getSimpleEndpoint()}
-            />}
+            this.renderUserPopup()}
           {this.state.codeGenerationPopupOpen &&
             this.renderCodeGenerationPopup()}
         </div>
       </ThemeProvider>
     )
   }
 
+  renderUserPopup() {
+    return (
+      <SelectUserPopup
+        isOpen={this.state.selectUserOpen}
+        onRequestClose={this.handleCloseSelectUser}
+        adminAuthToken={this.props.adminAuthToken!}
+        userFields={this.state.userFields}
+        onSelectUser={this.handleUserSelection}
+        endpointUrl={this.getSimpleEndpoint()}
+      />
+    )
+  }
+
   renderCodeGenerationPopup() {
     const { sessions, selectedSessionIndex } = this.state
     const { isEndpoint } = this.props

packages/graphql-playground/src/styles/graphiql_dark.css

@@ -1314,3 +1314,8 @@ li.CodeMirror-hint-active {
 .history-popup .graphiql-container .queryWrap {
     border-top: none;
 }
+
+.result-codemirror .CodeMirror-scroll {
+    max-width: 50vw;
+    margin-right: 10px;
+}