diff --git a/packages/graphql-playground-react/src/components/MiddlewareApp.tsx b/packages/graphql-playground-react/src/components/MiddlewareApp.tsx
index 7edf74845..febd492c1 100644
--- a/packages/graphql-playground-react/src/components/MiddlewareApp.tsx
+++ b/packages/graphql-playground-react/src/components/MiddlewareApp.tsx
@@ -1,6 +1,8 @@
 import * as React from 'react'
 import { Provider } from 'react-redux'
 import createStore from '../state/createStore'
+import { getSettings } from '../state/workspace/reducers'
+import { setSettingsString } from '../state/general/actions'
 import PlaygroundWrapper, { PlaygroundWrapperProps } from './PlaygroundWrapper'
 
 const store = createStore()
@@ -8,6 +10,12 @@ const store = createStore()
 export default class MiddlewareApp extends React.Component<
   PlaygroundWrapperProps
 > {
+  componentDidMount() {
+    const initialSettings = getSettings(store.getState())
+    const mergedSettings = { ...initialSettings, ...this.props.settings }
+    const settingsString = JSON.stringify(mergedSettings, null, 2)
+    store.dispatch(setSettingsString(settingsString))
+  }
   render() {
     return (
       <Provider store={store}>
diff --git a/packages/graphql-playground-react/src/components/PlaygroundWrapper.tsx b/packages/graphql-playground-react/src/components/PlaygroundWrapper.tsx
index 9d4c2f3f9..297658820 100644
--- a/packages/graphql-playground-react/src/components/PlaygroundWrapper.tsx
+++ b/packages/graphql-playground-react/src/components/PlaygroundWrapper.tsx
@@ -522,7 +522,7 @@ class PlaygroundWrapper extends React.Component<
 
 const mapStateToProps = (state, ownProps) => {
   const theme = ownProps.theme || getTheme(state, ownProps.settings)
-  const settings = ownProps.settings || getSettings(state)
+  const settings = getSettings(state)
   return { theme, settings }
 }