fix schema reloading

Author: timsuchanek

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

@@ -21,7 +21,7 @@ import * as PropTypes from 'prop-types'
 import {
   editEndpoint,
   prettifyQuery,
-  fetchSchema,
+  refetchSchema,
 } from '../../../state/sessions/actions'
 import { share } from '../../../state/sharing/actions'
 import { openHistory } from '../../../state/general/actions'
@@ -36,7 +36,7 @@ export interface Props {
   prettifyQuery: () => void
   openHistory: () => void
   share: () => void
-  fetchSchema: () => void
+  refetchSchema: () => void
 }
 
 class TopBar extends React.Component<Props, {}> {
@@ -58,7 +58,7 @@ class TopBar extends React.Component<Props, {}> {
             value={this.props.endpoint}
             onChange={this.onChange}
             onKeyDown={this.onKeyDown}
-            onBlur={this.fetchSchema}
+            onBlur={this.props.refetchSchema}
             disabled={this.props.fixedEndpoint}
             className={cx({ active: !this.props.fixedEndpoint })}
           />
@@ -70,7 +70,7 @@ class TopBar extends React.Component<Props, {}> {
           ) : (
             <ReloadIcon
               isReloadingSchema={this.props.isReloadingSchema}
-              onReloadSchema={this.fetchSchema}
+              onReloadSchema={this.props.refetchSchema}
             />
           )}
         </UrlBarWrapper>
@@ -90,12 +90,9 @@ class TopBar extends React.Component<Props, {}> {
   }
   onKeyDown = e => {
     if (e.keyCode === 13) {
-      this.fetchSchema()
+      this.props.refetchSchema()
     }
   }
-  fetchSchema = () => {
-    this.props.fetchSchema()
-  }
   openHistory = () => {
     this.props.openHistory()
   }
@@ -152,7 +149,7 @@ export default connect(mapStateToProps, {
   prettifyQuery,
   openHistory,
   share,
-  fetchSchema,
+  refetchSchema,
 })(TopBar)
 
 const buttonColor = theme('mode', {

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

@@ -11,7 +11,7 @@ import { connect } from 'react-redux'
 import { getSessionCounts } from '../state/workspace/reducers'
 import { Map } from 'immutable'
 import { getWorkspaceId } from './Playground/util/getWorkspaceId'
-import { openConfigTab } from '../lib'
+import { openConfigTab } from '../state/sessions/actions'
 
 export interface Props {
   config: GraphQLConfig

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

@@ -60,6 +60,7 @@ export const {
   setResponseExtensions,
   setCurrentQueryStartTime,
   setCurrentQueryEndTime,
+  refetchSchema,
 } = createActions({
   // simple property setting
   EDIT_QUERY: query => ({ query }),
@@ -120,6 +121,7 @@ export const {
   CLEAR_RESPONSES: simpleAction(),
 
   FETCH_SCHEMA: simpleAction(),
+  REFETCH_SCHEMA: simpleAction(),
   SCHEMA_FETCHING_SUCCESS: (endpoint, tracingSupported) => ({
     endpoint,
     tracingSupported,

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

@@ -258,6 +258,12 @@ const reducer = handleActions(
         true,
       )
     },
+    REFETCH_SCHEMA: state => {
+      return state.setIn(
+        ['sessions', getSelectedSessionId(state), 'isReloadingSchema'],
+        true,
+      )
+    },
     STOP_QUERY: (state, { payload: { sessionId } }) => {
       return state.mergeIn(['sessions', sessionId], {
         queryRunning: false,

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

@@ -112,6 +112,18 @@ function* fetchSchemaSaga() {
   }
 }
 
+function* refetchSchemaSaga() {
+  const session: Session = yield select(getSelectedSession)
+  yield schemaFetcher.refetch(session)
+  try {
+    yield put(schemaFetchingSuccess(session.endpoint))
+  } catch (e) {
+    yield put(schemaFetchingError(session.endpoint))
+    yield call(delay, 5000)
+    yield put(fetchSchema())
+  }
+}
+
 function* renewStacks() {
   const session: Session = yield select(getSelectedSession)
   const docs: DocsSessionState = yield select(getSessionDocsState)
@@ -146,6 +158,7 @@ export const sessionsSagas = [
   takeEvery('EDIT_QUERY', safely(setQueryFacts)),
   takeEvery('RUN_QUERY_AT_POSITION', safely(runQueryAtPosition)),
   takeLatest('FETCH_SCHEMA', safely(fetchSchemaSaga)),
+  takeLatest('REFETCH_SCHEMA', safely(refetchSchemaSaga)),
   takeLatest('SCHEMA_FETCHING_SUCCESS', safely(renewStacks)),
   takeEvery('QUERY_SUCCESS' as any, safely(addToHistory)),
 ]