diff --git a/pages/graphql.vue b/pages/graphql.vue index ddf6353f5..2e5527e21 100644 --- a/pages/graphql.vue +++ b/pages/graphql.vue @@ -129,7 +129,7 @@ file_copy', downloadButton: 'get_app', doneButton: 'done', @@ -373,6 +371,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 @@ -412,13 +426,13 @@ export default { return t }, copySchema() { - this.$refs.copySchemaCode.innerHTML = this.doneButton - const aux = document.createElement("textarea") - aux.innerText = this.schemaString - document.body.appendChild(aux) - aux.select() - document.execCommand("copy") - document.body.removeChild(aux) + this.$refs.copySchemaCode.innerHTML = this.doneButton; + const aux = document.createElement("textarea"); + aux.innerText = this.schema; + document.body.appendChild(aux); + aux.select(); + document.execCommand("copy"); + document.body.removeChild(aux); this.$toast.success(this.$t("copied_to_clipboard"), { icon: "done", }) @@ -438,13 +452,13 @@ export default { setTimeout(() => (this.$refs.copyQueryButton.innerHTML = this.copyButton), 1000) }, copyResponse() { - this.$refs.copyResponseButton.innerHTML = this.doneButton - const aux = document.createElement("textarea") - aux.innerText = this.responseString - document.body.appendChild(aux) - aux.select() - document.execCommand("copy") - document.body.removeChild(aux) + this.$refs.copyResponseButton.innerHTML = this.doneButton; + const aux = document.createElement("textarea"); + aux.innerText = this.response; + document.body.appendChild(aux); + aux.select(); + document.execCommand("copy"); + document.body.removeChild(aux); this.$toast.success(this.$t("copied_to_clipboard"), { icon: "done", }) @@ -478,7 +492,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 @@ -495,9 +509,10 @@ export default { } }, async getSchema() { - const startTime = Date.now() - this.schemaString = this.$t("loading") - this.$store.state.postwoman.settings.SCROLL_INTO_ENABLED && this.scrollInto("schema") + const startTime = Date.now(); + this.schema = this.$t("loading"); + this.$store.state.postwoman.settings.SCROLL_INTO_ENABLED && + this.scrollInto("schema"); // Start showing the loading bar as soon as possible. // The nuxt axios module will hide it when the request is made. @@ -523,8 +538,6 @@ export default { data: query, } - // console.log(reqOptions); - const reqConfig = this.$store.state.postwoman.settings.PROXY_ENABLED ? { method: "post", @@ -538,10 +551,15 @@ export default { const data = this.$store.state.postwoman.settings.PROXY_ENABLED ? res.data : res - const schema = gql.buildClientSchema(data.data.data) - this.schemaString = gql.printSchema(schema, { - commentDescriptions: true, - }) + const schema = gql.buildClientSchema(data.data.data); + this.schema = gql.printSchema(schema, { + commentDescriptions: true + }); + console.log( + gql.printSchema(schema, { + commentDescriptions: true + }) + ); if (schema.getQueryType()) { const fields = schema.getQueryType().getFields() @@ -596,8 +614,8 @@ export default { icon: "done", }) } catch (error) { - this.$nuxt.$loading.finish() - this.schemaString = `${error}. ${this.$t("check_console_details")}` + this.$nuxt.$loading.finish(); + this.schema = `${error}. ${this.$t("check_console_details")}`; this.$toast.error(`${error} ${this.$t("f12_details")}`, { icon: "error", }) @@ -609,15 +627,15 @@ export default { this.responseBodyMaxLines = this.responseBodyMaxLines == Infinity ? 16 : Infinity }, downloadResponse() { - const dataToWrite = JSON.stringify(this.schemaString, null, 2) - const file = new Blob([dataToWrite], { type: "application/json" }) - const a = document.createElement("a") - const url = URL.createObjectURL(file) - a.href = url - a.download = `${this.url} on ${Date()}.graphql`.replace(/\./g, "[dot]") - document.body.appendChild(a) - a.click() - this.$refs.downloadResponse.innerHTML = this.doneButton + 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); + a.href = url; + a.download = `${this.url} on ${Date()}.graphql`.replace(/\./g, "[dot]"); + document.body.appendChild(a); + a.click(); + this.$refs.downloadResponse.innerHTML = this.doneButton; this.$toast.success(this.$t("download_started"), { icon: "done", }) diff --git a/store/state.js b/store/state.js index 1df17674a..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