From 8391a8a02fa3fb9c0536c2bbf13025332024983d Mon Sep 17 00:00:00 2001 From: timsuchanek Date: Thu, 24 May 2018 17:08:32 +0200 Subject: [PATCH] wip: large payload performance improvements --- .../graphql-playground-react/package.json | 2 +- .../CodeGenerationPopupCode.tsx | 2 - .../src/components/Playground.tsx | 2 +- .../components/Playground/ResultViewer.tsx | 3 -- .../src/components/Playground/Results.tsx | 41 +++++++++++++------ .../src/state/history/reducers.ts | 5 ++- .../src/state/localStorage.ts | 2 +- .../src/state/sessions/fetchingSagas.ts | 2 +- .../src/state/sessions/reducers.ts | 4 +- .../src/styles/graphiql_dark.css | 26 ++++++++++++ .../src/utils/performance.ts | 13 ++++++ packages/graphql-playground-react/yarn.lock | 6 +-- 12 files changed, 80 insertions(+), 28 deletions(-) create mode 100644 packages/graphql-playground-react/src/utils/performance.ts diff --git a/packages/graphql-playground-react/package.json b/packages/graphql-playground-react/package.json index 18b560575..505b9bbab 100644 --- a/packages/graphql-playground-react/package.json +++ b/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", diff --git a/packages/graphql-playground-react/src/components/CodeGenerationPopup/CodeGenerationPopupCode.tsx b/packages/graphql-playground-react/src/components/CodeGenerationPopup/CodeGenerationPopupCode.tsx index a5f148d53..f6c6e9cf9 100644 --- a/packages/graphql-playground-react/src/components/CodeGenerationPopup/CodeGenerationPopupCode.tsx +++ b/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, }} diff --git a/packages/graphql-playground-react/src/components/Playground.tsx b/packages/graphql-playground-react/src/components/Playground.tsx index 4a9661792..3fde455bb 100644 --- a/packages/graphql-playground-react/src/components/Playground.tsx +++ b/packages/graphql-playground-react/src/components/Playground.tsx @@ -154,7 +154,7 @@ export class Playground extends React.PureComponent { }) this.backoff.start() }, - 300, + 600, { trailing: true }, // important to not miss the last call ) as any diff --git a/packages/graphql-playground-react/src/components/Playground/ResultViewer.tsx b/packages/graphql-playground-react/src/components/Playground/ResultViewer.tsx index c8f5d9076..5c41978e1 100644 --- a/packages/graphql-playground-react/src/components/Playground/ResultViewer.tsx +++ b/packages/graphql-playground-react/src/components/Playground/ResultViewer.tsx @@ -28,8 +28,6 @@ export class ResultViewer extends React.Component { 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 { .result-codemirror :global(.CodeMirror) { @p: .bbox, .pl38; background: none; - position: relative !important; } `} diff --git a/packages/graphql-playground-react/src/components/Playground/Results.tsx b/packages/graphql-playground-react/src/components/Playground/Results.tsx index c5a1eac51..25901dfc6 100644 --- a/packages/graphql-playground-react/src/components/Playground/Results.tsx +++ b/packages/graphql-playground-react/src/components/Playground/Results.tsx @@ -17,7 +17,14 @@ export interface ReduxProps { responses: List } +const defaultResponseRecord = new ResponseRecord({ + date: '', + time: new Date(), + resultID: 'default-id', +}) + const Results: React.SFC = ({ setRef, responses }) => { + const response1 = responses.get(0) || defaultResponseRecord return (
= ({ setRef, responses }) => { position: relative; } `} - {responses.map(response => ( - + {responses.size <= 1 ? ( + {responses.size > 1 && - response.time && ( + response1.time && (
- {ageOfDate(response.time)} + {ageOfDate(response1.time)}
)}
- +
- ))} + ) : ( + responses.map(response => ( + + {responses.size > 1 && + response.time && ( +
+
+ {ageOfDate(response.time)} +
+
+ )} +
+ +
+ + )) + )}
) } diff --git a/packages/graphql-playground-react/src/state/history/reducers.ts b/packages/graphql-playground-react/src/state/history/reducers.ts index e03c99128..379720f02 100644 --- a/packages/graphql-playground-react/src/state/history/reducers.ts +++ b/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(), }), ) }, diff --git a/packages/graphql-playground-react/src/state/localStorage.ts b/packages/graphql-playground-react/src/state/localStorage.ts index 854984728..ce6bce813 100644 --- a/packages/graphql-playground-react/src/state/localStorage.ts +++ b/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 } diff --git a/packages/graphql-playground-react/src/state/sessions/fetchingSagas.ts b/packages/graphql-playground-react/src/state/sessions/fetchingSagas.ts index 695f104b2..80574da6f 100644 --- a/packages/graphql-playground-react/src/state/sessions/fetchingSagas.ts +++ b/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({ diff --git a/packages/graphql-playground-react/src/state/sessions/reducers.ts b/packages/graphql-playground-react/src/state/sessions/reducers.ts index 011fef2c6..1d058f451 100644 --- a/packages/graphql-playground-react/src/state/sessions/reducers.ts +++ b/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, diff --git a/packages/graphql-playground-react/src/styles/graphiql_dark.css b/packages/graphql-playground-react/src/styles/graphiql_dark.css index d2caaa02e..adbdbbf88 100644 --- a/packages/graphql-playground-react/src/styles/graphiql_dark.css +++ b/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; +} diff --git a/packages/graphql-playground-react/src/utils/performance.ts b/packages/graphql-playground-react/src/utils/performance.ts new file mode 100644 index 000000000..9e73ed862 --- /dev/null +++ b/packages/graphql-playground-react/src/utils/performance.ts @@ -0,0 +1,13 @@ +let last: number | null = null +// tslint:disable +export function log(...messages) { + if (messages.length === 0) { + last = null + } + if (last) { + console.log(...messages, `${performance.now() - last}ms`) + } else { + console.log(...messages) + } + last = performance.now() +} diff --git a/packages/graphql-playground-react/yarn.lock b/packages/graphql-playground-react/yarn.lock index 665136d69..4c7ecf2d1 100644 --- a/packages/graphql-playground-react/yarn.lock +++ b/packages/graphql-playground-react/yarn.lock @@ -1775,9 +1775,9 @@ codemirror@^5.18.2, codemirror@^5.26.0: version "5.33.0" resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-5.33.0.tgz#462ad9a6fe8d38b541a9536a3997e1ef93b40c6a" -codemirror@^5.36.0: - version "5.36.0" - resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-5.36.0.tgz#1172ad9dc298056c06e0b34e5ccd23825ca15b40" +codemirror@^5.38.0: + version "5.38.0" + resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-5.38.0.tgz#26a9551446e51dbdde36aabe60f72469724fd332" collection-visit@^1.0.0: version "1.0.0"