wip: large payload performance improvements

Author: timsuchanek

packages/graphql-playground-react/package.json

@@ -119,7 +119,7 @@
     "apollo-link-ws": "1.0.4",
     "calculate-size": "^1.1.1",
     "classnames": "^2.2.5",
-    "codemirror": "^5.36.0",
+    "codemirror": "^5.38.0",
     "codemirror-graphql": "timsuchanek/codemirror-graphql#details-fix",
     "copy-to-clipboard": "^3.0.8",
     "cuid": "^1.3.8",

packages/graphql-playground-react/src/components/CodeGenerationPopup/CodeGenerationPopupCode.tsx

@@ -58,7 +58,6 @@ class CodeGenerationPopupCode extends React.Component<
               options={{
                 height: 'auto',
                 mode: 'shell',
-                viewportMargin: Infinity,
                 theme: codeTheme,
               }}
             />
@@ -70,7 +69,6 @@ class CodeGenerationPopupCode extends React.Component<
           value={code}
           options={{
             height: 'auto',
-            viewportMargin: Infinity,
             mode,
             theme: codeTheme,
           }}

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

@@ -154,7 +154,7 @@ export class Playground extends React.PureComponent<Props & ReduxProps, State> {
       })
       this.backoff.start()
     },
-    300,
+    600,
     { trailing: true }, // important to not miss the last call
   ) as any
 

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

@@ -28,8 +28,6 @@ export class ResultViewer extends React.Component<Props, {}> {
   private viewer: any
 
   componentDidMount() {
-    // Lazily require to ensure requiring GraphiQL outside of a Browser context
-    // does not produce an error.
     const CodeMirror = require('codemirror')
     require('codemirror/addon/fold/foldgutter')
     require('codemirror/addon/fold/brace-fold')
@@ -96,7 +94,6 @@ export class ResultViewer extends React.Component<Props, {}> {
           .result-codemirror :global(.CodeMirror) {
             @p: .bbox, .pl38;
             background: none;
-            position: relative !important;
           }
         `}</style>
       </div>

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

@@ -17,7 +17,14 @@ export interface ReduxProps {
   responses: List<ResponseRecord>
 }
 
+const defaultResponseRecord = new ResponseRecord({
+  date: '',
+  time: new Date(),
+  resultID: 'default-id',
+})
+
 const Results: React.SFC<Props & ReduxProps> = ({ setRef, responses }) => {
+  const response1 = responses.get(0) || defaultResponseRecord
   return (
     <div
       className={cn('result-window', {
@@ -61,27 +68,37 @@ const Results: React.SFC<Props & ReduxProps> = ({ setRef, responses }) => {
           position: relative;
         }
       `}</style>
-      {responses.map(response => (
-        <Response
-          key={
-            responses.size === 1
-              ? 'first'
-              : response.resultID || String(response.time)
-          }
-        >
+      {responses.size <= 1 ? (
+        <Response key={'first'}>
           {responses.size > 1 &&
-            response.time && (
+            response1.time && (
               <div className="subscription-time">
                 <div className="subscription-time-text">
-                  {ageOfDate(response.time)}
+                  {ageOfDate(response1.time)}
                 </div>
               </div>
             )}
           <div className="result-viewer-wrapper">
-            <ResultViewer value={response.date} />
+            <ResultViewer value={response1.date} />
           </div>
         </Response>
-      ))}
+      ) : (
+        responses.map(response => (
+          <Response key={response.resultID || String(response.time)}>
+            {responses.size > 1 &&
+              response.time && (
+                <div className="subscription-time">
+                  <div className="subscription-time-text">
+                    {ageOfDate(response.time)}
+                  </div>
+                </div>
+              )}
+            <div className="result-viewer-wrapper">
+              <ResultViewer value={response.date} />
+            </div>
+          </Response>
+        ))
+      )}
     </div>
   )
 }

packages/graphql-playground-react/src/state/history/reducers.ts

@@ -1,4 +1,4 @@
-import { OrderedMap } from 'immutable'
+import { OrderedMap, List } from 'immutable'
 import { handleActions } from 'redux-actions'
 import * as cuid from 'cuid'
 import { SessionStateProps } from '../sessions/reducers'
@@ -13,11 +13,12 @@ export default handleActions(
       state.setIn([sessionId, 'starred'], !state.getIn([sessionId, 'starred'])),
     ADD_HISTORY_ITEM: (state, { payload: { session } }) => {
       const id = cuid()
-      return state.set(
+      return state.slice(-40).set(
         id,
         session.merge({
           id,
           date: new Date(),
+          responses: List(),
         }),
       )
     },

packages/graphql-playground-react/src/state/localStorage.ts

@@ -9,7 +9,7 @@ export function serializeState(store) {
         localStorage.setItem('graphql-playground', JSON.stringify(state))
       }
     },
-    300,
+    1000,
     { trailing: true },
   ) as any
 }

packages/graphql-playground-react/src/state/sessions/fetchingSagas.ts

@@ -130,7 +130,7 @@ function* runQuerySaga(action) {
   yield put(setSubscriptionActive(isSubscription(operation)))
   yield put(startQuery())
   let headers = parseHeaders(session.headers)
-  if (session.tracingSupported) {
+  if (session.tracingSupported && session.responseTracingOpen) {
     headers = set(headers, 'X-Apollo-Tracing', '1')
   }
   const { link, subscriptionClient } = linkCreator({

packages/graphql-playground-react/src/state/sessions/reducers.ts

@@ -95,12 +95,13 @@ export class Session extends Record(getDefaultSession('')) {
     const override: any = {
       queryRunning: false,
       subscriptionActive: false,
+      responseExtensions: {},
     }
     // dont serialize very big responses as the localStorage size is limited
     if (
       obj.responses &&
       obj.responses.size > 0 &&
-      (obj.responses.size > 20 || obj.responses.get(0).date.length > 20000)
+      (obj.responses.size > 20 || obj.responses.get(0).date.length > 2000)
     ) {
       override.responses = List()
     }
@@ -195,7 +196,6 @@ const reducer = handleActions(
     START_QUERY: state => {
       return state
         .setIn(['sessions', getSelectedSessionId(state), 'queryRunning'], true)
-        .setIn(['sessions', getSelectedSessionId(state), 'responses'], List())
         .setIn(
           ['sessions', getSelectedSessionId(state), 'responseExtensions'],
           undefined,

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

@@ -1458,3 +1458,29 @@ li.CodeMirror-hint-active {
   max-width: 50vw;
   margin-right: 10px;
 }
+
+/** NEW STYLES - @huv1k please merge into the dynamic styles branch **/
+
+.graphiql-container .resultWrap .result-window {
+  overflow: visible;
+  max-height: none !important;
+}
+
+.graphiql-container .resultWrap .result-window > div {
+  display: flex;
+  flex: 1;
+  height: 100%;
+}
+
+.graphiql-container .resultWrap .result-viewer-wrapper,
+.graphiql-container .resultWrap .result-viewer-wrapper .result-codemirror {
+  position: relative;
+  display: flex;
+  flex: 1;
+  height: 100%;
+}
+
+.graphiql-container .resultWrap .CodeMirror {
+  height: 100%;
+  position: absolute !important;
+}