graphql: show enums and interfaces

make scalars not clickable

components/graphql/type.vue

@@ -2,11 +2,25 @@
   <div :id="`type_${gqlType.name}`" class="p-2 m-2">
     <div class="font-bold type-title" :class="{ 'type-highlighted': isHighlighted }">
       <span v-if="isInput" class="text-acColor font-normal">input </span>
+      <span v-else-if="isInterface" class="text-acColor font-normal">interface </span>
+      <span v-else-if="isEnum" class="text-acColor font-normal">enum </span>
       {{ gqlType.name }}
     </div>
     <div class="mt-2 text-fgLightColor type-desc" v-if="gqlType.description">
       {{ gqlType.description }}
     </div>
+    <div v-if="interfaces.length > 0" class="mb-2">
+      <h5>{{ $t("interfaces") }}</h5>
+      <div v-for="gqlInterface in interfaces" :key="gqlInterface.name" class="m-2 ml-4">
+        <typelink :gqlType="gqlInterface" :jumpTypeCallback="jumpTypeCallback" />
+      </div>
+    </div>
+    <div v-if="children.length > 0" class="mb-2">
+      <h5>{{ $t("children") }}</h5>
+      <div v-for="child in children" :key="child.name" class="m-2 ml-4">
+        <typelink :gqlType="child" :jumpTypeCallback="jumpTypeCallback" />
+      </div>
+    </div>
     <div v-if="gqlType.getFields">
       <h5>{{ $t("fields") }}</h5>
       <div v-for="field in gqlType.getFields()" :key="field.name">
@@ -17,6 +31,10 @@
         />
       </div>
     </div>
+    <div v-if="isEnum">
+      <h5>{{ $t("values") }}</h5>
+      <div v-for="value in gqlType.getValues()" class="m-4" v-text="value.name" />
+    </div>
   </div>
 </template>
 
@@ -27,11 +45,12 @@
 </style>
 
 <script>
-import { GraphQLInputObjectType } from "graphql"
+import { GraphQLEnumType, GraphQLInputObjectType, GraphQLInterfaceType } from "graphql"
 
 export default {
   props: {
     gqlType: {},
+    gqlTypes: Array,
     jumpTypeCallback: Function,
     isHighlighted: { type: Boolean, default: false },
     highlightedFields: { type: Array, default: () => [] },
@@ -45,6 +64,21 @@ export default {
     isInput() {
       return this.gqlType instanceof GraphQLInputObjectType
     },
+    isInterface() {
+      return this.gqlType instanceof GraphQLInterfaceType
+    },
+    isEnum() {
+      return this.gqlType instanceof GraphQLEnumType
+    },
+    interfaces() {
+      let type = this.gqlType
+      return (type.getInterfaces && type.getInterfaces()) || []
+    },
+    children() {
+      return this.gqlTypes.filter(
+        (type) => type.getInterfaces && type.getInterfaces().includes(this.gqlType)
+      )
+    },
   },
 }
 </script>

components/graphql/typelink.vue

@@ -1,10 +1,16 @@
 <template>
-  <span class="font-mono font-normal cursor-pointer text-acColor" @click="jumpToType">
+  <span
+    :class="{ 'cursor-pointer': !isScalar }"
+    class="font-mono font-normal text-acColor"
+    @click="jumpToType"
+  >
     {{ typeString }}
   </span>
 </template>
 
 <script>
+import { GraphQLScalarType } from "graphql"
+
 export default {
   props: {
     gqlType: null,
@@ -16,12 +22,21 @@ export default {
     typeString() {
       return this.gqlType.toString()
     },
+    isScalar() {
+      return this.resolveRootType(this.gqlType) instanceof GraphQLScalarType
+    },
   },
 
   methods: {
     jumpToType() {
+      if (this.isScalar) return
       this.jumpTypeCallback(this.gqlType)
     },
+    resolveRootType(type) {
+      let t = type
+      while (t.ofType != null) t = t.ofType
+      return t
+    },
   },
 }
 </script>

lang/en-US.json

@@ -199,7 +199,10 @@
   "docs": "Docs",
   "reset_default": "Reset to default",
   "fields": "FIELDS",
+  "interfaces": "INTERFACES",
+  "children": "CHILDREN",
   "deprecated": "DEPRECATED",
+  "values": "VALUES",
   "add_one_header": "(add at least one header)",
   "add_one_parameter": "(add at least one parameter)",
   "header_count": "header {count}",

pages/graphql.vue

@@ -364,6 +364,7 @@
                   <div v-for="type in filteredGraphqlTypes" :key="type.name">
                     <type
                       :gqlType="type"
+                      :gqlTypes="graphqlTypes"
                       :isHighlighted="isGqlTypeHighlighted({ gqlType: type })"
                       :highlightedFields="getGqlTypeHighlightedFields({ gqlType: type })"
                       :jumpTypeCallback="handleJumpToType"
@@ -740,14 +741,17 @@ export default {
         ? schema.getSubscriptionType().name
         : ""
 
-      for (const type in typeMap) {
+      for (const typeName in typeMap) {
+        let type = typeMap[typeName]
         if (
-          !typeMap[type].name.startsWith("__") &&
-          ![queryTypeName, mutationTypeName, subscriptionTypeName].includes(typeMap[type].name) &&
-          (typeMap[type] instanceof gql.GraphQLObjectType ||
-            typeMap[type] instanceof gql.GraphQLInputObjectType)
+          !type.name.startsWith("__") &&
+          ![queryTypeName, mutationTypeName, subscriptionTypeName].includes(type.name) &&
+          (type instanceof gql.GraphQLObjectType ||
+            type instanceof gql.GraphQLInputObjectType ||
+            type instanceof gql.GraphQLEnumType ||
+            type instanceof gql.GraphQLInterfaceType)
         ) {
-          types.push(typeMap[type])
+          types.push(type)
         }
       }
       this.graphqlTypes = types
@@ -828,7 +832,6 @@ export default {
       }
 
       this.$nuxt.$loading.finish()
-
     },
     async getSchema() {
       const startTime = Date.now()