feature: add global headers support (#992)

Author: joeabrams026

README.md

@@ -148,6 +148,7 @@ interface ISettings {
   'prettier.tabWidth': number
   'prettier.useTabs': boolean
   'request.credentials': 'omit' | 'include' | 'same-origin'
+  'request.globalHeaders': { [key: string]: string }
   'schema.polling.enable': boolean
   'schema.polling.endpointFilter': string
   'schema.polling.interval': number

packages/graphql-playground-html/src/render-playground-page.ts

@@ -27,6 +27,7 @@ export interface ISettings {
   'editor.fontSize': number
   'editor.fontFamily': string
   'request.credentials': string
+  'request.globalHeaders': { [key: string]: string; }
   'schema.polling.enable': boolean
   'schema.polling.endpointFilter': string
   'schema.polling.interval': number

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

@@ -255,15 +255,21 @@ export class Playground extends React.PureComponent<Props & ReduxProps, State> {
     const props = propsInput || this.props
     const endpoint = props.sessionEndpoint || props.endpoint
     const currentSchema = this.state.schema
+    const globalHeaders = props.settings['request.globalHeaders']
+
     try {
       const data = {
         endpoint,
         headers:
           props.sessionHeaders && props.sessionHeaders.length > 0
-            ? props.sessionHeaders
-            : props.headers && Object.keys(props.headers).length > 0
-              ? JSON.stringify(props.headers)
-              : undefined,
+            ? JSON.stringify({
+                ...globalHeaders,
+                ...JSON.parse(props.sessionHeaders),
+              })
+            : JSON.stringify({
+                ...globalHeaders,
+                ...props.headers,
+              }),
         credentials: props.settings['request.credentials'],
         useTracingHeader:
           !this.initialSchemaFetch &&

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

@@ -131,13 +131,15 @@ class TopBar extends React.Component<Props, {}> {
     } catch (e) {
       //
     }
+    const globalHeaders = this.props.settings['request.globalHeaders']
     const headers = {
       'Accept-Encoding': 'gzip, deflate, br',
       'Content-Type': 'application/json',
       Accept: 'application/json',
       Connection: 'keep-alive',
       DNT: '1',
       Origin: location.origin || session.endpoint,
+      ...globalHeaders,
       ...sessionHeaders,
     }
     const headersString = Object.keys(headers)

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

@@ -129,7 +129,10 @@ function* runQuerySaga(action) {
   }
   const lol = {
     endpoint: session.endpoint,
-    headers,
+    headers: {
+      ...settings['request.globalHeaders'],
+      ...headers,
+    },
     credentials: settings['request.credentials'],
   }
 

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

@@ -37,12 +37,12 @@ import { parse } from 'graphql'
 import { Session } from './reducers'
 import { safely, prettify } from '../../utils'
 import * as queryString from 'query-string'
+import { parseHeaders } from '../../components/Playground/util/parseHeaders'
 
 function* setQueryFacts() {
   // debounce by 100 ms
   yield delay(100)
   const session: Session = yield select(getSelectedSession)
-
   const { schema } = yield schemaFetcher.fetch(session)
   try {
     const ast = parse(session.query)
@@ -128,10 +128,14 @@ function* runQueryAtPosition(action) {
 function* getSessionWithCredentials() {
   const session = yield select(getSelectedSession)
   const settings = yield select(getSettings)
+  const combinedHeaders = {
+    ...settings['request.globalHeaders'],
+    ...parseHeaders(session.headers),
+  }
 
   return {
     endpoint: session.endpoint,
-    headers: session.headers,
+    headers: JSON.stringify(combinedHeaders),
     credentials: settings['request.credentials'],
   }
 }

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

@@ -51,6 +51,7 @@ export const defaultSettings: ISettings = {
   'prettier.tabWidth': 2,
   'prettier.useTabs': false,
   'request.credentials': 'omit',
+  'request.globalHeaders': {},
   'schema.disableComments': true,
   'schema.polling.enable': true,
   'schema.polling.endpointFilter': '*localhost*',

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

@@ -27,6 +27,7 @@ export interface ISettings {
   ['prettier.tabWidth']: number
   ['prettier.useTabs']: boolean
   ['request.credentials']: 'omit' | 'include' | 'same-origin'
+  ['request.globalHeaders']: { [key: string]: string }
   ['schema.disableComments']: boolean
   ['schema.polling.enable']: boolean
   ['schema.polling.endpointFilter']: string