Fix schema reloading. Closes #637

Author: timsuchanek

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

@@ -233,6 +233,11 @@ export class Playground extends React.PureComponent<Props & ReduxProps, State> {
               : JSON.stringify(props.headers),
         }
         const schema = await schemaFetcher.fetch(data)
+        schemaFetcher.subscribe(data, newSchema => {
+          if (data.endpoint === this.props.endpoint) {
+            this.setState({ schema: newSchema })
+          }
+        })
         if (schema) {
           this.setState({ schema: schema.schema })
           this.props.schemaFetchingSuccess(

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

@@ -22,6 +22,7 @@ export class SchemaFetcher {
   cache: Map<string, TracingSchemaTuple>
   linkGetter: LinkGetter
   fetching: Map<string, Promise<any>>
+  subscriptions: Map<string, (schema: GraphQLSchema) => void> = Map()
   constructor(linkGetter: LinkGetter) {
     this.cache = Map()
     this.fetching = Map()
@@ -41,15 +42,20 @@ export class SchemaFetcher {
     this.fetching = this.fetching.set(hash, promise)
     return promise
   }
+  subscribe(session: SchemaFetchProps, cb: (schema: GraphQLSchema) => void) {
+    const hash = this.hash(session)
+    this.subscriptions = this.subscriptions.set(hash, cb)
+  }
   refetch(session: SchemaFetchProps) {
     return this.fetchSchema(session)
   }
   hash(session: SchemaFetchProps) {
-    return `${session.endpoint}~${session.headers}`
+    return `${session.endpoint}~${session.headers || ''}`
   }
   private fetchSchema(
     session: SchemaFetchProps,
   ): Promise<{ schema: GraphQLSchema; tracingSupported: boolean } | null> {
+    const hash = this.hash(session)
     const { endpoint } = session
     const headers = {
       ...parseHeaders(session.headers),
@@ -81,7 +87,11 @@ export class SchemaFetcher {
           }
           this.cache = this.cache.set(this.hash(session), result)
           resolve(result)
-          this.fetching = this.fetching.remove(this.hash(session))
+          this.fetching = this.fetching.remove(hash)
+          const subscription = this.subscriptions.get(hash)
+          if (subscription) {
+            subscription(result.schema)
+          }
         },
         error: err => {
           reject(err)

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

@@ -51,11 +51,11 @@ const config = {
         },
         endpoints: {
           dev2: {
-            url: 'https://eu1.prisma.sh/lol/asdf/dev',
-            headers: {
-              Authorization:
-                'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJkYXRhIjp7InNlcnZpY2UiOiJhc2RmQGRldiIsInJvbGVzIjpbImFkbWluIl19LCJpYXQiOjE1MjM1MTg3NTYsImV4cCI6MTUyNDEyMzU1Nn0.fzKhXa1JpN9M1UGTbS6p2KMUWDrKLxYD3i3a9eVfOQQ',
-            },
+            url: 'https://eu1.prisma.sh/public-asdf/session65/dev',
+            // headers: {
+            //   Authorization:
+            //     'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJkYXRhIjp7InNlcnZpY2UiOiJhc2RmQGRldiIsInJvbGVzIjpbImFkbWluIl19LCJpYXQiOjE1MjM1MTg3NTYsImV4cCI6MTUyNDEyMzU1Nn0.fzKhXa1JpN9M1UGTbS6p2KMUWDrKLxYD3i3a9eVfOQQ',
+            // },
           },
         },
       },