From d1c6c3cbe7d914fc7cb9af3d787f741c7a88a4fa Mon Sep 17 00:00:00 2001 From: Maximilian Rieger Date: Thu, 25 Jan 2018 14:18:36 +0100 Subject: [PATCH 1/3] Added Headers input and button Send extra headers with fetch --- css/chromeiql.css | 23 +++++++++++- js/chromeiql.jsx | 89 +++++++++++++++++++++++++++++++++++++++++++---- 2 files changed, 104 insertions(+), 8 deletions(-) diff --git a/css/chromeiql.css b/css/chromeiql.css index f5cf1a7..b19dffb 100644 --- a/css/chromeiql.css +++ b/css/chromeiql.css @@ -18,7 +18,7 @@ body { display: flex; } -#url-bar { +#input-bar { width: 600px; position: absolute; text-align: center; @@ -47,3 +47,24 @@ body { #url-save-button { padding: 6px 12px; } + +#headers-box, #headers-save-button { + height: 30px; + box-sizing: border-box; + margin: 3px auto; +} + +#headers-box { + width: 500px; + margin-right: 2px; + border-radius: 4px; + margin-right: 2px; + padding: 0 4px; + border: 1px none; + border-style: inset; + color: #555; +} + +#url-save-button { + padding: 6px 12px; +} diff --git a/js/chromeiql.jsx b/js/chromeiql.jsx index a4de511..8319cfd 100644 --- a/js/chromeiql.jsx +++ b/js/chromeiql.jsx @@ -7,6 +7,9 @@ import $ from 'jquery'; // Buffer for endpoint entry value let chromeiqlEndpoint; +// Buffer for headers value +let chromeiqlHeaders; + // Parse the search string to get url parameters. const search = window.location.search; let parameters = {}; @@ -49,12 +52,45 @@ function updateURL() { history.replaceState(null, null, newSearch); } +function createHeaders(headers) { + const retHeaders = new Headers({'Content-Type': 'application/json'}); + if (headers) { + let hconv = string2Header(headers); + for (let header of hconv) { + if (header.length !== 2) continue; + retHeaders.append(header[0], header[1]); + } + } + return retHeaders; +} + +const headers2String = (headers) => { + if (headers) { + let headerStr = ''; + for(let header of headers.entries()) { + headerStr += `${header[0]}:${header[1]};` + } + return headerStr; + } +} + +const string2Header = (str) => { + if (str && typeof str === 'string') { + let headers = str.split(';').filter(h => h !== '').reduce((ph, ch, ci) => { + const values = ch.split(':'); + ph.append(values[0], values[1]); + return ph; + }, new Headers()); + return headers; + } +} + // Defines a GraphQL fetcher using the fetch API. -function graphQLFetcher(endpoint) { +function graphQLFetcher(endpoint, headers = null) { return function(graphQLParams) { return fetch(endpoint, { method: 'post', - headers: { 'Content-Type': 'application/json' }, + headers: headers ? createHeaders(headers) : { 'Content-Type': 'application/json' }, body: JSON.stringify(graphQLParams), credentials: 'include', }).then(response => response.json()); @@ -67,39 +103,53 @@ class ChromeiQL extends React.Component { this.state = { prevEndpoint: null, currEndpoint: this.props.endpoint, + prevHeaders: null, + currHeaders: this.props.headers, }; this.setEndpoint = this.setEndpoint.bind(this) this.updateEndpoint = this.updateEndpoint.bind(this) + this.setHeaders = this.setHeaders.bind(this) + this.updateHeaders = this.updateHeaders.bind(this) } render() { const endpoint = this.state.currEndpoint + const headers = this.state.currHeaders let graphqlConsole = null; if (endpoint) { + graphqlConsole = ; } - // If we have changed endpoints just now... if (this.state.currEndpoint !== this.state.prevEndpoint) { // then we shall re-execute the query after render setTimeout(() => $('button.execute-button').click(), 500); } + // If we have changed endpoints just now... + if (this.state.currHeaders !== this.state.prevHeaders) { + // then we shall re-execute the query after render + setTimeout(() => $('button.execute-button').click(), 500); + } return (
-
+ { graphqlConsole }
@@ -128,12 +178,37 @@ class ChromeiQL extends React.Component { updateEndpoint(e) { chromeiqlEndpoint = e.target.value; } + + setHeaders() { + const newHeaders = chromeiqlHeaders; + const setState = this.setState.bind(this); + const currState = this.state; + console.log('setHeaders state', currState); + console.log('setHeaders headers', newHeaders); + chrome.storage.local.set( + { "chromeiqlHeaders": newHeaders }, + () => { + if (!chrome.runtime.lastError) { + // Move current endpoint to previous, and set current endpoint to new. + setState({ + prevHeaders: currState.currHeaders, + currHeaders: newHeaders + }); + } + } + ); + } + + updateHeaders(e) { + chromeiqlHeaders = e.target.value; + } } -chrome.storage.local.get("chromeiqlEndpoint", (storage) => + +chrome.storage.local.get(["chromeiqlEndpoint", "chromeiqlHeaders"], (storage) => // Render into the body. ReactDOM.render( - , + , document.body ) ); From de4397f2ab99c6a69420c424a0505eb3b2c21a22 Mon Sep 17 00:00:00 2001 From: Maximilian Rieger Date: Thu, 25 Jan 2018 14:42:40 +0100 Subject: [PATCH 2/3] Added JSON parsing to string2Header to allow json style headers removed unecessary headers2String function --- js/chromeiql.jsx | 16 ++++------------ 1 file changed, 4 insertions(+), 12 deletions(-) diff --git a/js/chromeiql.jsx b/js/chromeiql.jsx index 8319cfd..c9d2789 100644 --- a/js/chromeiql.jsx +++ b/js/chromeiql.jsx @@ -64,18 +64,11 @@ function createHeaders(headers) { return retHeaders; } -const headers2String = (headers) => { - if (headers) { - let headerStr = ''; - for(let header of headers.entries()) { - headerStr += `${header[0]}:${header[1]};` - } - return headerStr; - } -} - const string2Header = (str) => { if (str && typeof str === 'string') { + try { + return new Headers(JSON.parse(str)); + } catch (_) {} let headers = str.split(';').filter(h => h !== '').reduce((ph, ch, ci) => { const values = ch.split(':'); ph.append(values[0], values[1]); @@ -183,8 +176,7 @@ class ChromeiQL extends React.Component { const newHeaders = chromeiqlHeaders; const setState = this.setState.bind(this); const currState = this.state; - console.log('setHeaders state', currState); - console.log('setHeaders headers', newHeaders); + chrome.storage.local.set( { "chromeiqlHeaders": newHeaders }, () => { From 0c65f4888e62f401cd7b92ad7ba1ca19b05f79b7 Mon Sep 17 00:00:00 2001 From: Maximilian Rieger Date: Thu, 25 Jan 2018 15:02:29 +0100 Subject: [PATCH 3/3] added header format description to readme.md --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index 88e3a16..eff5730 100644 --- a/README.md +++ b/README.md @@ -3,3 +3,5 @@ Making the great [GraphiQL tool](https://github.com/graphql/graphiql/) available anywhere as a Chrome extension. Based on the [GraphiQL example code](https://github.com/graphql/graphiql/tree/master/example). + +With option to add headers. Header format is JSON or "HEADER_NAME:HEADER_VALUE;"