diff --git a/pages/graphql.vue b/pages/graphql.vue
index 7e9e434f8..ce4be9bdf 100644
--- a/pages/graphql.vue
+++ b/pages/graphql.vue
@@ -11,15 +11,19 @@
type="url"
v-model="url"
spellcheck="false"
- @keyup.enter="getSchema()"
+ @keyup.enter="onPollSchemaClick()"
/>
-
@@ -356,6 +360,8 @@ export default {
expandResponse: false,
responseBodyMaxLines: 16,
graphqlFieldsFilterText: undefined,
+ isPollingSchema: false,
+ timeoutSubscription: null,
settings: {
SCROLL_INTO_ENABLED:
@@ -455,6 +461,12 @@ export default {
this.getDocsFromSchema(gqlSchema)
}
},
+ beforeRouteLeave(_to, _from, next) {
+ this.isPollingSchema = false
+ if (this.timeoutSubscription) clearTimeout(this.timeoutSubscription)
+
+ next()
+ },
methods: {
isGqlTypeHighlighted({ gqlType }) {
if (!this.graphqlFieldsFilterText) return false
@@ -681,6 +693,79 @@ export default {
}
this.gqlTypes = types
},
+ async onPollSchemaClick() {
+ if (this.isPollingSchema) {
+ this.isPollingSchema = false
+ } else {
+ this.isPollingSchema = true
+ await this.getSchema()
+
+ this.pollSchema()
+ }
+ },
+ async pollSchema() {
+ if (!this.isPollingSchema) return
+
+ this.$nuxt.$loading.start()
+
+ try {
+ const query = JSON.stringify({
+ query: gql.getIntrospectionQuery(),
+ })
+
+ let headers = {}
+ this.headers.forEach(({ key, value }) => {
+ headers[key] = value
+ })
+
+ const reqOptions = {
+ method: "post",
+ url: this.url,
+ headers: {
+ ...headers,
+ "content-type": "application/json",
+ },
+ data: query,
+ }
+
+ const data = await sendNetworkRequest(reqOptions, this.$store)
+
+ // HACK : Temporary trailing null character issue from the extension fix
+ const response = new TextDecoder("utf-8").decode(data.data).replace(/\0+$/, "")
+ const introspectResponse = JSON.parse(response)
+
+ const schema = gql.buildClientSchema(introspectResponse.data)
+
+ this.$store.commit("setGQLState", {
+ value: JSON.stringify(introspectResponse.data),
+ attribute: "schemaIntrospection",
+ })
+
+ this.schema = gql.printSchema(schema, {
+ commentDescriptions: true,
+ })
+
+ this.getDocsFromSchema(schema)
+
+ this.$refs.queryEditor.setValidationSchema(schema)
+ this.$nuxt.$loading.finish()
+ } catch (error) {
+ this.$nuxt.$loading.finish()
+
+ this.schema = `${error}. ${this.$t("check_console_details")}`
+ this.$toast.error(
+ `${this.$t("graphql_introspect_failed")} ${this.$t("check_graphql_valid")}`,
+ {
+ icon: "error",
+ }
+ )
+ console.log("Error", error)
+ }
+
+ this.$nuxt.$loading.finish()
+
+ if (this.isPollingSchema) this.timeoutSubscription = setTimeout(this.pollSchema, 7000)
+ },
async getSchema() {
const startTime = Date.now()