diff --git a/components/graphql/argument.vue b/components/graphql/argument.vue
new file mode 100644
index 000000000..335381a41
--- /dev/null
+++ b/components/graphql/argument.vue
@@ -0,0 +1,44 @@
+<template>
+  <span>
+    <span class="argumentName">
+      {{ argName }}
+    </span>
+    :
+    <typelink 
+      :type="argType"
+      :jumpTypeCallback="jumpCallback"
+    />
+  </span>
+</template>
+
+<style>
+</style>
+
+<script>
+import typelink from './typelink';
+
+export default {
+  components: {
+    typelink: typelink
+  },
+
+  props: {
+    gqlArg: Object
+  },
+
+  computed: {
+    argName() {
+      return this.gqlArg.name;
+    },
+    argType() {
+      return this.gqlArg.type;
+    }
+  },
+
+  methods: {
+    jumpCallback(typeName) {
+
+    }
+  }
+}
+</script>
diff --git a/components/graphql/typelink.vue b/components/graphql/typelink.vue
new file mode 100644
index 000000000..b451d7f93
--- /dev/null
+++ b/components/graphql/typelink.vue
@@ -0,0 +1,33 @@
+<template>
+  <span class="typelink" @click="jumpToType">{{ typeString }}</span>
+</template>
+
+<style>
+  .typelink {
+    color: red
+  }
+</style>
+
+<script>
+export default {
+  props: {
+    gqlType: null,
+
+    // (typeName: string) => void
+    jumpTypeCallback: Function
+  },
+
+  computed: {
+    typeString() {
+      return this.gqlType.toString();
+    }
+  },
+
+  methods: {
+    jumpToType() {
+      this.jumpTypeCallback(this.gqlType);
+    }
+  }
+}
+</script>
+