From 21c6c07b3970252f10e3a5269e8372991b7dd2ca Mon Sep 17 00:00:00 2001 From: Dmitry Yankowski Date: Mon, 24 Feb 2020 16:12:02 -0500 Subject: [PATCH 1/9] Save GraphQL schema and response in state Allows the user to go to the settings page, and back to the GraphQL page, without having to re-request the schema or response. --- pages/graphql.vue | 43 +++++++++++++++++++++++++++------------ store/state.js | 52 ++++++++++++++++++++++++----------------------- 2 files changed, 57 insertions(+), 38 deletions(-) diff --git a/pages/graphql.vue b/pages/graphql.vue index fe21b2674..7430500f3 100644 --- a/pages/graphql.vue +++ b/pages/graphql.vue @@ -140,7 +140,7 @@ file_copy', downloadButton: 'get_app', doneButton: 'done', @@ -404,6 +402,22 @@ export default { this.$store.commit("setGQLState", { value, attribute: "query" }); } }, + response: { + get() { + return this.$store.state.gql.response; + }, + set(value) { + this.$store.commit("setGQLState", { value, attribute: "response" }); + } + }, + schema: { + get() { + return this.$store.state.gql.schema; + }, + set(value) { + this.$store.commit("setGQLState", { value, attribute: "schema" }); + } + }, variableString: { get() { return this.$store.state.gql.variablesJSONString; @@ -445,7 +459,7 @@ export default { copySchema() { this.$refs.copySchemaCode.innerHTML = this.doneButton; const aux = document.createElement("textarea"); - aux.innerText = this.schemaString; + aux.innerText = this.schema; document.body.appendChild(aux); aux.select(); document.execCommand("copy"); @@ -477,7 +491,7 @@ export default { copyResponse() { this.$refs.copyResponseButton.innerHTML = this.doneButton; const aux = document.createElement("textarea"); - aux.innerText = this.responseString; + aux.innerText = this.response; document.body.appendChild(aux); aux.select(); document.execCommand("copy"); @@ -519,7 +533,7 @@ export default { const data = await sendNetworkRequest(reqOptions, this.$store); - this.responseString = JSON.stringify(data.data, null, 2); + this.response = JSON.stringify(data.data, null, 2); this.$nuxt.$loading.finish(); const duration = Date.now() - startTime; @@ -537,7 +551,7 @@ export default { }, async getSchema() { const startTime = Date.now(); - this.schemaString = this.$t("loading"); + this.schema = this.$t("loading"); this.$store.state.postwoman.settings.SCROLL_INTO_ENABLED && this.scrollInto("schema"); @@ -565,8 +579,6 @@ export default { data: query }; - // console.log(reqOptions); - const reqConfig = this.$store.state.postwoman.settings.PROXY_ENABLED ? { method: "post", @@ -584,9 +596,14 @@ export default { : res; const schema = gql.buildClientSchema(data.data.data); - this.schemaString = gql.printSchema(schema, { + this.schema = gql.printSchema(schema, { commentDescriptions: true }); + console.log( + gql.printSchema(schema, { + commentDescriptions: true + }) + ); if (schema.getQueryType()) { const fields = schema.getQueryType().getFields(); @@ -648,7 +665,7 @@ export default { }); } catch (error) { this.$nuxt.$loading.finish(); - this.schemaString = `${error}. ${this.$t("check_console_details")}`; + this.schema = `${error}. ${this.$t("check_console_details")}`; this.$toast.error(`${error} ${this.$t("f12_details")}`, { icon: "error" }); @@ -661,7 +678,7 @@ export default { this.responseBodyMaxLines == Infinity ? 16 : Infinity; }, downloadResponse() { - const dataToWrite = JSON.stringify(this.schemaString, null, 2); + const dataToWrite = JSON.stringify(this.schema, null, 2); const file = new Blob([dataToWrite], { type: "application/json" }); const a = document.createElement("a"); const url = URL.createObjectURL(file); diff --git a/store/state.js b/store/state.js index 25d04f6fd..271cf48ef 100644 --- a/store/state.js +++ b/store/state.js @@ -1,38 +1,40 @@ export default () => ({ request: { - method: "GET", - url: "https://httpbin.org", - path: "/get", - label: "", - auth: "None", - httpUser: "", - httpPassword: "", - passwordFieldType: "password", - bearerToken: "", + method: 'GET', + url: 'https://httpbin.org', + path: '/get', + label: '', + auth: 'None', + httpUser: '', + httpPassword: '', + passwordFieldType: 'password', + bearerToken: '', headers: [], params: [], bodyParams: [], - rawParams: "", + rawParams: '', rawInput: false, - requestType: "", - contentType: "" + requestType: '', + contentType: '', }, gql: { - url: "https://rickandmortyapi.com/graphql", + url: 'https://rickandmortyapi.com/graphql', headers: [], - variablesJSONString: "{}", - query: "" + schema: '', + variablesJSONString: '{}', + query: '', + response: '' }, oauth2: { tokens: [], tokenReqs: [], - tokenReqSelect: "", - tokenReqName: "", - accessTokenName: "", - oidcDiscoveryUrl: "", - authUrl: "", - accessTokenUrl: "", - clientId: "", - scope: "" - } -}); + tokenReqSelect: '', + tokenReqName: '', + accessTokenName: '', + oidcDiscoveryUrl: '', + authUrl: '', + accessTokenUrl: '', + clientId: '', + scope: '', + }, +}) \ No newline at end of file From 403254a983986b8afa20435b0a48f496c06c9637 Mon Sep 17 00:00:00 2001 From: Dmitry Yankowski Date: Mon, 24 Feb 2020 16:16:06 -0500 Subject: [PATCH 2/9] Change from v-model to value as this is not set by the user --- pages/graphql.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pages/graphql.vue b/pages/graphql.vue index 7430500f3..a430d4ff0 100644 --- a/pages/graphql.vue +++ b/pages/graphql.vue @@ -140,7 +140,7 @@ {{ label }} - {{ isCollapsed ? "expand_more" : "expand_less" }} + {{ isCollapsed(label) ? "expand_more" : "expand_less" }} -
+
@@ -26,15 +29,12 @@ export default { computed: { frameColorsEnabled() { return this.$store.state.postwoman.settings.FRAME_COLORS_ENABLED || false; + }, + sectionString() { + return `${this.$route.path}/${this.label}`; } }, - data() { - return { - isCollapsed: false - }; - }, - props: { label: { type: String, @@ -49,7 +49,15 @@ export default { collapse({ target }) { const parent = target.parentNode.parentNode; parent.querySelector(".collapsible").classList.toggle("hidden"); - this.isCollapsed = !this.isCollapsed; + // Save collapsed section to local state + this.$store.commit("setCollapsedSection", this.sectionString); + }, + isCollapsed(label) { + return ( + this.$store.state.theme.collapsedSections.includes( + this.sectionString + ) || false + ); } } }; diff --git a/pages/graphql.vue b/pages/graphql.vue index a430d4ff0..465e5fbdb 100644 --- a/pages/graphql.vue +++ b/pages/graphql.vue @@ -6,12 +6,7 @@
  • - +
  • @@ -31,11 +26,7 @@
    -
    @@ -60,7 +51,7 @@ @input=" $store.commit('setGQLHeaderKey', { index, - value: $event + value: $event, }) " autofocus @@ -74,7 +65,7 @@ @change=" $store.commit('setGQLHeaderValue', { index, - value: $event.target.value + value: $event.target.value, }) " autofocus @@ -112,9 +103,7 @@ @click="ToggleExpandResponse" ref="ToggleExpandResponse" v-tooltip="{ - content: !expandResponse - ? $t('expand_response') - : $t('collapse_response') + content: !expandResponse ? $t('expand_response') : $t('collapse_response'), }" > @@ -149,20 +138,16 @@ autoScrollEditorIntoView: true, readOnly: true, showPrintMargin: false, - useWorker: false + useWorker: false, }" /> -
    +
    -
    @@ -51,7 +61,7 @@ @input=" $store.commit('setGQLHeaderKey', { index, - value: $event, + value: $event }) " autofocus @@ -65,7 +75,7 @@ @change=" $store.commit('setGQLHeaderValue', { index, - value: $event.target.value, + value: $event.target.value }) " autofocus @@ -103,7 +113,9 @@ @click="ToggleExpandResponse" ref="ToggleExpandResponse" v-tooltip="{ - content: !expandResponse ? $t('expand_response') : $t('collapse_response'), + content: !expandResponse + ? $t('expand_response') + : $t('collapse_response') }" > @@ -138,7 +150,7 @@ autoScrollEditorIntoView: true, readOnly: true, showPrintMargin: false, - useWorker: false, + useWorker: false }" /> @@ -169,7 +181,7 @@ fontSize: '16px', autoScrollEditorIntoView: true, showPrintMargin: false, - useWorker: false, + useWorker: false }" /> @@ -184,7 +196,7 @@ fontSize: '16px', autoScrollEditorIntoView: true, showPrintMargin: false, - useWorker: false, + useWorker: false }" /> @@ -213,7 +225,7 @@ autoScrollEditorIntoView: true, readOnly: true, showPrintMargin: false, - useWorker: false, + useWorker: false }" /> @@ -233,7 +245,10 @@
    - +
    @@ -249,7 +264,10 @@
    - +
    @@ -265,7 +283,10 @@
    - +
    @@ -280,8 +301,15 @@ {{ $t("types") }}
    -
    - +
    +
    @@ -314,17 +342,17 @@ diff --git a/pages/index.vue b/pages/index.vue index 47ac184d5..352499042 100644 --- a/pages/index.vue +++ b/pages/index.vue @@ -187,6 +187,7 @@ id="url" name="url" type="url" + spellcheck="false" v-model="url" />
    • @@ -197,6 +198,7 @@ id="path" name="path" v-model="path" + spellcheck="false" @input="pathInputHandler" /> @@ -207,6 +209,7 @@ name="label" type="text" v-model="label" + spellcheck="false" :placeholder="$t('optional')" /> diff --git a/pages/realtime.vue b/pages/realtime.vue index 9e97c4d06..2acc9a62a 100644 --- a/pages/realtime.vue +++ b/pages/realtime.vue @@ -11,6 +11,7 @@ Date: Tue, 25 Feb 2020 02:04:10 -0500 Subject: [PATCH 9/9] Re-trigger build --- components/section.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/section.vue b/components/section.vue index 056d7ed4b..3da3d819d 100644 --- a/components/section.vue +++ b/components/section.vue @@ -49,7 +49,7 @@ export default { collapse({ target }) { const parent = target.parentNode.parentNode; parent.querySelector(".collapsible").classList.toggle("hidden"); - // Save collapsed section to local state + // Save collapsed section into the collapsedSections array this.$store.commit("setCollapsedSection", this.sectionString); }, isCollapsed(label) {