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>