Updated field, type and graphql page to use the new argument and typelink components

components/graphql/field.vue

@@ -1,6 +1,18 @@
 <template>
   <div class="field-box">
-    <div class="field-title">{{ fieldString }}</div>
+    <div class="field-title">
+      {{ fieldName }}
+      <span v-if="fieldArgs.length > 0">
+        (
+          <span v-for="(field, index) in fieldArgs" :key="index">
+            {{ field.name }}: <typelink :gqlType="field.type" :jumpTypeCallback="jumpTypeCallback" />
+            <span v-if="index !== fieldArgs.length - 1">
+              ,
+            </span>
+          </span>
+        )
+      </span>: <typelink :gqlType="gqlField.type" :jumpTypeCallback="jumpTypeCallback" />
+    </div>
     <div class="field-desc" v-if="gqlField.description">
       {{ gqlField.description }}
     </div>
@@ -8,6 +20,7 @@
     <div class="field-deprecated" v-if="gqlField.isDeprecated">
       DEPRECATED
     </div>
+
   </div>
 </template>
 
@@ -36,9 +49,17 @@
 </style>
 
 <script>
+import typelink from './typelink';
+
 export default {
+  components: {
+    typelink: typelink
+  },
+
   props: {
-    gqlField: Object
+    gqlField: Object,
+
+    jumpTypeCallback: Function
   },
 
   computed: {
@@ -56,6 +77,14 @@ export default {
       return `${
         this.gqlField.name
       }${argsString}: ${this.gqlField.type.toString()}`;
+    },
+
+    fieldName() {
+      return this.gqlField.name;
+    },
+
+    fieldArgs() {
+      return this.gqlField.args || [];
     }
   }
 };