Merge branch 'backoff'

Author: timsuchanek

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

@@ -36,6 +36,7 @@ import {
   getIsFile,
   getFile,
   getHeaders,
+  getIsReloadingSchema,
 } from '../state/sessions/selectors'
 import { getHistoryOpen } from '../state/general/selectors'
 import {
@@ -82,6 +83,7 @@ export interface Props {
   configPath?: string
   createApolloLink?: (session: Session) => ApolloLink
   workspaceName?: string
+  shouldInjectHeaders: boolean
 }
 
 export interface ReduxProps {
@@ -98,6 +100,7 @@ export interface ReduxProps {
   setConfigString: (str: string) => void
   schemaFetchingError: (endpoint: string, error: string) => void
   schemaFetchingSuccess: (endpoint: string, tracingSupported: boolean) => void
+  isReloadingSchema: boolean
   isConfigTab: boolean
   isSettingsTab: boolean
   isFile: boolean
@@ -148,8 +151,10 @@ export class Playground extends React.PureComponent<Props & ReduxProps, State> {
   componentWillMount() {
     // init redux
     this.props.initState(getWorkspaceId(this.props), this.props.endpoint)
-    this.props.injectHeaders(this.props.headers, this.props.endpoint)
     this.props.setConfigString(this.props.configString)
+    if (this.props.shouldInjectHeaders) {
+      this.props.injectHeaders(this.props.headers, this.props.endpoint)
+    }
   }
 
   componentDidMount() {
@@ -168,10 +173,16 @@ export class Playground extends React.PureComponent<Props & ReduxProps, State> {
     if (
       nextProps.headers !== this.props.headers ||
       nextProps.endpoint !== this.props.endpoint ||
-      nextProps.workspaceName !== this.props.workspaceName
+      nextProps.workspaceName !== this.props.workspaceName ||
+      nextProps.sessionHeaders !== this.props.sessionHeaders
     ) {
       this.getSchema(nextProps)
     }
+    if (this.props.isReloadingSchema && !nextProps.isReloadingSchema) {
+      setTimeout(() => {
+        this.getSchema(nextProps)
+      })
+    }
     if (
       this.props.endpoint !== nextProps.endpoint ||
       this.props.configPath !== nextProps.configPath ||
@@ -182,7 +193,10 @@ export class Playground extends React.PureComponent<Props & ReduxProps, State> {
     if (this.props.subscriptionEndpoint !== nextProps.subscriptionEndpoint) {
       setSubscriptionEndpoint(nextProps.subscriptionEndpoint)
     }
-    if (nextProps.headers !== this.props.headers) {
+    if (
+      nextProps.headers !== this.props.headers &&
+      this.props.shouldInjectHeaders
+    ) {
       this.props.injectHeaders(nextProps.headers, nextProps.endpoint)
     }
     if (nextProps.configString !== this.props.configString) {
@@ -195,6 +209,9 @@ export class Playground extends React.PureComponent<Props & ReduxProps, State> {
       this.setState({ schema: undefined })
     }
     let first = true
+    if (this.backoff) {
+      this.backoff.stop()
+    }
     this.backoff = new Backoff(async () => {
       if (first) {
         await this.schemaGetter(props)
@@ -211,9 +228,10 @@ export class Playground extends React.PureComponent<Props & ReduxProps, State> {
       try {
         const data = {
           endpoint: props.endpoint,
-          headers: props.headers
-            ? JSON.stringify(props.headers)
-            : props.sessionHeaders,
+          headers:
+            props.sessionHeaders && props.sessionHeaders.length > 0
+              ? props.sessionHeaders
+              : JSON.stringify(props.headers),
         }
         const schema = await schemaFetcher.fetch(data)
         if (schema) {
@@ -225,6 +243,8 @@ export class Playground extends React.PureComponent<Props & ReduxProps, State> {
           this.backoff.stop()
         }
       } catch (e) {
+        // tslint:disable-next-line
+        console.error(e)
         this.props.schemaFetchingError(props.endpoint, e.message)
       }
     }
@@ -322,6 +342,7 @@ const mapStateToProps = createStructuredSelector({
   sessionHeaders: getHeaders,
   settings: getSettings,
   settingsString: getSettingsString,
+  isReloadingSchema: getIsReloadingSchema,
 })
 
 export default connect(mapStateToProps, {

packages/graphql-playground-react/src/components/Playground/util/fibonacci-backoff.ts

@@ -22,16 +22,15 @@ export class Backoff {
       this.count++
       // The first 15 attempts are fast, then fibonacci starts with n = 3
       if (this.running && this.count < this.maxRetries) {
-        setTimeout(
+        this.timeout = setTimeout(
           fn,
-          (this.count < 15 ? 3 : fibonacci(this.count - 12)) * 1000,
+          (this.count < 3 ? 5 : fibonacci(this.count - 12)) * 1000,
         )
       }
     }
     fn()
   }
-  stop() {
+  stop = () => {
     this.running = false
-    clearTimeout(this.timeout)
   }
 }

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

@@ -64,6 +64,7 @@ export interface State {
   activeProjectName?: string
   activeEnv?: string
   headers?: any
+  shouldInjectHeaders: boolean
 }
 
 class PlaygroundWrapper extends React.Component<
@@ -118,6 +119,7 @@ class PlaygroundWrapper extends React.Component<
       activeEnv,
       activeProjectName: projectName,
       headers,
+      shouldInjectHeaders: false,
     }
   }
 
@@ -129,6 +131,7 @@ class PlaygroundWrapper extends React.Component<
     try {
       const headers = getParameterByName('headers', endpoint)
       if (headers) {
+        this.setState({ shouldInjectHeaders: true })
         return { headers: JSON.parse(headers), endpoint: splitted[0] }
       }
     } catch (e) {
@@ -322,6 +325,7 @@ class PlaygroundWrapper extends React.Component<
                 headers={this.state.headers}
                 configPath={this.props.configPath}
                 workspaceName={this.state.activeProjectName}
+                shouldInjectHeaders={this.state.shouldInjectHeaders}
               />
             </App>
           </OldThemeProvider>

packages/graphql-playground-react/src/localDevIndex.tsx

@@ -60,7 +60,7 @@ const config = {
         },
         endpoints: {
           dev: {
-            url: 'https://eu1.prisma.sh/tim2/prisma-airbnb-example/dev',
+            url: 'https://eu1.prisma.sh/lol/asdf/dev',
             headers: {
               Authorization:
                 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJkYXRhIjp7InNlcnZpY2UiOiJwcmlzbWEtYWlyYm5iLWV4YW1wbGVAZGV2Iiwicm9sZXMiOlsiYWRtaW4iXX0sImlhdCI6MTUyMjY4NDkzNiwiZXhwIjoxNTIzMjg5NzM2fQ.1wnkIJrAplDOznjEzLj8sQERL6dcAM0zjqxOGQBXGn0',

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

@@ -207,6 +207,13 @@ export function formatError(error, fetchingSchema: boolean = false) {
     return { error: `${message}${schemaMessage}. Please check your connection` }
   }
 
+  try {
+    const ee = JSON.parse(message)
+    return ee
+  } catch (e) {
+    //
+  }
+
   return { error: message }
 }