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>