From 0c6a59282e399ebcc82b693a2075e40a03bc2034 Mon Sep 17 00:00:00 2001 From: Andrew Bastin Date: Sun, 17 Nov 2019 18:00:01 -0500 Subject: [PATCH 01/19] Added graphql as dependency --- package-lock.json | 13 +++++++++++++ package.json | 1 + 2 files changed, 14 insertions(+) diff --git a/package-lock.json b/package-lock.json index a63536c09..70e198c02 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5064,6 +5064,14 @@ "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.2.tgz", "integrity": "sha512-IItsdsea19BoLC7ELy13q1iJFNmd7ofZH5+X/pJr90/nRoPEX0DJo1dHDbgtYWOhJhcCgMDTOw84RZ72q6lB+Q==" }, + "graphql": { + "version": "14.5.8", + "resolved": "https://registry.npmjs.org/graphql/-/graphql-14.5.8.tgz", + "integrity": "sha512-MMwmi0zlVLQKLdGiMfWkgQD7dY/TUKt4L+zgJ/aR0Howebod3aNgP5JkgvAULiR2HPVZaP2VEElqtdidHweLkg==", + "requires": { + "iterall": "^1.2.2" + } + }, "gzip-size": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-5.1.1.tgz", @@ -5869,6 +5877,11 @@ "integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=", "dev": true }, + "iterall": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/iterall/-/iterall-1.2.2.tgz", + "integrity": "sha512-yynBb1g+RFUPY64fTrFv7nsjRrENBQJaX2UL+2Szc9REFrSNm1rpSXHGzhmAy7a9uv3vlvgBlXnf9RqmPH1/DA==" + }, "jest-worker": { "version": "24.9.0", "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-24.9.0.tgz", diff --git a/package.json b/package.json index d0da75bbf..773d8025b 100644 --- a/package.json +++ b/package.json @@ -26,6 +26,7 @@ "@nuxtjs/sitemap": "^2.0.1", "@nuxtjs/toast": "^3.3.0", "ace-builds": "^1.4.7", + "graphql": "^14.5.8", "nuxt": "^2.10.2", "v-tooltip": "^2.0.2", "vue-virtual-scroll-list": "^1.4.2", From d44b821a040af831231c004a2955219cd97a3eaf Mon Sep 17 00:00:00 2001 From: Andrew Bastin Date: Sun, 17 Nov 2019 19:48:29 -0500 Subject: [PATCH 02/19] Added GraphQL page --- pages/graphql.vue | 74 +++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 74 insertions(+) create mode 100644 pages/graphql.vue diff --git a/pages/graphql.vue b/pages/graphql.vue new file mode 100644 index 000000000..c32f8b234 --- /dev/null +++ b/pages/graphql.vue @@ -0,0 +1,74 @@ + + + + + From cffdd565227d7547b15f74793d2c3af8ef61d861 Mon Sep 17 00:00:00 2001 From: Andrew Bastin Date: Sun, 17 Nov 2019 19:48:53 -0500 Subject: [PATCH 03/19] Added GraphQL page to the sidebar --- layouts/default.vue | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/layouts/default.vue b/layouts/default.vue index 8fbc70f66..251587e37 100644 --- a/layouts/default.vue +++ b/layouts/default.vue @@ -110,6 +110,13 @@ > cloud + + cloud + Date: Mon, 18 Nov 2019 19:55:54 +0530 Subject: [PATCH 04/19] :zap: Added loader, changed webSocket icon --- layouts/default.vue | 20 ++++++- pages/graphql.vue | 62 +++++++++++--------- pages/index.vue | 139 +++++++++++++++++++++++++------------------- 3 files changed, 132 insertions(+), 89 deletions(-) diff --git a/layouts/default.vue b/layouts/default.vue index 251587e37..b1bd0ff12 100644 --- a/layouts/default.vue +++ b/layouts/default.vue @@ -108,7 +108,7 @@ :class="linkActive('/websocket')" v-tooltip.right="'WebSocket'" > - cloud + settings_input_hdmi
  • - + + cloud_download + +
    • + + + +
    +
    +
    + From 79a7b3c9853d99fad4ef4b71cf6ab3b16204e141 Mon Sep 17 00:00:00 2001 From: Liyas Thomas Date: Mon, 18 Nov 2019 22:20:18 +0530 Subject: [PATCH 05/19] :seedling: Error handlers --- pages/graphql.vue | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/pages/graphql.vue b/pages/graphql.vue index 533b56c20..6e2abadc2 100644 --- a/pages/graphql.vue +++ b/pages/graphql.vue @@ -54,6 +54,7 @@ export default { methods: { getSchema() { const startTime = Date.now(); + this.schemaString = "Loading..."; // Start showing the loading bar as soon as possible. // The nuxt axios module will hide it when the request is made. @@ -73,6 +74,14 @@ export default { this.$toast.info(`Finished in ${duration}ms`, { icon: "done" }); + }) + .catch(error => { + this.$nuxt.$loading.finish(); + this.schemaString = error + ". Check console for details."; + this.$toast.error(error + " (F12 for details)", { + icon: "error" + }); + console.log('Error', error); }); } } From 3db28e4f22446ebc49046aa20f1f30ad368457ce Mon Sep 17 00:00:00 2001 From: Andrew Bastin Date: Mon, 18 Nov 2019 14:34:00 -0500 Subject: [PATCH 06/19] Added GraphQL field component --- components/graphql/field.vue | 47 ++++++++++++++++++++++++++++++++++++ 1 file changed, 47 insertions(+) create mode 100644 components/graphql/field.vue diff --git a/components/graphql/field.vue b/components/graphql/field.vue new file mode 100644 index 000000000..6446f3f9a --- /dev/null +++ b/components/graphql/field.vue @@ -0,0 +1,47 @@ + + + + + From 5f3ca632cb5c72a33b170c49e1e4ca94013e9b79 Mon Sep 17 00:00:00 2001 From: Andrew Bastin Date: Mon, 18 Nov 2019 14:34:31 -0500 Subject: [PATCH 07/19] Added docs section with query,mutation and subscription lists --- pages/graphql.vue | 65 ++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 64 insertions(+), 1 deletion(-) diff --git a/pages/graphql.vue b/pages/graphql.vue index 6e2abadc2..ac7e8a5ee 100644 --- a/pages/graphql.vue +++ b/pages/graphql.vue @@ -30,6 +30,36 @@ }" /> + +
    + + + +
    +
    + +
    +
    + + + + +
    +
    + +
    +
    + + + +
    +
    + +
    +
    + +
    +     @@ -43,12 +73,16 @@ import AceEditor from "../components/ace-editor"; export default { components: { "pw-section": () => import("../components/section"), + "gql-field": () => import("../components/graphql/field"), Editor: AceEditor }, data() { return { url: "https://rickandmortyapi.com/graphql", - schemaString: "" + schemaString: "", + queryFields: [], + mutationFields: [], + subscriptionFields: [] }; }, methods: { @@ -69,6 +103,35 @@ export default { this.schemaString = gql.printSchema(schema, { commentDescriptions: true }); + + if (schema.getQueryType()) { + const fields = schema.getQueryType().getFields(); + const qFields = []; + for (const field in fields) { + qFields.push(fields[field]); + } + this.queryFields = qFields; + console.log(this.queryFields); + } + + if (schema.getMutationType()) { + const fields = schema.getMutationType().getFields(); + const mFields = []; + for (const field in fields) { + mFields.push(fields[field]); + } + this.mutationFields = mFields; + } + + if (schema.getSubscriptionType()) { + const fields = schema.getSubscriptionType().getFields(); + const sFields = []; + for (const field in fields) { + sFields.push(fields[field]); + } + this.subscriptionFields = sFields; + } + this.$nuxt.$loading.finish(); const duration = Date.now() - startTime; this.$toast.info(`Finished in ${duration}ms`, { From 6c4fbb501c218f28c6acc32de1a0dc6eecb4660c Mon Sep 17 00:00:00 2001 From: Andrew Bastin Date: Mon, 18 Nov 2019 14:58:37 -0500 Subject: [PATCH 08/19] Fixed margin mistake in field-desc --- components/graphql/field.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/graphql/field.vue b/components/graphql/field.vue index 6446f3f9a..03855565c 100644 --- a/components/graphql/field.vue +++ b/components/graphql/field.vue @@ -23,7 +23,7 @@ .field-desc { opacity: 0.7; - margin-bottom: 0.5em; + margin-top: 0.5em; } From edbb81d089b63a0ca529f7e5dc99000c1f788edd Mon Sep 17 00:00:00 2001 From: Andrew Bastin Date: Mon, 18 Nov 2019 15:14:26 -0500 Subject: [PATCH 09/19] Added a null guard for args field --- components/graphql/field.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/graphql/field.vue b/components/graphql/field.vue index 03855565c..144b1dcd5 100644 --- a/components/graphql/field.vue +++ b/components/graphql/field.vue @@ -35,7 +35,7 @@ export default { computed: { fieldString() { - const args = this.gqlField.args.reduce((acc, arg, index) => { + const args = (this.gqlField.args || []).reduce((acc, arg, index) => { return acc + `${arg.name}: ${arg.type.toString()}${(index !== this.gqlField.args.length - 1) ? ", " : ''}`; }, ''); const argsString = (args.length > 0) ? `(${args})` : ''; From 2d995b87b1de7f4490672c98bd6c9fd1fab1966f Mon Sep 17 00:00:00 2001 From: Andrew Bastin Date: Mon, 18 Nov 2019 15:17:07 -0500 Subject: [PATCH 10/19] Added GraphQL type component --- components/graphql/type.vue | 47 +++++++++++++++++++++++++++++++++++++ 1 file changed, 47 insertions(+) create mode 100644 components/graphql/type.vue diff --git a/components/graphql/type.vue b/components/graphql/type.vue new file mode 100644 index 000000000..44c0ed74a --- /dev/null +++ b/components/graphql/type.vue @@ -0,0 +1,47 @@ + + + + + From 34be6ce7956ab5b838c30f01647a8ab6ace467b4 Mon Sep 17 00:00:00 2001 From: Andrew Bastin Date: Mon, 18 Nov 2019 15:17:33 -0500 Subject: [PATCH 11/19] Added GraphQL types section in docs --- pages/graphql.vue | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/pages/graphql.vue b/pages/graphql.vue index ac7e8a5ee..ff6d3ae52 100644 --- a/pages/graphql.vue +++ b/pages/graphql.vue @@ -58,6 +58,13 @@ + + +
    +
    + +
    +
    @@ -74,6 +81,7 @@ export default { components: { "pw-section": () => import("../components/section"), "gql-field": () => import("../components/graphql/field"), + "gql-type": () => import("../components/graphql/type"), Editor: AceEditor }, data() { @@ -82,7 +90,8 @@ export default { schemaString: "", queryFields: [], mutationFields: [], - subscriptionFields: [] + subscriptionFields: [], + gqlTypes: [] }; }, methods: { @@ -132,6 +141,14 @@ export default { this.subscriptionFields = sFields; } + const typeMap = schema.getTypeMap(); + const types = []; + for (const type in typeMap) { + types.push(typeMap[type]); + } + this.gqlTypes = types; + console.log(this.gqlTypes); + this.$nuxt.$loading.finish(); const duration = Date.now() - startTime; this.$toast.info(`Finished in ${duration}ms`, { From 8e3542863ae583dd1e3a30bf530fd3851a5969b6 Mon Sep 17 00:00:00 2001 From: Andrew Bastin Date: Mon, 18 Nov 2019 21:53:13 -0500 Subject: [PATCH 12/19] Filtered unwanted type entries --- pages/graphql.vue | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/pages/graphql.vue b/pages/graphql.vue index ff6d3ae52..70a682ce1 100644 --- a/pages/graphql.vue +++ b/pages/graphql.vue @@ -143,8 +143,15 @@ export default { const typeMap = schema.getTypeMap(); const types = []; + + const queryTypeName = schema.getQueryType() ? schema.getQueryType().name : ''; + const mutationTypeName = schema.getMutationType() ? schema.getMutationType().name : ''; + const subscriptionTypeName = schema.getSubscriptionType() ? schema.getSubscriptionType().name : ''; + for (const type in typeMap) { - types.push(typeMap[type]); + if (!typeMap[type].name.startsWith("__") && !(([queryTypeName, mutationTypeName, subscriptionTypeName]).includes(typeMap[type].name)) && typeMap[type] instanceof gql.GraphQLObjectType) { + types.push(typeMap[type]); + } } this.gqlTypes = types; console.log(this.gqlTypes); From eca1dc8e662491b0266029883493ea681b335256 Mon Sep 17 00:00:00 2001 From: Liyas Thomas Date: Tue, 19 Nov 2019 08:55:57 +0530 Subject: [PATCH 13/19] Moved Cocs section to right sidebar (will fix overflow issue later today) + Basic lint --- components/graphql/field.vue | 17 +++- components/graphql/type.vue | 6 +- pages/graphql.vue | 182 ++++++++++++++++++++++------------- 3 files changed, 128 insertions(+), 77 deletions(-) diff --git a/components/graphql/field.vue b/components/graphql/field.vue index 144b1dcd5..971c9eddb 100644 --- a/components/graphql/field.vue +++ b/components/graphql/field.vue @@ -36,12 +36,19 @@ export default { computed: { fieldString() { const args = (this.gqlField.args || []).reduce((acc, arg, index) => { - return acc + `${arg.name}: ${arg.type.toString()}${(index !== this.gqlField.args.length - 1) ? ", " : ''}`; - }, ''); - const argsString = (args.length > 0) ? `(${args})` : ''; + return ( + acc + + `${arg.name}: ${arg.type.toString()}${ + index !== this.gqlField.args.length - 1 ? ", " : "" + }` + ); + }, ""); + const argsString = args.length > 0 ? `(${args})` : ""; - return `${this.gqlField.name}${argsString}: ${this.gqlField.type.toString()}`; + return `${ + this.gqlField.name + }${argsString}: ${this.gqlField.type.toString()}`; } } -} +}; diff --git a/components/graphql/type.vue b/components/graphql/type.vue index 44c0ed74a..383267215 100644 --- a/components/graphql/type.vue +++ b/components/graphql/type.vue @@ -1,8 +1,8 @@ - +