feat: improve graphql query builder (#4742)

Co-authored-by: nivedin <nivedinp@gmail.com>

packages/hoppscotch-common/locales/en.json

@@ -536,11 +536,13 @@
     "renamed": "Folder renamed"
   },
   "graphql": {
+    "arguments": "Arguments",
     "connection_switch_confirm": "Do you want to connect with the latest GraphQL endpoint?",
     "connection_error_http": "Failed to fetch GraphQL Schema due to network error.",
     "connection_switch_new_url": "Switching to a tab will disconnected you from the active GraphQL connection. New connection URL is",
     "connection_switch_url": "You're connected to a GraphQL endpoint the connection URL is",
     "deprecated": "Deprecated",
+    "fields": "Fields",
     "mutation": "Mutation",
     "mutations": "Mutations",
     "schema": "Schema",

packages/hoppscotch-common/src/components/graphql/Argument.vue

@@ -8,20 +8,28 @@
   </template>
 
   <div v-else class="hopp-doc-explorer-argument">
-    <p class="inline-flex items-center mb-0 gap-2 align-bottom">
+    <div class="inline-flex items-center align-bottom">
       <span
         v-if="showAddButton"
-        class="hover:text-accent cursor-pointer"
+        class="hover:text-accent cursor-pointer flex items-center justify-center px-4 py-2"
         :class="{ 'text-accent': isArgumentInOperation(arg) }"
         @click="insertQuery"
       >
-        <icon-lucide-plus-circle v-if="!isArgumentInOperation(arg)" />
-        <icon-lucide-circle-check v-else />
+        <icon-lucide-plus-circle
+          v-if="!isArgumentInOperation(arg)"
+          class="svg-icons"
+        />
+        <icon-lucide-circle-check v-else class="svg-icons" />
       </span>
-      <span class="hopp-doc-explorer-argument-name"> {{ arg.name }} </span>:
-      <GraphqlTypeLink :type="arg.type" />
-      <GraphqlDefaultValue v-if="showDefaultValue !== false" :field="arg" />
-    </p>
+      <div class="flex items-center gap-2">
+        <span class="hopp-doc-explorer-argument-name text-sm py-2 font-normal">
+          {{ arg.name }}
+        </span>
+        :
+        <GraphqlTypeLink :type="arg.type" />
+        <GraphqlDefaultValue v-if="showDefaultValue !== false" :field="arg" />
+      </div>
+    </div>
 
     <!-- <AppMarkdown v-if="arg.description" type="description">
       {{ arg.description }}
@@ -43,6 +51,7 @@
 <script setup lang="ts">
 import type { GraphQLArgument } from "graphql"
 import { useQuery } from "~/helpers/graphql/query"
+import { debounce } from "lodash-es"
 
 const { handleAddArgument, isArgumentInOperation } = useQuery()
 
@@ -76,13 +85,13 @@ const props = withDefaults(defineProps<ArgumentProps>(), {
   showAddButton: false,
 })
 
-const insertQuery = () => {
+const insertQuery = debounce(() => {
   handleAddArgument(props.arg)
-}
+}, 50)
 </script>
 
 <style scoped lang="scss">
 .hopp-doc-explorer-argument {
-  @apply cursor-pointer py-1 px-2 hover:bg-primaryLight;
+  @apply transition hover:bg-primaryLight;
 }
 </style>

packages/hoppscotch-common/src/components/graphql/Arguments.vue

@@ -1,11 +1,14 @@
 <template>
   <template v-if="'args' in field">
-    <GraphqlExplorerSection v-if="field.args.length > 0" title="Arguments">
+    <GraphqlExplorerSection
+      v-if="field.args.length > 0"
+      :title="t('graphql.arguments')"
+    >
       <GraphqlArgument
         v-for="arg in field.args"
         :key="arg.name"
         :arg="arg"
-        :show-add-button="true"
+        :show-add-button="!readonly"
       />
     </GraphqlExplorerSection>
   </template>
@@ -13,8 +16,17 @@
 
 <script setup lang="ts">
 import { GraphQLField } from "graphql"
+import { useI18n } from "~/composables/i18n"
 
-defineProps<{
-  field: GraphQLField<any, any>
-}>()
+const t = useI18n()
+
+withDefaults(
+  defineProps<{
+    field: GraphQLField<any, any>
+    readonly?: boolean
+  }>(),
+  {
+    readonly: false,
+  }
+)
 </script>

packages/hoppscotch-common/src/components/graphql/DocExplorer.vue

@@ -1,7 +1,7 @@
 <template>
   <section
     v-if="schema"
-    class="hopp-doc-explorer pb-10"
+    class="hopp-doc-explorer"
     aria-label="Documentation Explorer"
   >
     <div class="sticky top-0 z-10 border-b border-dividerLight bg-primary">
@@ -25,20 +25,24 @@
         </template>
       </div>
     </div>
-    <div class="hopp-doc-explorer-content mt-4">
+    <div class="hopp-doc-explorer-content">
       <template v-if="navStack.length === 1">
         <GraphqlSchemaDocumentation :schema="schema" />
       </template>
       <template v-else-if="isType(currentNavItem.def)">
-        <div
-          class="hopp-doc-explorer-title text-xl font-bold break-words px-3 mb-4"
-        >
+        <div class="hopp-doc-explorer-title text-xl font-bold break-words p-4">
           {{ currentNavItem.name }}
         </div>
-        <GraphqlTypeDocumentation :type="currentNavItem.def" />
+        <GraphqlTypeDocumentation
+          :type="currentNavItem.def"
+          :readonly="currentNavItem.readonly"
+        />
       </template>
       <template v-else-if="currentNavItem.def">
-        <GraphqlFieldDocumentation :field="currentNavItem.def" />
+        <GraphqlFieldDocumentation
+          :field="currentNavItem.def"
+          :readonly="currentNavItem.readonly"
+        />
       </template>
     </div>
   </section>
@@ -68,28 +72,34 @@ const { navStack, currentNavItem, navigateToIndex } = useExplorer()
 
 <style lang="scss">
 .hopp-doc-explorer-field-name {
-  color: hsl(208, 100%, 72%);
+  color: var(--editor-name-color);
 }
 .hopp-doc-explorer-root-type {
-  color: hsl(208, 100%, 72%);
+  color: var(--editor-name-color);
 }
 .hopp-doc-explorer-type-name {
   cursor: pointer;
-  color: hsl(30, 100%, 80%);
+  color: var(--editor-type-color);
+  @apply text-sm font-normal;
 }
 
 .hopp-doc-explorer-argument-name {
-  color: hsl(243, 100%, 77%);
+  color: var(--editor-keyword-color);
 }
 
 .hopp-doc-explorer-argument-multiple {
   margin-left: 0.5rem;
 }
 
+.hopp-doc-explorer-deprecated {
+  // use color from above comment
+  color: var(--status-critical-error-color);
+}
+
 .hopp-doc-explorer-argument-deprecation {
   margin-top: 0.5rem;
   padding: 0.5rem;
-  background-color: hsl(0, 100%, 90%);
+  background-color: var(--status-critical-error-color);
   border-radius: 0.25rem;
 }
 </style>

packages/hoppscotch-common/src/components/graphql/ExplorerSection.vue

@@ -1,6 +1,8 @@
 <template>
-  <div class="mb-6">
-    <div class="hopp-doc-explorer-section-title flex gap-2 mb-2 font-bold">
+  <div class="flex flex-col">
+    <div
+      class="hopp-doc-explorer-section-title flex gap-2 font-bold py-2 px-4 text-base"
+    >
       <!-- <component :is="iconComponent" /> -->
       {{ title }}
     </div>

packages/hoppscotch-common/src/components/graphql/Field.vue

@@ -1,9 +1,11 @@
 <template>
   <div class="hopp-doc-explorer-item" @click="handleClick">
-    <div class="flex">
+    <div class="flex space-x-2 items-center flex-1">
       <div
+        class="inline-flex items-center align-bottom gap-2"
         :class="{
           '!line-through': field.deprecationReason,
+          '!px-4': !showAddField,
         }"
       >
         <GraphqlFieldLink
@@ -12,19 +14,8 @@
           :is-added="isFieldInOperation(field)"
           @add-field="insertQuery"
         />
-        <template v-if="args.length > 0">
-          (<span>
-            <template v-for="arg in args" :key="arg.name">
-              <div
-                v-if="args.length > 1"
-                class="hopp-doc-explorer-argument-multiple"
-              >
-                <GraphqlArgument :arg="arg" inline />
-              </div>
-              <GraphqlArgument v-else :arg="arg" inline />
-            </template> </span
-          >)</template
-        >:
+        <template v-if="args.length > 0"> (...) </template>
+        <span> : </span>
         <GraphqlTypeLink :type="field.type" />
         <GraphqlDefaultValue :field="field" />
       </div>
@@ -32,7 +23,7 @@
       <span
         v-if="field.deprecationReason"
         v-tippy="{ theme: 'tooltip' }"
-        class="hopp-doc-explorer-deprecated inline ml-auto text-red-500"
+        class="hopp-doc-explorer-deprecated inline-flex items-center justify-center"
         :title="field.deprecationReason"
       >
         <icon-lucide-triangle-alert />
@@ -42,7 +33,7 @@
     <AppMarkdown
       v-if="field.description"
       type="description"
-      class="hidden"
+      class="hidden p-4"
       :only-show-first-child="true"
     >
       {{ field.description }}
@@ -85,6 +76,6 @@ const args = computed(() =>
 
 <style scoped lang="scss">
 .hopp-doc-explorer-item {
-  @apply cursor-pointer py-1 px-2 hover:bg-primaryLight;
+  @apply cursor-pointer transition hover:bg-primaryLight;
 }
 </style>

packages/hoppscotch-common/src/components/graphql/FieldDocumentation.vue

@@ -1,15 +1,15 @@
 <template>
-  <div class="px-3">
+  <div class="flex flex-col space-y-4">
     <div
-      class="hopp-doc-explorer-title text-xl font-bold break-words flex-wrap mb-4 flex items-center gap-2 leading-[inherit]"
+      class="hopp-doc-explorer-title p-4 text-xl font-bold break-words flex-wrap flex items-center gap-2 leading-[inherit]"
     >
       {{ field.name }}:
-      <GraphqlTypeLink :type="field.type" />
+      <GraphqlTypeLink :type="field.type" :is-heading="true" />
     </div>
 
     <div
       v-if="deprecationReason"
-      class="bg-orange-100 border-l-4 border-orange-500 text-orange-700 p-3 mb-4 -mt-2"
+      class="bg-orange-100 border-l-4 border-orange-500 text-orange-700 px-2 py-2"
       role="alert"
     >
       <p class="font-bold uppercase">
@@ -20,14 +20,14 @@
       </AppMarkdown>
     </div>
 
-    <AppMarkdown v-if="hasDescription" type="description" class="mb-6">
+    <AppMarkdown v-if="hasDescription" type="description" class="p-4">
       {{ description }}
     </AppMarkdown>
     <!-- <GraphqlExplorerSection title="Type">
       <GraphqlTypeLink :type="field.type" />
     </GraphqlExplorerSection> -->
-    <GraphqlArguments :field="field" />
-    <GraphqlFields :type="resolvedType" />
+    <GraphqlArguments :field="field" :readonly="readonly" />
+    <GraphqlFields :type="resolvedType" :show-add-field="!readonly" />
     <GraphqlDirectives :field="field" />
   </div>
 </template>
@@ -47,6 +47,7 @@ interface Field {
 
 const props = defineProps<{
   field: Field
+  readonly?: boolean
 }>()
 
 const t = useI18n()

packages/hoppscotch-common/src/components/graphql/FieldLink.vue

@@ -1,16 +1,16 @@
 <template>
-  <p class="inline-flex items-center mb-0 gap-2 align-bottom">
+  <p class="inline-flex items-center align-bottom">
     <span
       v-if="showAddField"
-      class="hover:text-accent cursor-pointer"
+      class="hover:text-accent cursor-pointer flex items-center justify-center px-4 py-2"
       :class="{ 'text-accent': isAdded }"
-      @click.stop="emit('add-field', field)"
+      @click.stop="addField"
     >
-      <icon-lucide-plus-circle v-if="!isAdded" />
-      <icon-lucide-circle-check v-else />
+      <icon-lucide-plus-circle v-if="!isAdded" class="svg-icons" />
+      <icon-lucide-circle-check v-else class="svg-icons" />
     </span>
     <span
-      class="hopp-doc-explorer-field-name [text-decoration:inherit]"
+      class="hopp-doc-explorer-field-name [text-decoration:inherit] text-sm py-2 font-normal"
       @click="clickable ? handleClick : undefined"
     >
       {{ field.name }}
@@ -20,6 +20,7 @@
 
 <script setup lang="ts">
 import { type ExplorerFieldDef, useExplorer } from "~/helpers/graphql/explorer"
+import { debounce } from "lodash-es"
 
 const props = withDefaults(
   defineProps<{
@@ -39,6 +40,10 @@ const emit = defineEmits<{
   (event: "add-field", field: ExplorerFieldDef): void
 }>()
 
+const addField = debounce(() => {
+  emit("add-field", props.field)
+}, 50)
+
 const { push } = useExplorer()
 
 const handleClick = (event: MouseEvent) => {

packages/hoppscotch-common/src/components/graphql/Fields.vue

@@ -1,6 +1,9 @@
 <template>
   <div>
-    <GraphqlExplorerSection v-if="fields.length > 0" title="Fields">
+    <GraphqlExplorerSection
+      v-if="fields.length > 0"
+      :title="t('graphql.fields')"
+    >
       <GraphqlField
         v-for="field in fields"
         :key="field.name"
@@ -19,8 +22,11 @@ import {
   isObjectType,
 } from "graphql"
 import { computed } from "vue"
+import { useI18n } from "~/composables/i18n"
 import { ExplorerFieldDef } from "~/helpers/graphql/explorer"
 
+const t = useI18n()
+
 const props = withDefaults(
   defineProps<{
     type: GraphQLNamedType

packages/hoppscotch-common/src/components/graphql/Query.vue

@@ -179,7 +179,7 @@ const debouncedOnUpdateQueryState = debounce((update: ViewUpdate) => {
       operationDefinitions.value = []
     }
   }
-}, 150)
+}, 100)
 
 onMounted(() => {
   try {

packages/hoppscotch-common/src/components/graphql/SchemaDocumentation.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="px-3">
-    <AppMarkdown type="description" class="mb-4">
+  <div class="flex flex-col space-y-4">
+    <AppMarkdown type="description" class="p-4">
       {{ schemaDescription }}
     </AppMarkdown>
 
@@ -41,8 +41,8 @@
     </GraphqlExplorerSection>
     <GraphqlExplorerSection title="All Schema Types">
       <div v-if="filteredTypes">
-        <div v-for="type in filteredTypes" :key="type.name" class="px-2">
-          <GraphqlTypeLink :type="type" :clickable="true" />
+        <div v-for="type in filteredTypes" :key="type.name" class="px-4 py-1">
+          <GraphqlTypeLink :type="type" :clickable="true" :readonly="true" />
         </div>
       </div>
     </GraphqlExplorerSection>
@@ -97,9 +97,9 @@ const filteredTypes = computed(() => {
 
 <style scoped lang="scss">
 .hopp-doc-explorer-root-wrapper {
-  @apply cursor-pointer py-1 px-2 hover:bg-primaryLight;
+  @apply cursor-pointer flex items-center gap-2 px-4 py-2 transition hover:bg-primaryLight;
 }
 .hopp-doc-explorer-root-type {
-  @apply lowercase;
+  @apply lowercase text-sm font-normal;
 }
 </style>

packages/hoppscotch-common/src/components/graphql/TypeDocumentation.vue

@@ -1,13 +1,13 @@
 <template>
-  <div v-if="isNamedType(type)" class="px-3">
-    <AppMarkdown v-if="type.description" type="description">
+  <div v-if="isNamedType(type)">
+    <AppMarkdown v-if="type.description" type="description" class="p-4">
       {{ type.description }}
     </AppMarkdown>
     <GraphqlImplementsInterfaces :type="type" />
     <GraphqlFields
       :type="type"
       :insert-query="false"
-      :show-add-field="isShowAddField"
+      :show-add-field="!readonly"
     />
     <GraphqlEnumValues :type="type" />
     <GraphqlPossibleTypes :type="type" />
@@ -18,11 +18,8 @@
 import { defineProps } from "vue"
 import { GraphQLNamedType, isNamedType } from "graphql"
 
-const props = defineProps<{
+defineProps<{
   type: GraphQLNamedType
+  readonly?: boolean
 }>()
-
-const isShowAddField = ["Query", "Mutation", "Subscription"].includes(
-  props.type.name
-)
 </script>

packages/hoppscotch-common/src/components/graphql/TypeLink.vue

@@ -12,13 +12,15 @@ import { renderType, useExplorer } from "~/helpers/graphql/explorer"
 const props = defineProps<{
   type: GraphQLType
   clickable?: boolean
+  readonly?: boolean
+  isHeading?: boolean
 }>()
 
 const { push } = useExplorer()
 
 const handleTypeClick = (event: MouseEvent, namedType: GraphQLNamedType) => {
   event.preventDefault()
-  push({ name: namedType.name, def: namedType })
+  push({ name: namedType.name, def: namedType, readonly: props.readonly })
 }
 
 /**
@@ -31,7 +33,11 @@ const renderedComponent = computed(() => {
     return h(
       "span",
       {
-        class: "hopp-doc-explorer-type-name",
+        class: `hopp-doc-explorer-type-name ${
+          props.isHeading ? "!text-lg !font-bold" : ""
+        } 
+        ${props.clickable ? "cursor-pointer hover:underline" : ""}  
+        `,
         onClick: (event: MouseEvent) =>
           props.clickable ? handleTypeClick(event, namedType) : undefined,
       },

packages/hoppscotch-common/src/helpers/graphql/explorer.ts

@@ -32,6 +32,7 @@ export type ExplorerFieldDef =
  * Represents a single item in the explorer navigation stack
  */
 export type ExplorerNavStackItem = {
+  readonly?: boolean
   name: string
   def?: GraphQLNamedType | ExplorerFieldDef
 }
@@ -71,7 +72,7 @@ export function useExplorer(initialSchema?: GraphQLSchema) {
     // Avoid pushing duplicate items
     if (lastItem.def === item.def) return
 
-    navStack.value.push(item)
+    navStack.value.push(lastItem.readonly ? { ...item, readonly: true } : item)
   }
 
   /**

packages/hoppscotch-common/src/helpers/graphql/query.ts

@@ -188,7 +188,11 @@ export function useQuery() {
       // Check if paths are different at the top level
       const existingTopField = existingOperation.selectionSet
         .selections[0] as FieldNode
-      if (existingTopField.name.value !== queryPath[0].name) {
+
+      if (
+        existingTopField.name.value !==
+        (queryPath && queryPath[0] && queryPath[0]?.name)
+      ) {
         append = true
         currentSelectionSet.selections = []
       }
@@ -365,10 +369,7 @@ export function useQuery() {
     }
   }
 
-  const isItemInOperation = (
-    item: ExplorerFieldDef,
-    isArgument = false
-  ): boolean => {
+  const isFieldInOperation = (item: ExplorerFieldDef): boolean => {
     const operation = getOperation(
       tabs.currentActiveTab.value?.document.cursorPosition || 0
     )
@@ -397,22 +398,44 @@ export function useQuery() {
     // Check based on type
     return currentSelections.some((selection) => {
       if (selection.kind !== Kind.FIELD) return false
-      return isArgument
-        ? selection.arguments?.some(
-            (argNode) => argNode.name.value === item.name
-          )
-        : selection.name.value === item.name
+      return selection.name.value === item.name
     })
   }
 
+  const isArgumentInOperation = (item: ExplorerFieldDef): boolean => {
+    const { cursorPosition } = tabs.currentActiveTab.value?.document
+    const operation = getOperation(cursorPosition)
+    if (!operation) return false
+
+    // Start from the operation's selection set
+    let args: ArgumentNode[] = []
+
+    // change the currentSelections based on current Field by the cursor position
+    operation.selectionSet.selections.forEach((selection) => {
+      if (selection.kind === Kind.FIELD) {
+        const fieldNode = selection as FieldNode
+        if (
+          fieldNode.loc &&
+          fieldNode.loc.start <= cursorPosition &&
+          fieldNode.loc.end >= cursorPosition
+        ) {
+          args = fieldNode.arguments || []
+        }
+      }
+    })
+
+    if (args.length === 0) return false
+
+    return args.some((arg) => arg.name.value === item.name)
+  }
+
   return {
     handleAddField: (field: ExplorerFieldDef) => handleOperation(field),
     handleAddArgument: (arg: ExplorerFieldDef) => handleOperation(arg, true),
     updatedQuery,
     cursorPosition,
     operationDefinitions: operations,
-    isFieldInOperation: (field: ExplorerFieldDef) => isItemInOperation(field),
-    isArgumentInOperation: (arg: ExplorerFieldDef) =>
-      isItemInOperation(arg, true),
+    isFieldInOperation,
+    isArgumentInOperation,
   }
 }