fix schema fetching

Author: timsuchanek

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

@@ -46,6 +46,7 @@ import {
 import { Session } from '../state/sessions/reducers'
 import { getWorkspaceId } from './Playground/util/getWorkspaceId'
 import { getSettings, getSettingsString } from '../state/workspace/reducers'
+import { Backoff } from './Playground/util/fibonacci-backoff'
 
 export interface Response {
   resultID: string
@@ -95,7 +96,7 @@ export interface ReduxProps {
   setTracingSupported: (value: boolean) => void
   injectHeaders: (headers: string, endpoint: string) => void
   setConfigString: (str: string) => void
-  schemaFetchingError: (endpoint: string) => void
+  schemaFetchingError: (endpoint: string, error: string) => void
   schemaFetchingSuccess: (endpoint: string, tracingSupported: boolean) => void
   isConfigTab: boolean
   isSettingsTab: boolean
@@ -122,10 +123,10 @@ export class Playground extends React.PureComponent<Props & ReduxProps, State> {
   apolloLinks: { [sessionId: string]: any } = {}
   observers: { [sessionId: string]: any } = {}
   graphiqlComponents: any[] = []
+  private backoff: Backoff
   private initialIndex: number = -1
   private mounted = false
-  private retries = 0
-  private maxRetries = 10
+  private fetchingSchema = false
 
   constructor(props: Props & ReduxProps) {
     super(props)
@@ -193,26 +194,38 @@ export class Playground extends React.PureComponent<Props & ReduxProps, State> {
     if (this.mounted && this.state.schema) {
       this.setState({ schema: undefined })
     }
-    try {
-      const schema = await schemaFetcher.fetch({
-        endpoint: props.endpoint,
-        headers: props.headers
-          ? JSON.stringify(props.headers)
-          : props.sessionHeaders,
-      })
-      if (schema) {
-        this.setState({ schema: schema.schema })
-        this.props.schemaFetchingSuccess(
-          props.endpoint,
-          schema.tracingSupported,
-        )
+    let first = true
+    this.backoff = new Backoff(async () => {
+      if (first) {
+        await this.schemaGetter(props)
+        first = false
+      } else {
+        await this.schemaGetter()
       }
-    } catch (e) {
-      this.props.schemaFetchingError(props.endpoint)
-      if (this.retries < this.maxRetries) {
-        await new Promise(r => setTimeout(r, 5000))
-        this.retries++
-        this.getSchema(props)
+    })
+    this.backoff.start()
+  }
+
+  async schemaGetter(props = this.props) {
+    if (!this.fetchingSchema) {
+      try {
+        const data = {
+          endpoint: props.endpoint,
+          headers: props.headers
+            ? JSON.stringify(props.headers)
+            : props.sessionHeaders,
+        }
+        const schema = await schemaFetcher.fetch(data)
+        if (schema) {
+          this.setState({ schema: schema.schema })
+          this.props.schemaFetchingSuccess(
+            props.endpoint,
+            schema.tracingSupported,
+          )
+          this.backoff.stop()
+        }
+      } catch (e) {
+        this.props.schemaFetchingError(props.endpoint, e.message)
       }
     }
   }

packages/graphql-playground-react/src/components/Playground/SchemaFetcher.ts

@@ -20,21 +20,31 @@ export type LinkGetter = (session: SchemaFetchProps) => { link: ApolloLink }
 export class SchemaFetcher {
   cache: Map<string, TracingSchemaTuple>
   linkGetter: LinkGetter
+  fetching: Map<string, Promise<any>>
   constructor(linkGetter: LinkGetter) {
     this.cache = Map()
+    this.fetching = Map()
     this.linkGetter = linkGetter
   }
   async fetch(session: SchemaFetchProps) {
     const hash = this.hash(session)
     const cachedSchema = this.cache.get(hash)
-    return cachedSchema || this.fetchSchema(session)
+    if (cachedSchema) {
+      return cachedSchema
+    }
+    const fetching = this.fetching.get(hash)
+    if (fetching) {
+      return fetching
+    }
+    const promise = this.fetchSchema(session)
+    this.fetching = this.fetching.set(hash, promise)
+    return promise
   }
   refetch(session: SchemaFetchProps) {
     return this.fetchSchema(session)
   }
   hash(session: SchemaFetchProps) {
-    const { endpoint, headers } = session
-    return `${endpoint}~${headers}`
+    return `${session.endpoint}~${session.headers}`
   }
   private fetchSchema(
     session: SchemaFetchProps,
@@ -45,8 +55,6 @@ export class SchemaFetcher {
       'X-Apollo-Tracing': '1',
     })
 
-    // const newSession = setIn<SchemaFetchProps>(session, ['headers'], headers)
-
     const { link } = this.linkGetter(set(session, 'headers', headers))
 
     const operation = makeOperation({ query: introspectionQuery })
@@ -63,15 +71,6 @@ export class SchemaFetcher {
           }
 
           const schema = buildClientSchema(schemaData.data as any)
-          /**
-           * DANGER! THIS IS AN EXTREME HACK. As soon, as codemirror-graphql doesn't use getType in .hint anymore
-           * this can be removed.
-           */
-          // const oldGetType = schema.getType
-          // schema.getType = type => {
-          //   const getTypeResult = oldGetType.call(schema, type)
-          //   return getTypeResult || type
-          // }
           const tracingSupported =
             (schemaData.extensions && Boolean(schemaData.extensions.tracing)) ||
             false
@@ -81,9 +80,11 @@ export class SchemaFetcher {
           }
           this.cache = this.cache.set(this.hash(session), result)
           resolve(result)
+          this.fetching = this.fetching.remove(this.hash(session))
         },
         error: err => {
-          reject(JSON.stringify(err, null, 2))
+          reject(err)
+          this.fetching = this.fetching.remove(this.hash(session))
         },
       })
     })

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

@@ -0,0 +1,33 @@
+import { memoize } from 'lodash'
+const fibonacci = memoize(num => {
+  if (num <= 1) {
+    return 1
+  }
+
+  return fibonacci(num - 1) + fibonacci(num - 2)
+})
+
+export class Backoff {
+  cb
+  count = 1
+  running = true
+  timeout
+  maxRetries = 20
+  constructor(cb) {
+    this.cb = cb
+  }
+  async start() {
+    const fn = async () => {
+      await this.cb()
+      this.count++
+      if (this.running && this.count < this.maxRetries) {
+        setTimeout(fn, fibonacci(this.count) * 1000)
+      }
+    }
+    fn()
+  }
+  stop() {
+    this.running = false
+    clearTimeout(this.timeout)
+  }
+}

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

@@ -18,43 +18,43 @@ if (process.env.NODE_ENV !== 'production') {
       <MiddlewareApp
         setTitle={true}
         showNewWorkspace={false}
-        config={config}
-        configString={JSON.stringify(config, null, 2)}
+        // config={config}
+        // configString={JSON.stringify(config, null, 2)}
         {...options}
       />,
       element,
     )
   },
 }
 
-const config = {
-  projects: {
-    app: {
-      schemaPath: 'src/schema.graphql',
-      extensions: {
-        endpoints: {
-          default: 'http://localhost:4000',
-        },
-      },
-    },
-    database: {
-      schemaPath: 'src/generated/prisma.graphql',
-      extensions: {
-        prisma: 'database/prisma.yml',
-        'prepare-binding': {
-          output: 'src/generated/prisma.ts',
-          generator: 'prisma-ts',
-        },
-        endpoints: {
-          dev: {
-            url: 'https://eu1.prisma.sh/lol/hall/dev',
-            headers: {
-              Authorization:
-                'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJkYXRhIjp7InNlcnZpY2UiOiJoYWxsQGRldiIsInJvbGVzIjpbImFkbWluIl19LCJpYXQiOjE1MjE4MjIwNDQsImV4cCI6MTUyMjQyNjg0NH0.rxU4v6GeBOZxzSRP9-AeJbrmkcZBNKjecH7d43OEUqc',
-            },
-          },
-        },
-      },
-    },
-  },
-}
+// const config = {
+//   projects: {
+//     app: {
+//       schemaPath: 'src/schema.graphql',
+//       extensions: {
+//         endpoints: {
+//           default: 'http://localhost:4000',
+//         },
+//       },
+//     },
+//     database: {
+//       schemaPath: 'src/generated/prisma.graphql',
+//       extensions: {
+//         prisma: 'database/prisma.yml',
+//         'prepare-binding': {
+//           output: 'src/generated/prisma.ts',
+//           generator: 'prisma-ts',
+//         },
+//         endpoints: {
+//           dev: {
+//             url: 'https://eu1.prisma.sh/lol/hall/dev',
+//             headers: {
+//               Authorization:
+//                 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJkYXRhIjp7InNlcnZpY2UiOiJoYWxsQGRldiIsInJvbGVzIjpbImFkbWluIl19LCJpYXQiOjE1MjE4MjIwNDQsImV4cCI6MTUyMjQyNjg0NH0.rxU4v6GeBOZxzSRP9-AeJbrmkcZBNKjecH7d43OEUqc',
+//             },
+//           },
+//         },
+//       },
+//     },
+//   },
+// }

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

@@ -126,7 +126,7 @@ export const {
           + tracingSupported
         })
   */
-  SCHEMA_FETCHING_ERROR: endpoint => ({ endpoint }),
+  SCHEMA_FETCHING_ERROR: (endpoint, error) => ({ endpoint, error }),
   /*
 
       this.setState({

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

@@ -255,18 +255,30 @@ export default handleActions(
       })
     },
     SCHEMA_FETCHING_SUCCESS: (state, { payload }) => {
-      const newSessions = state.get('sessions').map((session, sessionId) => {
-        if (session.get('endpoint') === payload.endpoint) {
-          return session.merge(
-            Map({
+      const newSessions = state
+        .get('sessions')
+        .map((session: Session, sessionId) => {
+          if (session.endpoint === payload.endpoint) {
+            // if there was an error, clear it away
+            const data: any = {
               tracingSupported: payload.tracingSupported,
               isReloadingSchema: false,
               endpointUnreachable: false,
-            }),
-          )
-        }
-        return session
-      })
+            }
+            const response = session.responses
+              ? session.responses!.first()
+              : null
+            if (
+              response &&
+              session.responses!.size === 1 &&
+              response.date.includes('error')
+            ) {
+              data.responses = List([])
+            }
+            return session.merge(Map(data))
+          }
+          return session
+        })
       return state.set('sessions', newSessions)
     },
     SCHEMA_FETCHING_ERROR: (state, { payload }) => {
@@ -276,6 +288,13 @@ export default handleActions(
             Map({
               isReloadingSchema: false,
               endpointUnreachable: true,
+              responses: List([
+                new ResponseRecord({
+                  resultID: cuid(),
+                  date: payload.error,
+                  time: new Date(),
+                }),
+              ]),
             }),
           )
         }

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

@@ -97,7 +97,7 @@ function* runQueryAtPosition(action) {
 
 function* fetchSchemaSaga() {
   const session: Session = yield select(getSelectedSession)
-  yield schemaFetcher.refetch(session)
+  yield schemaFetcher.fetch(session)
   try {
     yield put(schemaFetchingSuccess(session.endpoint))
   } catch (e) {