Prettier settings in config (#739)

* PrintWidth

* Prettier width

* Clean up

Author: huv1k

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

@@ -26,7 +26,6 @@ import { getSelectedSessionId } from './selectors'
 import { getDefaultSession, defaultQuery } from '../../constants'
 import * as cuid from 'cuid'
 import { formatError } from './fetchingSagas'
-import { prettify } from '../../utils'
 
 export interface SessionStateProps {
   sessions: OrderedMap<string, Session>
@@ -234,10 +233,6 @@ const reducer = handleActions(
       ]
       return state.setIn(path, !state.getIn(path))
     },
-    PRETTIFY_QUERY: state => {
-      const path = ['sessions', getSelectedSessionId(state), 'query']
-      return state.setIn(path, prettify(state.getIn(path)))
-    },
     OPEN_TRACING: (state, { payload: { responseTracingHeight } }) => {
       return state.mergeDeepIn(
         ['sessions', getSelectedSessionId(state)],

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

@@ -12,6 +12,7 @@ import getSelectedOperationName from '../../components/Playground/util/getSelect
 import { getQueryFacts } from '../../components/Playground/util/getQueryFacts'
 import { fromJS, is } from 'immutable'
 import {
+  editQuery,
   setVariableToType,
   setOperations,
   setOperationName,
@@ -33,7 +34,7 @@ import { getSessionDocsState } from '../docs/selectors'
 import { getQueryTypes } from '../../components/Playground/util/getQueryTypes'
 import { parse } from 'graphql'
 import { Session } from './reducers'
-import { safely } from '../../utils'
+import { safely, prettify } from '../../utils'
 import * as queryString from 'query-string'
 
 function* setQueryFacts() {
@@ -187,6 +188,13 @@ function* addToHistory({ payload }) {
   }
 }
 
+function* prettifyQuery() {
+  const { query } = yield select(getSelectedSession)
+  const settings = yield select(getSettings)
+  const prettyQuery = prettify(query, settings['prettier.printWidth'])
+  yield put(editQuery(prettyQuery))
+}
+
 export const sessionsSagas = [
   takeLatest('GET_QUERY_FACTS', safely(setQueryFacts)),
   takeLatest('SET_OPERATION_NAME', safely(setQueryFacts)),
@@ -197,6 +205,7 @@ export const sessionsSagas = [
   takeLatest('REFETCH_SCHEMA', safely(refetchSchemaSaga)),
   takeLatest('SCHEMA_FETCHING_SUCCESS', safely(renewStacks)),
   takeEvery('QUERY_SUCCESS' as any, safely(addToHistory)),
+  takeLatest('PRETTIFY_QUERY', safely(prettifyQuery)),
 ]
 
 // needed to fix typescript

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

@@ -47,6 +47,7 @@ export const defaultSettings: ISettings = {
   'editor.fontFamily': `'Source Code Pro', 'Consolas', 'Inconsolata', 'Droid Sans Mono', 'Monaco', monospace`,
   'editor.theme': 'dark',
   'editor.reuseHeaders': true,
+  'prettier.printWidth': 80,
   'request.credentials': 'omit',
   'tracing.hideTracingResponse': true,
 }

packages/graphql-playground-react/src/types.ts

@@ -23,6 +23,7 @@ export interface ISettings {
   ['editor.fontSize']: number
   ['editor.theme']: Theme
   ['editor.reuseHeaders']: boolean
+  ['prettier.printWidth']: number
   ['tracing.hideTracingResponse']: boolean
   ['request.credentials']: 'omit' | 'include' | 'same-origin'
 }

packages/graphql-playground-react/src/utils.ts

@@ -12,6 +12,15 @@ export function safely(cb: any) {
   }
 }
 
-export function prettify(query) {
-  return prettier.format(query, { parser: 'graphql', plugins: [graphql] })
+export function prettify(query: string, printWidth: number) {
+  try {
+    return prettier.format(query, {
+      parser: 'graphql',
+      printWidth,
+      plugins: [graphql],
+    })
+  } catch (e) {
+    //TODO show erros somewhere
+    console.log(e)
+  }
 }