GraphQL collections (#1536)

components/collections/Add.vue

@@ -52,7 +52,10 @@ export default {
     syncCollections() {
       if (fb.currentUser !== null && fb.currentSettings[0]) {
         if (fb.currentSettings[0].value) {
-          fb.writeCollections(JSON.parse(JSON.stringify(this.$store.state.postwoman.collections)))
+          fb.writeCollections(
+            JSON.parse(JSON.stringify(this.$store.state.postwoman.collections)),
+            "collections"
+          )
         }
       }
     },
@@ -63,6 +66,7 @@ export default {
       }
       this.$store.commit("postwoman/addNewCollection", {
         name: this.$data.name,
+        flag: "rest",
       })
       this.$emit("hide-modal")
       this.syncCollections()

components/collections/Collection.vue

@@ -134,7 +134,10 @@ export default {
     syncCollections() {
       if (fb.currentUser !== null && fb.currentSettings[0]) {
         if (fb.currentSettings[0].value) {
-          fb.writeCollections(JSON.parse(JSON.stringify(this.$store.state.postwoman.collections)))
+          fb.writeCollections(
+            JSON.parse(JSON.stringify(this.$store.state.postwoman.collections)),
+            "collections"
+          )
         }
       }
     },
@@ -144,6 +147,7 @@ export default {
     removeCollection() {
       this.$store.commit("postwoman/removeCollection", {
         collectionIndex: this.collectionIndex,
+        flag: "rest",
       })
       this.$toast.error(this.$t("deleted"), {
         icon: "delete",
@@ -156,6 +160,7 @@ export default {
       const oldFolderIndex = dataTransfer.getData("oldFolderIndex")
       const oldFolderName = dataTransfer.getData("oldFolderName")
       const requestIndex = dataTransfer.getData("requestIndex")
+      const flag = "rest"
       this.$store.commit("postwoman/moveRequest", {
         oldCollectionIndex,
         newCollectionIndex: this.$props.collectionIndex,
@@ -164,6 +169,7 @@ export default {
         oldFolderIndex,
         oldFolderName,
         requestIndex,
+        flag,
       })
       this.syncCollections()
     },

components/collections/Edit.vue

@@ -54,7 +54,10 @@ export default {
     syncCollections() {
       if (fb.currentUser !== null && fb.currentSettings[0]) {
         if (fb.currentSettings[0].value) {
-          fb.writeCollections(JSON.parse(JSON.stringify(this.$store.state.postwoman.collections)))
+          fb.writeCollections(
+            JSON.parse(JSON.stringify(this.$store.state.postwoman.collections)),
+            "collections"
+          )
         }
       }
     },
@@ -70,6 +73,7 @@ export default {
       this.$store.commit("postwoman/editCollection", {
         collection: collectionUpdated,
         collectionIndex: this.$props.editingCollectionIndex,
+        flag: "rest",
       })
       this.$emit("hide-modal")
       this.syncCollections()

components/collections/EditFolder.vue

@@ -55,7 +55,10 @@ export default {
     syncCollections() {
       if (fb.currentUser !== null && fb.currentSettings[0]) {
         if (fb.currentSettings[0].value) {
-          fb.writeCollections(JSON.parse(JSON.stringify(this.$store.state.postwoman.collections)))
+          fb.writeCollections(
+            JSON.parse(JSON.stringify(this.$store.state.postwoman.collections)),
+            "collections"
+          )
         }
       }
     },
@@ -65,6 +68,7 @@ export default {
         folder: { ...this.$props.folder, name: this.$data.name },
         folderIndex: this.$props.folderIndex,
         folderName: this.$props.folder.name,
+        flag: "rest",
       })
       this.hideModal()
       this.syncCollections()

components/collections/EditRequest.vue

@@ -59,7 +59,10 @@ export default {
     syncCollections() {
       if (fb.currentUser !== null && fb.currentSettings[0]) {
         if (fb.currentSettings[0].value) {
-          fb.writeCollections(JSON.parse(JSON.stringify(this.$store.state.postwoman.collections)))
+          fb.writeCollections(
+            JSON.parse(JSON.stringify(this.$store.state.postwoman.collections)),
+            "collections"
+          )
         }
       }
     },
@@ -75,6 +78,7 @@ export default {
         requestFolderIndex: this.$props.folderIndex,
         requestNew: requestUpdated,
         requestIndex: this.$props.requestIndex,
+        flag: "rest",
       })
 
       this.hideModal()

components/collections/Folder.vue

@@ -133,7 +133,10 @@ export default {
     syncCollections() {
       if (fb.currentUser !== null && fb.currentSettings[0]) {
         if (fb.currentSettings[0].value) {
-          fb.writeCollections(JSON.parse(JSON.stringify(this.$store.state.postwoman.collections)))
+          fb.writeCollections(
+            JSON.parse(JSON.stringify(this.$store.state.postwoman.collections)),
+            "collections"
+          )
         }
       }
     },
@@ -145,6 +148,7 @@ export default {
         collectionIndex: this.$props.collectionIndex,
         folderName: this.$props.folder.name,
         folderIndex: this.$props.folderIndex,
+        flag: "rest",
       })
       this.syncCollections()
       this.$toast.error(this.$t("deleted"), {
@@ -157,6 +161,7 @@ export default {
       const oldFolderIndex = dataTransfer.getData("oldFolderIndex")
       const oldFolderName = dataTransfer.getData("oldFolderName")
       const requestIndex = dataTransfer.getData("requestIndex")
+      const flag = "rest"
 
       this.$store.commit("postwoman/moveRequest", {
         oldCollectionIndex,
@@ -166,6 +171,7 @@ export default {
         oldFolderIndex,
         oldFolderName,
         requestIndex,
+        flag,
       })
       this.syncCollections()
     },

components/collections/ImportExport.vue

@@ -172,7 +172,7 @@ export default {
         })
         .then(({ files }) => {
           let collections = JSON.parse(Object.values(files)[0].content)
-          this.$store.commit("postwoman/replaceCollections", collections)
+          this.$store.commit("postwoman/replaceCollections", { data: collections, flag: "rest" })
           this.fileImported()
           this.syncToFBCollections()
         })
@@ -203,9 +203,10 @@ export default {
         } else if (collections.info && collections.info.schema.includes("v2.1.0")) {
           collections = [this.parsePostmanCollection(collections)]
         } else {
-          return this.failedImport()
+          this.failedImport()
+          return
         }
-        this.$store.commit("postwoman/replaceCollections", collections)
+        this.$store.commit("postwoman/replaceCollections", { data: collections, flag: "rest" })
         this.fileImported()
         this.syncToFBCollections()
       }
@@ -227,9 +228,10 @@ export default {
           collections = JSON.parse(content.replaceAll(/{{([a-z]+)}}/gi, "<<$1>>"))
           collections = [this.parsePostmanCollection(collections)]
         } else {
-          return this.failedImport()
+          this.failedImport()
+          return
         }
-        this.$store.commit("postwoman/importCollections", collections)
+        this.$store.commit("postwoman/importCollections", { data: collections, flag: "rest" })
         this.fileImported()
         this.syncToFBCollections()
       }
@@ -255,13 +257,19 @@ export default {
       })
     },
     syncCollections() {
-      this.$store.commit("postwoman/replaceCollections", fb.currentCollections)
+      this.$store.commit("postwoman/replaceCollections", {
+        data: fb.currentCollections,
+        flag: "rest",
+      })
       this.fileImported()
     },
     syncToFBCollections() {
       if (fb.currentUser !== null && fb.currentSettings[0]) {
         if (fb.currentSettings[0].value) {
-          fb.writeCollections(JSON.parse(JSON.stringify(this.$store.state.postwoman.collections)))
+          fb.writeCollections(
+            JSON.parse(JSON.stringify(this.$store.state.postwoman.collections)),
+            "collections"
+          )
         }
       }
     },

components/collections/Request.vue

@@ -88,7 +88,10 @@ export default {
     syncCollections() {
       if (fb.currentUser !== null && fb.currentSettings[0]) {
         if (fb.currentSettings[0].value) {
-          fb.writeCollections(JSON.parse(JSON.stringify(this.$store.state.postwoman.collections)))
+          fb.writeCollections(
+            JSON.parse(JSON.stringify(this.$store.state.postwoman.collections)),
+            "collections"
+          )
         }
       }
     },
@@ -107,6 +110,7 @@ export default {
         collectionIndex: this.$props.collectionIndex,
         folderName: this.$props.folderName,
         requestIndex: this.$props.requestIndex,
+        flag: "rest",
       })
       this.$toast.error(this.$t("deleted"), {
         icon: "delete",

components/collections/SaveRequest.vue

@@ -146,7 +146,10 @@ export default {
     syncCollections() {
       if (fb.currentUser !== null && fb.currentSettings[0]) {
         if (fb.currentSettings[0].value) {
-          fb.writeCollections(JSON.parse(JSON.stringify(this.$store.state.postwoman.collections)))
+          fb.writeCollections(
+            JSON.parse(JSON.stringify(this.$store.state.postwoman.collections)),
+            "collections"
+          )
         }
       }
     },
@@ -176,6 +179,7 @@ export default {
         collectionIndex: this.$data.requestData.collectionIndex,
         folderName: this.$data.requestData.folderName,
         requestIndex: this.$data.requestData.requestIndex,
+        flag: "rest",
       })
 
       this.hideModal()

components/collections/graphql/Add.vue

@@ -0,0 +1,80 @@
+<template>
+  <SmartModal v-if="show" @close="hideModal">
+    <div slot="header">
+      <div class="row-wrapper">
+        <h3 class="title">{{ $t("new_collection") }}</h3>
+        <div>
+          <button class="icon" @click="hideModal">
+            <i class="material-icons">close</i>
+          </button>
+        </div>
+      </div>
+    </div>
+    <div slot="body" class="flex flex-col">
+      <label for="selectLabel">{{ $t("label") }}</label>
+      <input
+        type="text"
+        id="selectLabel"
+        v-model="name"
+        :placeholder="$t('my_new_collection')"
+        @keyup.enter="addNewCollection"
+      />
+    </div>
+    <div slot="footer">
+      <div class="row-wrapper">
+        <span></span>
+        <span>
+          <button class="icon" @click="hideModal">
+            {{ $t("cancel") }}
+          </button>
+          <button class="icon primary" @click="addNewCollection">
+            {{ $t("save") }}
+          </button>
+        </span>
+      </div>
+    </div>
+  </SmartModal>
+</template>
+
+<script>
+import { fb } from "~/helpers/fb"
+
+export default {
+  props: {
+    show: Boolean,
+  },
+  data() {
+    return {
+      name: undefined,
+    }
+  },
+  methods: {
+    syncCollections() {
+      if (fb.currentUser !== null && fb.currentSettings[0]) {
+        if (fb.currentSettings[0].value) {
+          fb.writeCollections(
+            JSON.parse(JSON.stringify(this.$store.state.postwoman.collectionsGraphql)),
+            "collectionsGraphql"
+          )
+        }
+      }
+    },
+    addNewCollection() {
+      if (!this.$data.name) {
+        this.$toast.info(this.$t("invalid_collection_name"))
+        return
+      }
+      this.$store.commit("postwoman/addNewCollection", {
+        name: this.$data.name,
+        flag: "graphql",
+      })
+      this.$emit("hide-modal")
+      this.syncCollections()
+    },
+    hideModal() {
+      this.$emit("hide-modal")
+      this.$data.name = undefined
+    },
+  },
+}
+</script>

components/collections/graphql/AddFolder.vue

@@ -0,0 +1,65 @@
+<template>
+  <SmartModal v-if="show" @close="show = false">
+    <div slot="header">
+      <div class="row-wrapper">
+        <h3 class="title">{{ $t("new_folder") }}</h3>
+        <div>
+          <button class="icon" @click="hideModal">
+            <i class="material-icons">close</i>
+          </button>
+        </div>
+      </div>
+    </div>
+    <div slot="body" class="flex flex-col">
+      <label for="selectLabel">{{ $t("label") }}</label>
+      <input
+        type="text"
+        id="selectLabel"
+        v-model="name"
+        :placeholder="$t('my_new_folder')"
+        @keyup.enter="addFolder"
+      />
+    </div>
+    <div slot="footer">
+      <div class="row-wrapper">
+        <span></span>
+        <span>
+          <button class="icon" @click="hideModal">
+            {{ $t("cancel") }}
+          </button>
+          <button class="icon primary" @click="addFolder">
+            {{ $t("save") }}
+          </button>
+        </span>
+      </div>
+    </div>
+  </SmartModal>
+</template>
+
+<script>
+export default {
+  props: {
+    show: Boolean,
+    folder: Object,
+    folderPath: String,
+    collectionIndex: Number,
+  },
+  data() {
+    return {
+      name: undefined,
+    }
+  },
+  methods: {
+    addFolder() {
+      this.$emit("add-folder", {
+        name: this.name,
+        folder: this.folder,
+        path: this.folderPath || `${this.collectionIndex}`,
+      })
+    },
+    hideModal() {
+      this.$emit("hide-modal")
+    },
+  },
+}
+</script>

components/collections/graphql/Collection.vue

@@ -0,0 +1,178 @@
+<template>
+  <div>
+    <div
+      :class="['row-wrapper transition duration-150 ease-in-out', { 'bg-bgDarkColor': dragging }]"
+      @dragover.prevent
+      @drop.prevent="dropEvent"
+      @dragover="dragging = true"
+      @drop="dragging = false"
+      @dragleave="dragging = false"
+      @dragend="dragging = false"
+    >
+      <button class="icon" @click="toggleShowChildren">
+        <i class="material-icons" v-show="!showChildren && !isFiltered">arrow_right</i>
+        <i class="material-icons" v-show="showChildren || isFiltered">arrow_drop_down</i>
+        <i class="material-icons">folder</i>
+        <span>{{ collection.name }}</span>
+      </button>
+      <div>
+        <button
+          v-if="doc"
+          class="icon"
+          @click="$emit('select-collection')"
+          v-tooltip.left="$t('import')"
+        >
+          <i class="material-icons">topic</i>
+        </button>
+        <v-popover>
+          <button class="tooltip-target icon" v-tooltip.left="$t('more')">
+            <i class="material-icons">more_vert</i>
+          </button>
+          <template slot="popover">
+            <div>
+              <button
+                class="icon"
+                @click="$emit('add-folder', { folder: collection, path: `${collectionIndex}` })"
+                v-close-popover
+              >
+                <i class="material-icons">create_new_folder</i>
+                <span>{{ $t("new_folder") }}</span>
+              </button>
+            </div>
+            <div>
+              <button class="icon" @click="$emit('edit-collection')" v-close-popover>
+                <i class="material-icons">create</i>
+                <span>{{ $t("edit") }}</span>
+              </button>
+            </div>
+            <div>
+              <button class="icon" @click="confirmRemove = true" v-close-popover>
+                <i class="material-icons">delete</i>
+                <span>{{ $t("delete") }}</span>
+              </button>
+            </div>
+          </template>
+        </v-popover>
+      </div>
+    </div>
+    <div v-show="showChildren || isFiltered">
+      <ul class="flex-col">
+        <li
+          v-for="(folder, index) in collection.folders"
+          :key="folder.name"
+          class="ml-8 border-l border-brdColor"
+        >
+          <CollectionsGraphqlFolder
+            :folder="folder"
+            :folder-index="index"
+            :folder-path="`${collectionIndex}/${index}`"
+            :collection-index="collectionIndex"
+            :doc="doc"
+            :isFiltered="isFiltered"
+            @add-folder="$emit('add-folder', $event)"
+            @edit-folder="$emit('edit-folder', $event)"
+            @edit-request="$emit('edit-request', $event)"
+          />
+        </li>
+      </ul>
+      <ul class="flex-col">
+        <li
+          v-for="(request, index) in collection.requests"
+          :key="index"
+          class="ml-8 border-l border-brdColor"
+        >
+          <CollectionsGraphqlRequest
+            :request="request"
+            :collection-index="collectionIndex"
+            :folder-index="-1"
+            :folder-name="collection.name"
+            :request-index="index"
+            :doc="doc"
+            @edit-request="$emit('edit-request', $event)"
+          />
+        </li>
+      </ul>
+      <ul>
+        <li
+          v-if="collection.folders.length === 0 && collection.requests.length === 0"
+          class="flex ml-8 border-l border-brdColor"
+        >
+          <p class="info">
+            <i class="material-icons">not_interested</i> {{ $t("collection_empty") }}
+          </p>
+        </li>
+      </ul>
+    </div>
+    <SmartConfirmModal
+      :show="confirmRemove"
+      :title="$t('are_you_sure_remove_collection')"
+      @hide-modal="confirmRemove = false"
+      @resolve="removeCollection"
+    />
+  </div>
+</template>
+
+<script>
+import { fb } from "~/helpers/fb"
+
+export default {
+  props: {
+    collectionIndex: Number,
+    collection: Object,
+    doc: Boolean,
+    isFiltered: Boolean,
+  },
+  data() {
+    return {
+      showChildren: false,
+      dragging: false,
+      selectedFolder: {},
+      confirmRemove: false,
+    }
+  },
+  methods: {
+    syncCollections() {
+      if (fb.currentUser !== null && fb.currentSettings[0]) {
+        if (fb.currentSettings[0].value) {
+          fb.writeCollections(
+            JSON.parse(JSON.stringify(this.$store.state.postwoman.collectionsGraphql)),
+            "collectionsGraphql"
+          )
+        }
+      }
+    },
+    toggleShowChildren() {
+      this.showChildren = !this.showChildren
+    },
+    removeCollection() {
+      this.$store.commit("postwoman/removeCollection", {
+        collectionIndex: this.collectionIndex,
+        flag: "graphql",
+      })
+      this.$toast.error(this.$t("deleted"), {
+        icon: "delete",
+      })
+      this.syncCollections()
+    },
+    dropEvent({ dataTransfer }) {
+      this.dragging = !this.dragging
+      const oldCollectionIndex = dataTransfer.getData("oldCollectionIndex")
+      const oldFolderIndex = dataTransfer.getData("oldFolderIndex")
+      const oldFolderName = dataTransfer.getData("oldFolderName")
+      const requestIndex = dataTransfer.getData("requestIndex")
+      const flag = "graphql"
+      this.$store.commit("postwoman/moveRequest", {
+        oldCollectionIndex,
+        newCollectionIndex: this.$props.collectionIndex,
+        newFolderIndex: -1,
+        newFolderName: this.$props.collection.name,
+        oldFolderIndex,
+        oldFolderName,
+        requestIndex,
+        flag,
+      })
+      this.syncCollections()
+    },
+  },
+}
+</script>

components/collections/graphql/Edit.vue

@@ -0,0 +1,86 @@
+<template>
+  <SmartModal v-if="show" @close="hideModal">
+    <div slot="header">
+      <div class="row-wrapper">
+        <h3 class="title">{{ $t("edit_collection") }}</h3>
+        <div>
+          <button class="icon" @click="hideModal">
+            <i class="material-icons">close</i>
+          </button>
+        </div>
+      </div>
+    </div>
+    <div slot="body" class="flex flex-col">
+      <label for="selectLabel">{{ $t("label") }}</label>
+      <input
+        type="text"
+        id="selectLabel"
+        v-model="name"
+        :placeholder="editingCollection.name"
+        @keyup.enter="saveCollection"
+      />
+    </div>
+    <div slot="footer">
+      <div class="row-wrapper">
+        <span></span>
+        <span>
+          <button class="icon" @click="hideModal">
+            {{ $t("cancel") }}
+          </button>
+          <button class="icon primary" @click="saveCollection">
+            {{ $t("save") }}
+          </button>
+        </span>
+      </div>
+    </div>
+  </SmartModal>
+</template>
+
+<script>
+import { fb } from "~/helpers/fb"
+
+export default {
+  props: {
+    show: Boolean,
+    editingCollection: Object,
+    editingCollectionIndex: Number,
+  },
+  data() {
+    return {
+      name: undefined,
+    }
+  },
+  methods: {
+    syncCollections() {
+      if (fb.currentUser !== null && fb.currentSettings[0]) {
+        if (fb.currentSettings[0].value) {
+          fb.writeCollections(
+            JSON.parse(JSON.stringify(this.$store.state.postwoman.collectionsGraphql)),
+            "collectionsGraphql"
+          )
+        }
+      }
+    },
+    saveCollection() {
+      if (!this.$data.name) {
+        this.$toast.info(this.$t("invalid_collection_name"))
+        return
+      }
+      const collectionUpdated = {
+        ...this.$props.editingCollection,
+        name: this.$data.name,
+      }
+      this.$store.commit("postwoman/editCollection", {
+        collection: collectionUpdated,
+        collectionIndex: this.$props.editingCollectionIndex,
+        flag: "graphql",
+      })
+      this.$emit("hide-modal")
+      this.syncCollections()
+    },
+    hideModal() {
+      this.$emit("hide-modal")
+    },
+  },
+}
+</script>

components/collections/graphql/EditFolder.vue

@@ -0,0 +1,81 @@
+<template>
+  <SmartModal v-if="show" @close="show = false">
+    <div slot="header">
+      <div class="row-wrapper">
+        <h3 class="title">{{ $t("edit_folder") }}</h3>
+        <div>
+          <button class="icon" @click="hideModal">
+            <i class="material-icons">close</i>
+          </button>
+        </div>
+      </div>
+    </div>
+    <div slot="body" class="flex flex-col">
+      <label for="selectLabel">{{ $t("label") }}</label>
+      <input
+        type="text"
+        id="selectLabel"
+        v-model="name"
+        :placeholder="folder.name"
+        @keyup.enter="editFolder"
+      />
+    </div>
+    <div slot="footer">
+      <div class="row-wrapper">
+        <span></span>
+        <span>
+          <button class="icon" @click="hideModal">
+            {{ $t("cancel") }}
+          </button>
+          <button class="icon primary" @click="editFolder">
+            {{ $t("save") }}
+          </button>
+        </span>
+      </div>
+    </div>
+  </SmartModal>
+</template>
+
+<script>
+import { fb } from "~/helpers/fb"
+
+export default {
+  props: {
+    show: Boolean,
+    collectionIndex: Number,
+    folder: Object,
+    folderIndex: Number,
+  },
+  data() {
+    return {
+      name: undefined,
+    }
+  },
+  methods: {
+    syncCollections() {
+      if (fb.currentUser !== null && fb.currentSettings[0]) {
+        if (fb.currentSettings[0].value) {
+          fb.writeCollections(
+            JSON.parse(JSON.stringify(this.$store.state.postwoman.collectionsGraphql)),
+            "collectionsGraphql"
+          )
+        }
+      }
+    },
+    editFolder() {
+      this.$store.commit("postwoman/editFolder", {
+        collectionIndex: this.$props.collectionIndex,
+        folder: { ...this.$props.folder, name: this.$data.name },
+        folderIndex: this.$props.folderIndex,
+        folderName: this.$props.folder.name,
+        flag: "graphql",
+      })
+      this.hideModal()
+      this.syncCollections()
+    },
+    hideModal() {
+      this.$emit("hide-modal")
+    },
+  },
+}
+</script>

components/collections/graphql/EditRequest.vue

@@ -0,0 +1,92 @@
+<template>
+  <SmartModal v-if="show" @close="hideModal">
+    <div slot="header">
+      <div class="row-wrapper">
+        <h3 class="title">{{ $t("edit_request") }}</h3>
+        <div>
+          <button class="icon" @click="hideModal">
+            <i class="material-icons">close</i>
+          </button>
+        </div>
+      </div>
+    </div>
+    <div slot="body" class="flex flex-col">
+      <label for="selectLabel">{{ $t("label") }}</label>
+      <input
+        type="text"
+        id="selectLabel"
+        v-model="requestUpdateData.name"
+        @keyup.enter="saveRequest"
+        :placeholder="request.name"
+      />
+    </div>
+    <div slot="footer">
+      <div class="row-wrapper">
+        <span></span>
+        <span>
+          <button class="icon" @click="hideModal">
+            {{ $t("cancel") }}
+          </button>
+          <button class="icon primary" @click="saveRequest">
+            {{ $t("save") }}
+          </button>
+        </span>
+      </div>
+    </div>
+  </SmartModal>
+</template>
+
+<script>
+import { fb } from "~/helpers/fb"
+
+export default {
+  props: {
+    show: Boolean,
+    collectionIndex: Number,
+    folderIndex: Number,
+    folderName: String,
+    request: Object,
+    requestIndex: Number,
+  },
+  data() {
+    return {
+      requestUpdateData: {
+        name: undefined,
+      },
+    }
+  },
+  methods: {
+    syncCollections() {
+      if (fb.currentUser !== null && fb.currentSettings[0]) {
+        if (fb.currentSettings[0].value) {
+          fb.writeCollections(
+            JSON.parse(JSON.stringify(this.$store.state.postwoman.collectionsGraphql)),
+            "collectionsGraphql"
+          )
+        }
+      }
+    },
+    saveRequest() {
+      const requestUpdated = {
+        ...this.$props.request,
+        name: this.$data.requestUpdateData.name || this.$props.request.name,
+      }
+
+      this.$store.commit("postwoman/editRequest", {
+        requestCollectionIndex: this.$props.collectionIndex,
+        requestFolderName: this.$props.folderName,
+        requestFolderIndex: this.$props.folderIndex,
+        requestNew: requestUpdated,
+        requestIndex: this.$props.requestIndex,
+        flag: "graphql",
+      })
+
+      this.hideModal()
+      this.syncCollections()
+    },
+    hideModal() {
+      this.$emit("hide-modal")
+    },
+  },
+}
+</script>

components/collections/graphql/Folder.vue

@@ -0,0 +1,180 @@
+<template>
+  <div>
+    <div
+      :class="['row-wrapper transition duration-150 ease-in-out', { 'bg-bgDarkColor': dragging }]"
+      @dragover.prevent
+      @drop.prevent="dropEvent"
+      @dragover="dragging = true"
+      @drop="dragging = false"
+      @dragleave="dragging = false"
+      @dragend="dragging = false"
+    >
+      <div>
+        <button class="icon" @click="toggleShowChildren">
+          <i class="material-icons" v-show="!showChildren && !isFiltered">arrow_right</i>
+          <i class="material-icons" v-show="showChildren || isFiltered">arrow_drop_down</i>
+          <i class="material-icons">folder_open</i>
+          <span>{{ folder.name }}</span>
+        </button>
+      </div>
+      <v-popover>
+        <button class="tooltip-target icon" v-tooltip.left="$t('more')">
+          <i class="material-icons">more_vert</i>
+        </button>
+        <template slot="popover">
+          <div>
+            <button
+              class="icon"
+              @click="$emit('add-folder', { folder, path: folderPath })"
+              v-close-popover
+            >
+              <i class="material-icons">create_new_folder</i>
+              <span>{{ $t("new_folder") }}</span>
+            </button>
+          </div>
+          <div>
+            <button
+              class="icon"
+              @click="$emit('edit-folder', { folder, folderIndex, collectionIndex })"
+              v-close-popover
+            >
+              <i class="material-icons">edit</i>
+              <span>{{ $t("edit") }}</span>
+            </button>
+          </div>
+          <div>
+            <button class="icon" @click="confirmRemove = true" v-close-popover>
+              <i class="material-icons">delete</i>
+              <span>{{ $t("delete") }}</span>
+            </button>
+          </div>
+        </template>
+      </v-popover>
+    </div>
+    <div v-show="showChildren || isFiltered">
+      <ul class="flex-col">
+        <li
+          v-for="(request, index) in folder.requests"
+          :key="index"
+          class="flex ml-8 border-l border-brdColor"
+        >
+          <CollectionsGraphqlRequest
+            :request="request"
+            :collection-index="collectionIndex"
+            :folder-index="folderIndex"
+            :folder-name="folder.name"
+            :request-index="index"
+            :doc="doc"
+            @edit-request="$emit('edit-request', $event)"
+          />
+        </li>
+      </ul>
+      <ul v-if="folder.folders && folder.folders.length" class="flex-col">
+        <li
+          v-for="(subFolder, subFolderIndex) in folder.folders"
+          :key="subFolder.name"
+          class="ml-8 border-l border-brdColor"
+        >
+          <CollectionsGraphqlFolder
+            :folder="subFolder"
+            :folder-index="subFolderIndex"
+            :collection-index="collectionIndex"
+            :doc="doc"
+            :folder-path="`${folderPath}/${subFolderIndex}`"
+            @add-folder="$emit('add-folder', $event)"
+            @edit-folder="$emit('edit-folder', $event)"
+            @edit-request="$emit('edit-request', $event)"
+          />
+        </li>
+      </ul>
+      <ul
+        v-if="
+          folder.folders &&
+          folder.folders.length === 0 &&
+          folder.requests &&
+          folder.requests.length === 0
+        "
+      >
+        <li class="flex ml-8 border-l border-brdColor">
+          <p class="info"><i class="material-icons">not_interested</i> {{ $t("folder_empty") }}</p>
+        </li>
+      </ul>
+    </div>
+    <SmartConfirmModal
+      :show="confirmRemove"
+      :title="$t('are_you_sure_remove_folder')"
+      @hide-modal="confirmRemove = false"
+      @resolve="removeFolder"
+    />
+  </div>
+</template>
+
+<script>
+import { fb } from "~/helpers/fb"
+
+export default {
+  name: "folder",
+  props: {
+    folder: Object,
+    folderIndex: Number,
+    collectionIndex: Number,
+    folderPath: String,
+    doc: Boolean,
+    isFiltered: Boolean,
+  },
+  data() {
+    return {
+      showChildren: false,
+      dragging: false,
+      confirmRemove: false,
+    }
+  },
+  methods: {
+    syncCollections() {
+      if (fb.currentUser !== null && fb.currentSettings[0]) {
+        if (fb.currentSettings[0].value) {
+          fb.writeCollections(
+            JSON.parse(JSON.stringify(this.$store.state.postwoman.collectionsGraphql)),
+            "collectionsGraphql"
+          )
+        }
+      }
+    },
+    toggleShowChildren() {
+      this.showChildren = !this.showChildren
+    },
+    removeFolder() {
+      this.$store.commit("postwoman/removeFolder", {
+        collectionIndex: this.$props.collectionIndex,
+        folderName: this.$props.folder.name,
+        folderIndex: this.$props.folderIndex,
+        flag: "graphql",
+      })
+      this.syncCollections()
+      this.$toast.error(this.$t("deleted"), {
+        icon: "delete",
+      })
+    },
+    dropEvent({ dataTransfer }) {
+      this.dragging = !this.dragging
+      const oldCollectionIndex = dataTransfer.getData("oldCollectionIndex")
+      const oldFolderIndex = dataTransfer.getData("oldFolderIndex")
+      const oldFolderName = dataTransfer.getData("oldFolderName")
+      const requestIndex = dataTransfer.getData("requestIndex")
+      const flag = "graphql"
+
+      this.$store.commit("postwoman/moveRequest", {
+        oldCollectionIndex,
+        newCollectionIndex: this.$props.collectionIndex,
+        newFolderIndex: this.$props.folderIndex,
+        newFolderName: this.$props.folder.name,
+        oldFolderIndex,
+        oldFolderName,
+        requestIndex,
+        flag,
+      })
+      this.syncCollections()
+    },
+  },
+}
+</script>

components/collections/graphql/ImportExport.vue

@@ -0,0 +1,393 @@
+<template>
+  <SmartModal v-if="show" @close="hideModal">
+    <div slot="header">
+      <div class="row-wrapper">
+        <h3 class="title">{{ $t("import_export") }} {{ $t("collections") }}</h3>
+        <div>
+          <v-popover>
+            <button class="tooltip-target icon" v-tooltip.left="$t('more')">
+              <i class="material-icons">more_vert</i>
+            </button>
+            <template slot="popover">
+              <div>
+                <button class="icon" @click="readCollectionGist" v-close-popover>
+                  <i class="material-icons">assignment_returned</i>
+                  <span>{{ $t("import_from_gist") }}</span>
+                </button>
+              </div>
+              <div
+                v-tooltip.bottom="{
+                  content: !fb.currentUser
+                    ? $t('login_with_github_to') + $t('create_secret_gist')
+                    : fb.currentUser.provider !== 'github.com'
+                    ? $t('login_with_github_to') + $t('create_secret_gist')
+                    : null,
+                }"
+              >
+                <button
+                  :disabled="
+                    !fb.currentUser ? true : fb.currentUser.provider !== 'github.com' ? true : false
+                  "
+                  class="icon"
+                  @click="createCollectionGist"
+                  v-close-popover
+                >
+                  <i class="material-icons">assignment_turned_in</i>
+                  <span>{{ $t("create_secret_gist") }}</span>
+                </button>
+              </div>
+            </template>
+          </v-popover>
+          <button class="icon" @click="hideModal">
+            <i class="material-icons">close</i>
+          </button>
+        </div>
+      </div>
+    </div>
+    <div slot="body" class="flex flex-col">
+      <div class="flex flex-col items-start p-2">
+        <span
+          v-tooltip="{
+            content: !fb.currentUser ? $t('login_first') : $t('replace_current'),
+          }"
+        >
+          <button :disabled="!fb.currentUser" class="icon" @click="syncCollections">
+            <i class="material-icons">folder_shared</i>
+            <span>{{ $t("import_from_sync") }}</span>
+          </button>
+        </span>
+        <button
+          class="icon"
+          @click="openDialogChooseFileToReplaceWith"
+          v-tooltip="$t('replace_current')"
+        >
+          <i class="material-icons">create_new_folder</i>
+          <span>{{ $t("replace_json") }}</span>
+          <input
+            type="file"
+            @change="replaceWithJSON"
+            style="display: none"
+            ref="inputChooseFileToReplaceWith"
+            accept="application/json"
+          />
+        </button>
+        <button
+          class="icon"
+          @click="openDialogChooseFileToImportFrom"
+          v-tooltip="$t('preserve_current')"
+        >
+          <i class="material-icons">folder_special</i>
+          <span>{{ $t("import_json") }}</span>
+          <input
+            type="file"
+            @change="importFromJSON"
+            style="display: none"
+            ref="inputChooseFileToImportFrom"
+            accept="application/json"
+          />
+        </button>
+      </div>
+      <div v-if="showJsonCode" class="row-wrapper">
+        <textarea v-model="collectionJson" rows="8" readonly></textarea>
+      </div>
+    </div>
+    <div slot="footer">
+      <div class="row-wrapper">
+        <span>
+          <SmartToggle :on="showJsonCode" @change="showJsonCode = $event">
+            {{ $t("show_code") }}
+          </SmartToggle>
+        </span>
+        <span>
+          <button class="icon" @click="hideModal">
+            {{ $t("cancel") }}
+          </button>
+          <button class="icon primary" @click="exportJSON" v-tooltip="$t('download_file')">
+            {{ $t("export") }}
+          </button>
+        </span>
+      </div>
+    </div>
+  </SmartModal>
+</template>
+
+<script>
+import { fb } from "~/helpers/fb"
+
+export default {
+  data() {
+    return {
+      fb,
+      showJsonCode: false,
+    }
+  },
+  props: {
+    show: Boolean,
+  },
+  computed: {
+    collectionJson() {
+      return JSON.stringify(this.$store.state.postwoman.collectionsGraphql, null, 2)
+    },
+  },
+  methods: {
+    async createCollectionGist() {
+      await this.$axios
+        .$post(
+          "https://api.github.com/gists",
+          {
+            files: {
+              "hoppscotch-collections.json": {
+                content: this.collectionJson,
+              },
+            },
+          },
+          {
+            headers: {
+              Authorization: `token ${fb.currentUser.accessToken}`,
+              Accept: "application/vnd.github.v3+json",
+            },
+          }
+        )
+        .then(({ html_url }) => {
+          this.$toast.success(this.$t("gist_created"), {
+            icon: "done",
+          })
+          window.open(html_url)
+        })
+        .catch((error) => {
+          this.$toast.error(this.$t("something_went_wrong"), {
+            icon: "error",
+          })
+          console.log(error)
+        })
+    },
+    async readCollectionGist() {
+      let gist = prompt(this.$t("enter_gist_url"))
+      if (!gist) return
+      await this.$axios
+        .$get(`https://api.github.com/gists/${gist.split("/").pop()}`, {
+          headers: {
+            Accept: "application/vnd.github.v3+json",
+          },
+        })
+        .then(({ files }) => {
+          let collections = JSON.parse(Object.values(files)[0].content)
+          this.$store.commit("postwoman/replaceCollections", { data: collections, flag: "graphql" })
+          this.fileImported()
+          this.syncToFBCollections()
+        })
+        .catch((error) => {
+          this.failedImport()
+          console.log(error)
+        })
+    },
+    hideModal() {
+      this.$emit("hide-modal")
+    },
+    openDialogChooseFileToReplaceWith() {
+      this.$refs.inputChooseFileToReplaceWith.click()
+    },
+    openDialogChooseFileToImportFrom() {
+      this.$refs.inputChooseFileToImportFrom.click()
+    },
+    replaceWithJSON() {
+      let reader = new FileReader()
+      reader.onload = ({ target }) => {
+        let content = target.result
+        let collections = JSON.parse(content)
+        if (collections[0]) {
+          let [name, folders, requests] = Object.keys(collections[0])
+          if (name === "name" && folders === "folders" && requests === "requests") {
+            // Do nothing
+          }
+        } else if (collections.info && collections.info.schema.includes("v2.1.0")) {
+          collections = [this.parsePostmanCollection(collections)]
+        } else {
+          this.failedImport()
+          return
+        }
+        this.$store.commit("postwoman/replaceCollections", { data: collections, flag: "graphql" })
+        this.fileImported()
+        this.syncToFBCollections()
+      }
+      reader.readAsText(this.$refs.inputChooseFileToReplaceWith.files[0])
+      this.$refs.inputChooseFileToReplaceWith.value = ""
+    },
+    importFromJSON() {
+      let reader = new FileReader()
+      reader.onload = ({ target }) => {
+        let content = target.result
+        let collections = JSON.parse(content)
+        if (collections[0]) {
+          let [name, folders, requests] = Object.keys(collections[0])
+          if (name === "name" && folders === "folders" && requests === "requests") {
+            // Do nothing
+          }
+        } else if (collections.info && collections.info.schema.includes("v2.1.0")) {
+          //replace the variables, postman uses {{var}}, Hoppscotch uses <<var>>
+          collections = JSON.parse(content.replaceAll(/{{([a-z]+)}}/gi, "<<$1>>"))
+          collections = [this.parsePostmanCollection(collections)]
+        } else {
+          this.failedImport()
+          return
+        }
+        this.$store.commit("postwoman/importCollections", { data: collections, flag: "graphql" })
+        this.fileImported()
+        this.syncToFBCollections()
+      }
+      reader.readAsText(this.$refs.inputChooseFileToImportFrom.files[0])
+      this.$refs.inputChooseFileToImportFrom.value = ""
+    },
+    exportJSON() {
+      let text = this.collectionJson
+      text = text.replace(/\n/g, "\r\n")
+      let blob = new Blob([text], {
+        type: "text/json",
+      })
+      let anchor = document.createElement("a")
+      anchor.download = "hoppscotch-collection.json"
+      anchor.href = window.URL.createObjectURL(blob)
+      anchor.target = "_blank"
+      anchor.style.display = "none"
+      document.body.appendChild(anchor)
+      anchor.click()
+      document.body.removeChild(anchor)
+      this.$toast.success(this.$t("download_started"), {
+        icon: "done",
+      })
+    },
+    syncCollections() {
+      this.$store.commit("postwoman/replaceCollections", {
+        data: fb.currentGraphqlCollections,
+        flag: "graphql",
+      })
+      this.fileImported()
+    },
+    syncToFBCollections() {
+      if (fb.currentUser !== null && fb.currentSettings[0]) {
+        if (fb.currentSettings[0].value) {
+          fb.writeCollections(
+            JSON.parse(JSON.stringify(this.$store.state.postwoman.collectionsGraphql)),
+            "collectionsGraphql"
+          )
+        }
+      }
+    },
+    fileImported() {
+      this.$toast.info(this.$t("file_imported"), {
+        icon: "folder_shared",
+      })
+    },
+    failedImport() {
+      this.$toast.error(this.$t("import_failed"), {
+        icon: "error",
+      })
+    },
+    parsePostmanCollection({ info, name, item }) {
+      let postwomanCollection = {
+        name: "",
+        folders: [],
+        requests: [],
+      }
+
+      postwomanCollection.name = info ? info.name : name
+
+      if (item && item.length > 0) {
+        for (let collectionItem of item) {
+          if (collectionItem.request) {
+            if (postwomanCollection.hasOwnProperty("folders")) {
+              postwomanCollection.name = info ? info.name : name
+              postwomanCollection.requests.push(this.parsePostmanRequest(collectionItem))
+            } else {
+              postwomanCollection.name = name ? name : ""
+              postwomanCollection.requests.push(this.parsePostmanRequest(collectionItem))
+            }
+          } else if (this.hasFolder(collectionItem)) {
+            postwomanCollection.folders.push(this.parsePostmanCollection(collectionItem))
+          } else {
+            postwomanCollection.requests.push(this.parsePostmanRequest(collectionItem))
+          }
+        }
+      }
+      return postwomanCollection
+    },
+    parsePostmanRequest({ name, request }) {
+      let pwRequest = {
+        url: "",
+        path: "",
+        method: "",
+        auth: "",
+        httpUser: "",
+        httpPassword: "",
+        passwordFieldType: "password",
+        bearerToken: "",
+        headers: [],
+        params: [],
+        bodyParams: [],
+        rawParams: "",
+        rawInput: false,
+        contentType: "",
+        requestType: "",
+        name: "",
+      }
+
+      pwRequest.name = name
+      let requestObjectUrl = request.url.raw.match(/^(.+:\/\/[^\/]+|{[^\/]+})(\/[^\?]+|).*$/)
+      if (requestObjectUrl) {
+        pwRequest.url = requestObjectUrl[1]
+        pwRequest.path = requestObjectUrl[2] ? requestObjectUrl[2] : ""
+      }
+      pwRequest.method = request.method
+      let itemAuth = request.auth ? request.auth : ""
+      let authType = itemAuth ? itemAuth.type : ""
+      if (authType === "basic") {
+        pwRequest.auth = "Basic Auth"
+        pwRequest.httpUser =
+          itemAuth.basic[0].key === "username" ? itemAuth.basic[0].value : itemAuth.basic[1].value
+        pwRequest.httpPassword =
+          itemAuth.basic[0].key === "password" ? itemAuth.basic[0].value : itemAuth.basic[1].value
+      } else if (authType === "oauth2") {
+        pwRequest.auth = "OAuth 2.0"
+        pwRequest.bearerToken =
+          itemAuth.oauth2[0].key === "accessToken"
+            ? itemAuth.oauth2[0].value
+            : itemAuth.oauth2[1].value
+      } else if (authType === "bearer") {
+        pwRequest.auth = "Bearer Token"
+        pwRequest.bearerToken = itemAuth.bearer[0].value
+      }
+      let requestObjectHeaders = request.header
+      if (requestObjectHeaders) {
+        pwRequest.headers = requestObjectHeaders
+        for (let header of pwRequest.headers) {
+          delete header.name
+          delete header.type
+        }
+      }
+      let requestObjectParams = request.url.query
+      if (requestObjectParams) {
+        pwRequest.params = requestObjectParams
+        for (let param of pwRequest.params) {
+          delete param.disabled
+        }
+      }
+      if (request.body) {
+        if (request.body.mode === "urlencoded") {
+          let params = request.body.urlencoded
+          pwRequest.bodyParams = params ? params : []
+          for (let param of pwRequest.bodyParams) {
+            delete param.type
+          }
+        } else if (request.body.mode === "raw") {
+          pwRequest.rawInput = true
+          pwRequest.rawParams = request.body.raw
+        }
+      }
+      return pwRequest
+    },
+    hasFolder(item) {
+      return item.hasOwnProperty("item")
+    },
+  },
+}
+</script>

components/collections/graphql/Request.vue

@@ -0,0 +1,115 @@
+<template>
+  <div>
+    <div
+      :class="['row-wrapper transition duration-150 ease-in-out', { 'bg-bgDarkColor': dragging }]"
+      draggable="true"
+      @dragstart="dragStart"
+      @dragover.stop
+      @dragleave="dragging = false"
+      @dragend="dragging = false"
+    >
+      <div>
+        <button
+          class="icon"
+          @click="!doc ? selectRequest() : {}"
+          v-tooltip="!doc ? $t('use_request') : ''"
+        >
+          <span>{{ request.name }}</span>
+        </button>
+      </div>
+      <v-popover>
+        <button class="tooltip-target icon" v-tooltip="$t('more')">
+          <i class="material-icons">more_vert</i>
+        </button>
+        <template slot="popover">
+          <div>
+            <button
+              class="icon"
+              @click="
+                $emit('edit-request', {
+                  collectionIndex,
+                  folderIndex,
+                  folderName,
+                  request,
+                  requestIndex,
+                })
+              "
+              v-close-popover
+            >
+              <i class="material-icons">edit</i>
+              <span>{{ $t("edit") }}</span>
+            </button>
+          </div>
+          <div>
+            <button class="icon" @click="confirmRemove = true" v-close-popover>
+              <i class="material-icons">delete</i>
+              <span>{{ $t("delete") }}</span>
+            </button>
+          </div>
+        </template>
+      </v-popover>
+    </div>
+    <SmartConfirmModal
+      :show="confirmRemove"
+      :title="$t('are_you_sure_remove_request')"
+      @hide-modal="confirmRemove = false"
+      @resolve="removeRequest"
+    />
+  </div>
+</template>
+
+<script>
+import { fb } from "~/helpers/fb"
+
+export default {
+  props: {
+    request: Object,
+    collectionIndex: Number,
+    folderIndex: Number,
+    folderName: String,
+    requestIndex: Number,
+    doc: Boolean,
+  },
+  data() {
+    return {
+      dragging: false,
+      confirmRemove: false,
+    }
+  },
+  methods: {
+    syncCollections() {
+      if (fb.currentUser !== null && fb.currentSettings[0]) {
+        if (fb.currentSettings[0].value) {
+          fb.writeCollections(
+            JSON.parse(JSON.stringify(this.$store.state.postwoman.collectionsGraphql)),
+            "collectionsGraphql"
+          )
+        }
+      }
+    },
+    selectRequest() {
+      this.$store.commit("postwoman/selectGraphqlRequest", { request: this.request })
+    },
+    dragStart({ dataTransfer }) {
+      this.dragging = !this.dragging
+      dataTransfer.setData("oldCollectionIndex", this.$props.collectionIndex)
+      dataTransfer.setData("oldFolderIndex", this.$props.folderIndex)
+      dataTransfer.setData("oldFolderName", this.$props.folderName)
+      dataTransfer.setData("requestIndex", this.$props.requestIndex)
+    },
+    removeRequest() {
+      this.$store.commit("postwoman/removeRequest", {
+        collectionIndex: this.$props.collectionIndex,
+        folderName: this.$props.folderName,
+        requestIndex: this.$props.requestIndex,
+        flag: "graphql",
+      })
+      this.$toast.error(this.$t("deleted"), {
+        icon: "delete",
+      })
+      this.confirmRemove = false
+      this.syncCollections()
+    },
+  },
+}
+</script>

components/collections/graphql/SaveRequest.vue

@@ -0,0 +1,225 @@
+<template>
+  <SmartModal v-if="show" @close="hideModal">
+    <div slot="header">
+      <div class="row-wrapper">
+        <h3 class="title">{{ $t("save_request_as") }}</h3>
+        <div>
+          <button class="icon" @click="hideModal">
+            <i class="material-icons">close</i>
+          </button>
+        </div>
+      </div>
+    </div>
+    <div slot="body" class="flex flex-col">
+      <label for="selectLabel">{{ $t("token_req_name") }}</label>
+      <input type="text" id="selectLabel" v-model="requestData.name" @keyup.enter="saveRequestAs" />
+      <ul>
+        <li>
+          <label for="selectCollection">{{ $t("collection") }}</label>
+          <span class="select-wrapper">
+            <select type="text" id="selectCollection" v-model="requestData.collectionIndex">
+              <option :key="undefined" :value="undefined" hidden disabled selected>
+                {{ $t("select_collection") }}
+              </option>
+              <option
+                v-for="(collection, index) in $store.state.postwoman.collectionsGraphql"
+                :key="index"
+                :value="index"
+              >
+                {{ collection.name }}
+              </option>
+            </select>
+          </span>
+        </li>
+      </ul>
+      <label>{{ $t("folder") }}</label>
+      <SmartAutoComplete
+        :placeholder="$t('search')"
+        :source="folders"
+        :spellcheck="false"
+        v-model="requestData.folderName"
+      />
+      <ul>
+        <li>
+          <label for="selectRequest">{{ $t("request") }}</label>
+          <span class="select-wrapper">
+            <select type="text" id="selectRequest" v-model="requestData.requestIndex">
+              <option :key="undefined" :value="undefined">/</option>
+              <option v-for="(folder, index) in requests" :key="index" :value="index">
+                {{ folder.name }}
+              </option>
+            </select>
+          </span>
+        </li>
+      </ul>
+    </div>
+    <div slot="footer">
+      <div class="row-wrapper">
+        <span></span>
+        <span>
+          <button class="icon" @click="hideModal">
+            {{ $t("cancel") }}
+          </button>
+          <button class="icon primary" @click="saveRequestAs">
+            {{ $t("save") }}
+          </button>
+        </span>
+      </div>
+    </div>
+  </SmartModal>
+</template>
+
+<script>
+import { fb } from "~/helpers/fb"
+
+export default {
+  props: {
+    show: Boolean,
+    editingRequest: Object,
+  },
+  data() {
+    return {
+      defaultRequestName: "Untitled Request",
+      requestData: {
+        name: undefined,
+        collectionIndex: undefined,
+        folderName: undefined,
+        requestIndex: undefined,
+      },
+    }
+  },
+  watch: {
+    "requestData.collectionIndex": function resetFolderAndRequestIndex() {
+      // if user has chosen some folder, than selected other collection, which doesn't have any folders
+      // than `requestUpdateData.folderName` won't be reseted
+      this.$data.requestData.folderName = undefined
+      this.$data.requestData.requestIndex = undefined
+    },
+    "requestData.folderName": function resetRequestIndex() {
+      this.$data.requestData.requestIndex = undefined
+    },
+    editingRequest({ name }) {
+      this.$data.requestData.name = name || this.$data.defaultRequestName
+    },
+  },
+  computed: {
+    folders() {
+      const collections = this.$store.state.postwoman.collectionsGraphql
+      const collectionIndex = this.$data.requestData.collectionIndex
+      const userSelectedAnyCollection = collectionIndex !== undefined
+      if (!userSelectedAnyCollection) return []
+
+      const noCollectionAvailable = collections[collectionIndex] !== undefined
+      if (!noCollectionAvailable) return []
+
+      return getFolderNames(collections[collectionIndex].folders, [])
+    },
+    requests() {
+      const collections = this.$store.state.postwoman.collectionsGraphql
+      const collectionIndex = this.$data.requestData.collectionIndex
+      const folderName = this.$data.requestData.folderName
+
+      const userSelectedAnyCollection = collectionIndex !== undefined
+      if (!userSelectedAnyCollection) {
+        return []
+      }
+
+      const userSelectedAnyFolder = folderName !== undefined && folderName !== ""
+
+      if (userSelectedAnyFolder) {
+        const collection = collections[collectionIndex]
+        const folder = findFolder(folderName, collection)
+        return folder.requests
+      } else {
+        const collection = collections[collectionIndex]
+        const noCollectionAvailable = collection !== undefined
+
+        if (!noCollectionAvailable) {
+          return []
+        }
+
+        return collection.requests
+      }
+    },
+  },
+  methods: {
+    syncCollections() {
+      if (fb.currentUser !== null && fb.currentSettings[0]) {
+        if (fb.currentSettings[0].value) {
+          fb.writeCollections(
+            JSON.parse(JSON.stringify(this.$store.state.postwoman.collectionsGraphql)),
+            "collectionsGraphql"
+          )
+        }
+      }
+    },
+    saveRequestAs() {
+      const userDidntSpecifyCollection = this.$data.requestData.collectionIndex === undefined
+      if (userDidntSpecifyCollection) {
+        this.$toast.error(this.$t("select_collection"), {
+          icon: "error",
+        })
+        return
+      }
+      if (this.$data.requestData.name.length === 0) {
+        this.$toast.error(this.$t("empty_req_name"), {
+          icon: "error",
+        })
+        return
+      }
+
+      const requestUpdated = {
+        ...this.$props.editingRequest,
+        name: this.$data.requestData.name,
+        collection: this.$data.requestData.collectionIndex,
+      }
+
+      this.$store.commit("postwoman/saveRequestAs", {
+        request: requestUpdated,
+        collectionIndex: this.$data.requestData.collectionIndex,
+        folderName: this.$data.requestData.folderName,
+        requestIndex: this.$data.requestData.requestIndex,
+        flag: "graphql",
+      })
+
+      this.hideModal()
+      this.syncCollections()
+    },
+    hideModal() {
+      this.$emit("hide-modal")
+    },
+  },
+}
+
+function getFolderNames(folders, namesList) {
+  if (folders.length) {
+    folders.forEach((folder) => {
+      namesList.push(folder.name)
+      if (folder.folders && folder.folders.length) {
+        getFolderNames(folder.folders, namesList)
+      }
+    })
+  }
+  return namesList
+}
+
+function findFolder(folderName, currentFolder) {
+  let selectedFolder
+  let result
+
+  if (folderName === currentFolder.name) {
+    return currentFolder
+  }
+
+  for (let i = 0; i < currentFolder.folders.length; i++) {
+    selectedFolder = currentFolder.folders[i]
+
+    result = findFolder(folderName, selectedFolder)
+
+    if (result !== false) {
+      return result
+    }
+  }
+  return false
+}
+</script>

components/collections/graphql/index.vue

@@ -0,0 +1,261 @@
+<template>
+  <AppSection class="yellow" :label="$t('collections')" ref="collections" no-legend>
+    <div class="show-on-large-screen">
+      <input
+        aria-label="Search"
+        type="search"
+        :placeholder="$t('search')"
+        v-model="filterText"
+        class="rounded-t-lg"
+      />
+    </div>
+    <CollectionsGraphqlAdd :show="showModalAdd" @hide-modal="displayModalAdd(false)" />
+    <CollectionsGraphqlEdit
+      :show="showModalEdit"
+      :editing-collection="editingCollection"
+      :editing-collection-index="editingCollectionIndex"
+      @hide-modal="displayModalEdit(false)"
+    />
+    <CollectionsGraphqlAddFolder
+      :show="showModalAddFolder"
+      :folder="editingFolder"
+      :folder-path="editingFolderPath"
+      @add-folder="onAddFolder($event)"
+      @hide-modal="displayModalAddFolder(false)"
+    />
+    <CollectionsGraphqlEditFolder
+      :show="showModalEditFolder"
+      :collection-index="editingCollectionIndex"
+      :folder="editingFolder"
+      :folder-index="editingFolderIndex"
+      @hide-modal="displayModalEditFolder(false)"
+    />
+    <CollectionsGraphqlEditRequest
+      :show="showModalEditRequest"
+      :collection-index="editingCollectionIndex"
+      :folder-index="editingFolderIndex"
+      :folder-name="editingFolderName"
+      :request="editingRequest"
+      :request-index="editingRequestIndex"
+      @hide-modal="displayModalEditRequest(false)"
+    />
+    <CollectionsGraphqlImportExport
+      :show="showModalImportExport"
+      @hide-modal="displayModalImportExport(false)"
+    />
+    <div class="border-b row-wrapper border-brdColor">
+      <button class="icon" @click="displayModalAdd(true)">
+        <i class="material-icons">add</i>
+        <span>{{ $t("new") }}</span>
+      </button>
+      <button class="icon" @click="displayModalImportExport(true)">
+        {{ $t("import_export") }}
+      </button>
+    </div>
+    <p v-if="collections.length === 0" class="info">
+      <i class="material-icons">help_outline</i> {{ $t("create_new_collection") }}
+    </p>
+    <div class="virtual-list">
+      <ul class="flex-col">
+        <li v-for="(collection, index) in filteredCollections" :key="collection.name">
+          <CollectionsGraphqlCollection
+            :name="collection.name"
+            :collection-index="index"
+            :collection="collection"
+            :doc="doc"
+            :isFiltered="filterText.length > 0"
+            @edit-collection="editCollection(collection, index)"
+            @add-folder="addFolder($event)"
+            @edit-folder="editFolder($event)"
+            @edit-request="editRequest($event)"
+            @select-collection="$emit('use-collection', collection)"
+          />
+        </li>
+      </ul>
+    </div>
+    <p v-if="filterText && filteredCollections.length === 0" class="info">
+      <i class="material-icons">not_interested</i> {{ $t("nothing_found") }} "{{ filterText }}"
+    </p>
+  </AppSection>
+</template>
+
+<style scoped lang="scss">
+.virtual-list {
+  max-height: calc(100vh - 270px);
+}
+</style>
+
+<script>
+import { fb } from "~/helpers/fb"
+
+export default {
+  props: {
+    doc: Boolean,
+  },
+  data() {
+    return {
+      showModalAdd: false,
+      showModalEdit: false,
+      showModalImportExport: false,
+      showModalAddFolder: false,
+      showModalEditFolder: false,
+      showModalEditRequest: false,
+      editingCollection: undefined,
+      editingCollectionIndex: undefined,
+      editingFolder: undefined,
+      editingFolderName: undefined,
+      editingFolderIndex: undefined,
+      editingFolderPath: undefined,
+      editingRequest: undefined,
+      editingRequestIndex: undefined,
+      filterText: "",
+    }
+  },
+  computed: {
+    collections() {
+      return fb.currentUser !== null
+        ? fb.currentGraphqlCollections
+        : this.$store.state.postwoman.collectionsGraphql
+    },
+    filteredCollections() {
+      const collections =
+        fb.currentUser !== null
+          ? fb.currentGraphqlCollections
+          : this.$store.state.postwoman.collectionsGraphql
+
+      if (!this.filterText) return collections
+
+      const filterText = this.filterText.toLowerCase()
+      const filteredCollections = []
+
+      for (let collection of collections) {
+        const filteredRequests = []
+        const filteredFolders = []
+        for (let request of collection.requests) {
+          if (request.name.toLowerCase().includes(filterText)) filteredRequests.push(request)
+        }
+        for (let folder of collection.folders) {
+          const filteredFolderRequests = []
+          for (let request of folder.requests) {
+            if (request.name.toLowerCase().includes(filterText))
+              filteredFolderRequests.push(request)
+          }
+          if (filteredFolderRequests.length > 0) {
+            const filteredFolder = Object.assign({}, folder)
+            filteredFolder.requests = filteredFolderRequests
+            filteredFolders.push(filteredFolder)
+          }
+        }
+
+        if (filteredRequests.length + filteredFolders.length > 0) {
+          const filteredCollection = Object.assign({}, collection)
+          filteredCollection.requests = filteredRequests
+          filteredCollection.folders = filteredFolders
+          filteredCollections.push(filteredCollection)
+        }
+      }
+
+      return filteredCollections
+    },
+  },
+  async mounted() {
+    this._keyListener = function (e) {
+      if (e.key === "Escape") {
+        e.preventDefault()
+        this.showModalAdd = this.showModalEdit = this.showModalImportExport = this.showModalAddFolder = this.showModalEditFolder = this.showModalEditRequest = false
+      }
+    }
+    document.addEventListener("keydown", this._keyListener.bind(this))
+  },
+  methods: {
+    displayModalAdd(shouldDisplay) {
+      this.showModalAdd = shouldDisplay
+    },
+    displayModalEdit(shouldDisplay) {
+      this.showModalEdit = shouldDisplay
+
+      if (!shouldDisplay) this.resetSelectedData()
+    },
+    displayModalImportExport(shouldDisplay) {
+      this.showModalImportExport = shouldDisplay
+    },
+    displayModalAddFolder(shouldDisplay) {
+      this.showModalAddFolder = shouldDisplay
+
+      if (!shouldDisplay) this.resetSelectedData()
+    },
+    displayModalEditFolder(shouldDisplay) {
+      this.showModalEditFolder = shouldDisplay
+
+      if (!shouldDisplay) this.resetSelectedData()
+    },
+    displayModalEditRequest(shouldDisplay) {
+      this.showModalEditRequest = shouldDisplay
+
+      if (!shouldDisplay) this.resetSelectedData()
+    },
+    editCollection(collection, collectionIndex) {
+      this.$data.editingCollection = collection
+      this.$data.editingCollectionIndex = collectionIndex
+      this.displayModalEdit(true)
+      this.syncCollections()
+    },
+    onAddFolder({ name, path }) {
+      const flag = "graphql"
+      this.$store.commit("postwoman/addFolder", {
+        name,
+        path,
+        flag,
+      })
+
+      this.displayModalAddFolder(false)
+      this.syncCollections()
+    },
+    addFolder(payload) {
+      const { folder, path } = payload
+      this.$data.editingFolder = folder
+      this.$data.editingFolderPath = path
+      this.displayModalAddFolder(true)
+    },
+    editFolder(payload) {
+      const { collectionIndex, folder, folderIndex } = payload
+      this.$data.editingCollectionIndex = collectionIndex
+      this.$data.editingFolder = folder
+      this.$data.editingFolderIndex = folderIndex
+      this.displayModalEditFolder(true)
+      this.syncCollections()
+    },
+    editRequest(payload) {
+      const { collectionIndex, folderIndex, folderName, request, requestIndex } = payload
+      this.$data.editingCollectionIndex = collectionIndex
+      this.$data.editingFolderIndex = folderIndex
+      this.$data.editingFolderName = folderName
+      this.$data.editingRequest = request
+      this.$data.editingRequestIndex = requestIndex
+      this.displayModalEditRequest(true)
+      this.syncCollections()
+    },
+    resetSelectedData() {
+      this.$data.editingCollection = undefined
+      this.$data.editingCollectionIndex = undefined
+      this.$data.editingFolder = undefined
+      this.$data.editingFolderIndex = undefined
+      this.$data.editingRequest = undefined
+      this.$data.editingRequestIndex = undefined
+    },
+    syncCollections() {
+      if (fb.currentUser !== null && fb.currentSettings[0]) {
+        if (fb.currentSettings[0].value) {
+          fb.writeCollections(
+            JSON.parse(JSON.stringify(this.$store.state.postwoman.collectionsGraphql)),
+            "collectionsGraphql"
+          )
+        }
+      }
+    },
+  },
+  beforeDestroy() {
+    document.removeEventListener("keydown", this._keyListener)
+  },
+}
+</script>

components/collections/index.vue

@@ -199,9 +199,11 @@ export default {
       this.syncCollections()
     },
     onAddFolder({ name, path }) {
+      const flag = "rest"
       this.$store.commit("postwoman/addFolder", {
         name,
         path,
+        flag,
       })
 
       this.displayModalAddFolder(false)
@@ -242,7 +244,10 @@ export default {
     syncCollections() {
       if (fb.currentUser !== null && fb.currentSettings[0]) {
         if (fb.currentSettings[0].value) {
-          fb.writeCollections(JSON.parse(JSON.stringify(this.$store.state.postwoman.collections)))
+          fb.writeCollections(
+            JSON.parse(JSON.stringify(this.$store.state.postwoman.collections)),
+            "collections"
+          )
         }
       }
     },

helpers/__tests__/fb.spec.js

@@ -1108,7 +1108,7 @@ describe("FirebaseInstance", () => {
 
       signInUser()
 
-      await expect(fb.writeCollections([])).resolves.toBeUndefined()
+      await expect(fb.writeCollections([], "collections")).resolves.toBeUndefined()
     })
 
     test("rejects for non-authenticated request", async () => {
@@ -1116,7 +1116,7 @@ describe("FirebaseInstance", () => {
 
       signOutUser()
 
-      await expect(fb.writeCollections([])).rejects.toBeDefined()
+      await expect(fb.writeCollections([], "collections")).rejects.toBeDefined()
     })
 
     test("stores data on firestore with proper structure", async () => {
@@ -1124,7 +1124,7 @@ describe("FirebaseInstance", () => {
 
       signInUser()
 
-      await fb.writeCollections([])
+      await fb.writeCollections([], "collections")
 
       const doc = (
         await mocksdk
@@ -1152,7 +1152,7 @@ describe("FirebaseInstance", () => {
 
       signInUser()
 
-      await fb.writeCollections([])
+      await fb.writeCollections([], "collections")
 
       const doc = (
         await mocksdk

helpers/fb.js

@@ -35,6 +35,7 @@ export class FirebaseInstance {
     this.currentHistory = []
     this.currentGraphqlHistory = []
     this.currentCollections = []
+    this.currentGraphqlCollections = []
     this.currentEnvironments = []
 
     this.app.auth().onAuthStateChanged((user) => {
@@ -133,6 +134,21 @@ export class FirebaseInstance {
             }
           })
 
+        this.usersCollection
+          .doc(this.currentUser.uid)
+          .collection("collectionsGraphql")
+          .onSnapshot((collectionsRef) => {
+            const collections = []
+            collectionsRef.forEach((doc) => {
+              const collection = doc.data()
+              collection.id = doc.id
+              collections.push(collection)
+            })
+            if (collections.length > 0) {
+              this.currentGraphqlCollections = collections[0].collection
+            }
+          })
+
         this.usersCollection
           .doc(this.currentUser.uid)
           .collection("environments")
@@ -319,7 +335,7 @@ export class FirebaseInstance {
     }
   }
 
-  async writeCollections(collection) {
+  async writeCollections(collection, flag) {
     const cl = {
       updatedOn: new Date(),
       author: this.currentUser.uid,
@@ -329,11 +345,7 @@ export class FirebaseInstance {
     }
 
     try {
-      await this.usersCollection
+      await this.usersCollection.doc(this.currentUser.uid).collection(flag).doc("sync").set(cl)
-        .doc(this.currentUser.uid)
-        .collection("collections")
-        .doc("sync")
-        .set(cl)
     } catch (e) {
       console.error("error updating", cl, e)
 

package-lock.json

@@ -5,6 +5,7 @@
   "requires": true,
   "packages": {
     "": {
+      "name": "hoppscotch",
       "version": "2.0.0",
       "hasInstallScript": true,
       "dependencies": {
@@ -1821,6 +1822,7 @@
         "jest-resolve": "^26.6.2",
         "jest-util": "^26.6.2",
         "jest-worker": "^26.6.2",
+        "node-notifier": "^8.0.0",
         "slash": "^3.0.0",
         "source-map": "^0.6.0",
         "string-length": "^4.0.1",
@@ -4030,6 +4032,7 @@
         "merge-source-map": "^1.1.0",
         "postcss": "^7.0.14",
         "postcss-selector-parser": "^6.0.2",
+        "prettier": "^1.18.2",
         "source-map": "~0.6.1",
         "vue-template-es2015-compiler": "^1.9.0"
       },
@@ -6036,6 +6039,7 @@
       "dependencies": {
         "anymatch": "~3.1.1",
         "braces": "~3.0.2",
+        "fsevents": "~2.3.1",
         "glob-parent": "~5.1.0",
         "is-binary-path": "~2.1.0",
         "is-glob": "~4.0.1",
@@ -8796,7 +8800,8 @@
         "esprima": "^4.0.1",
         "estraverse": "^4.2.0",
         "esutils": "^2.0.2",
-        "optionator": "^0.8.1"
+        "optionator": "^0.8.1",
+        "source-map": "~0.6.1"
       },
       "bin": {
         "escodegen": "bin/escodegen.js",
@@ -12234,6 +12239,7 @@
         "@types/node": "*",
         "anymatch": "^3.0.3",
         "fb-watchman": "^2.0.0",
+        "fsevents": "^2.1.2",
         "graceful-fs": "^4.2.4",
         "jest-regex-util": "^26.0.0",
         "jest-serializer": "^26.6.2",
@@ -26484,7 +26490,8 @@
       "dependencies": {
         "chokidar": "^3.4.1",
         "graceful-fs": "^4.1.2",
-        "neo-async": "^2.5.0"
+        "neo-async": "^2.5.0",
+        "watchpack-chokidar2": "^2.0.1"
       },
       "optionalDependencies": {
         "watchpack-chokidar2": "^2.0.1"

pages/graphql.vue

@@ -225,6 +225,14 @@
               >
                 <i class="material-icons">photo_filter</i>
               </button>
+              <button
+                class="icon"
+                @click="saveRequest"
+                ref="saveRequest"
+                v-tooltip.bottom="$t('save_to_collections')"
+              >
+                <i class="material-icons">create_new_folder</i>
+              </button>
             </div>
           </div>
           <GraphqlQueryEditor
@@ -402,11 +410,11 @@
             />
           </SmartTab>
 
-          <!-- <SmartTab :id="'collections'" :label="$t('collections')">
+          <SmartTab :id="'collections'" :label="$t('collections')">
-                <Collections />
+            <CollectionsGraphql />
           </SmartTab>
 
-              <SmartTab :id="'env'" :label="$t('environments')">
+          <!-- <SmartTab :id="'env'" :label="$t('environments')">
                 <Environments @use-environment="useSelectedEnvironment($event)" />
               </SmartTab>
 
@@ -416,6 +424,11 @@
         </SmartTabs>
       </aside>
     </div>
+    <CollectionsGraphqlSaveRequest
+      :show="showSaveRequestModal"
+      @hide-modal="hideRequestModal"
+      :editing-request="editRequest"
+    />
   </div>
 </template>
 
@@ -454,6 +467,8 @@ export default {
       isPollingSchema: false,
       timeoutSubscription: null,
       activeSidebar: true,
+      editRequest: {},
+      showSaveRequestModal: false,
 
       settings: {
         SCROLL_INTO_ENABLED:
@@ -463,7 +478,22 @@ export default {
       },
     }
   },
+  watch: {
+    selectedRequest(newValue) {
+      if (!newValue) return
+      this.url = newValue.url
+      this.gqlQueryString = newValue.query
+      this.headers = newValue.headers
+      this.variableString = newValue.variables
+    },
+  },
   computed: {
+    selectedRequest() {
+      return this.$store.state.postwoman.selectedGraphqlRequest
+    },
+    editingRequest() {
+      return this.$store.state.postwoman.editingRequest
+    },
     filteredQueryFields() {
       return this.getFilteredGraphqlFields({
         filterText: this.graphqlFieldsFilterText,
@@ -553,6 +583,19 @@ export default {
     next()
   },
   methods: {
+    hideRequestModal() {
+      this.showSaveRequestModal = false
+      this.editRequest = {}
+    },
+    saveRequest() {
+      this.editRequest = {
+        url: this.url,
+        query: this.gqlQueryString,
+        headers: this.headers,
+        variables: this.variableString,
+      }
+      this.showSaveRequestModal = true
+    },
     useSelectedEnvironment(event) {
       console.log("use selected environment")
     },

pages/settings.vue

@@ -256,7 +256,14 @@ export default {
     syncCollections() {
       if (fb.currentUser !== null && fb.currentSettings[0]) {
         if (fb.currentSettings[0].value) {
-          fb.writeCollections(JSON.parse(JSON.stringify(this.$store.state.postwoman.collections)))
+          fb.writeCollections(
+            JSON.parse(JSON.stringify(this.$store.state.postwoman.collections)),
+            "collections"
+          )
+          fb.writeCollections(
+            JSON.parse(JSON.stringify(this.$store.state.postwoman.collectionsGraphql)),
+            "collectionsGraphql"
+          )
         }
       }
     },

store/postwoman.js

@@ -49,6 +49,13 @@ export const state = () => ({
       requests: [],
     },
   ],
+  collectionsGraphql: [
+    {
+      name: "My GraphQL Collection",
+      folders: [],
+      requests: [],
+    },
+  ],
   environments: [
     {
       name: "My Environment Variables",
@@ -57,6 +64,7 @@ export const state = () => ({
   ],
   editingEnvironment: {},
   selectedRequest: {},
+  selectedGraphqlRequest: {},
   editingRequest: {},
 })
 
@@ -150,12 +158,18 @@ export const mutations = {
     environments[environmentIndex] = environment
   },
 
-  replaceCollections(state, collections) {
+  replaceCollections(state, item) {
-    state.collections = collections
+    let collections = item.data
+    const flag = item.flag
+    if (flag == "rest") state.collections = collections
+    else state.collectionsGraphql = collections
   },
 
-  importCollections(state, collections) {
+  importCollections(state, item) {
-    state.collections = [...state.collections, ...collections]
+    let collections = item.data
+    const flag = item.flag
+    if (flag == "rest") state.collections = [...state.collections, ...collections]
+    else state.collectionsGraphql = [...state.collectionsGraphql, ...collections]
 
     let index = 0
     for (let collection of collections) {
@@ -164,44 +178,69 @@ export const mutations = {
     }
   },
 
-  addNewCollection({ collections }, collection) {
+  addNewCollection({ collections, collectionsGraphql }, collection) {
-    const { name } = collection
+    const name = collection.name
-    const duplicateCollection = collections.some(
+    const flag = collection.flag
+    let duplicateCollection = null
+    if (flag == "rest") {
+      duplicateCollection = collections.some(
         (item) => item.name.toLowerCase() === name.toLowerCase()
       )
+    } else {
+      duplicateCollection = collectionsGraphql.some(
+        (item) => item.name.toLowerCase() === name.toLowerCase()
+      )
+    }
     if (duplicateCollection) {
       this.$toast.info("Duplicate collection")
       return
     }
+    if (flag == "rest") {
       collections.push({
         name: "",
         folders: [],
         requests: [],
         ...collection,
       })
+    } else {
+      collectionsGraphql.push({
+        name: "",
+        folders: [],
+        requests: [],
+        ...collection,
+      })
+    }
   },
 
-  removeCollection({ collections }, payload) {
+  removeCollection({ collections, collectionsGraphql }, payload) {
-    const { collectionIndex } = payload
+    const { collectionIndex, flag } = payload
-    collections.splice(collectionIndex, 1)
+    if (flag == "rest") collections.splice(collectionIndex, 1)
+    else collectionsGraphql.splice(collectionIndex, 1)
   },
 
-  editCollection({ collections }, payload) {
+  editCollection({ collections, collectionsGraphql }, payload) {
-    const { collection, collectionIndex } = payload
+    const { collection, collectionIndex, flag } = payload
     const { name } = collection
-    const duplicateCollection = collections.some(
+    let duplicateCollection = null
+    if (flag == "rest") {
+      duplicateCollection = collections.some(
         (item) => item.name.toLowerCase() === name.toLowerCase()
       )
+    } else {
+      duplicateCollection = collectionsGraphql.some(
+        (item) => item.name.toLowerCase() === name.toLowerCase()
+      )
+    }
     if (duplicateCollection) {
       this.$toast.info("Duplicate collection")
       return
     }
-    collections[collectionIndex] = collection
+    if (flag == "rest") collections[collectionIndex] = collection
+    else collectionsGraphql[collectionIndex] = collection
   },
 
-  addFolder({ collections }, payload) {
+  addFolder({ collections, collectionsGraphql }, payload) {
-    const { name, path } = payload
+    const { name, path, flag } = payload
-
     const newFolder = {
       name: name,
       requests: [],
@@ -211,15 +250,20 @@ export const mutations = {
     // Walk from collections to destination with the path
     const indexPaths = path.split("/").map((x) => parseInt(x))
 
-    let target = collections[indexPaths.shift()]
+    let target = null
+    if (flag == "rest") target = collections[indexPaths.shift()]
+    else target = collectionsGraphql[indexPaths.shift()]
+
     while (indexPaths.length > 0) target = target.folders[indexPaths.shift()]
 
     target.folders.push(newFolder)
   },
 
-  editFolder({ collections }, payload) {
+  editFolder({ collections, collectionsGraphql }, payload) {
-    const { collectionIndex, folder, folderIndex, folderName } = payload
+    const { collectionIndex, folder, folderIndex, folderName, flag } = payload
-    const collection = collections[collectionIndex]
+    let collection = null
+    if (flag == "rest") collection = collections[collectionIndex]
+    else collection = collectionsGraphql[collectionIndex]
 
     let parentFolder = findFolder(folderName, collection, true)
     if (parentFolder && parentFolder.folders) {
@@ -227,9 +271,11 @@ export const mutations = {
     }
   },
 
-  removeFolder({ collections }, payload) {
+  removeFolder({ collections, collectionsGraphql }, payload) {
-    const { collectionIndex, folderIndex, folderName } = payload
+    const { collectionIndex, folderIndex, folderName, flag } = payload
-    const collection = collections[collectionIndex]
+    let collection = null
+    if (flag == "rest") collection = collections[collectionIndex]
+    else collection = collectionsGraphql[collectionIndex]
 
     let parentFolder = findFolder(folderName, collection, true)
     if (parentFolder && parentFolder.folders) {
@@ -237,16 +283,18 @@ export const mutations = {
     }
   },
 
-  editRequest({ collections }, payload) {
+  editRequest({ collections, collectionsGraphql }, payload) {
     const {
       requestCollectionIndex,
       requestFolderName,
       requestFolderIndex,
       requestNew,
       requestIndex,
+      flag,
     } = payload
-
+    let collection = null
-    let collection = collections[requestCollectionIndex]
+    if (flag == "rest") collection = collections[requestCollectionIndex]
+    else collection = collectionsGraphql[requestCollectionIndex]
 
     if (requestFolderIndex === -1) {
       Vue.set(collection.requests, requestIndex, requestNew)
@@ -257,9 +305,10 @@ export const mutations = {
     Vue.set(folder.requests, requestIndex, requestNew)
   },
 
-  saveRequestAs({ collections }, payload) {
+  saveRequestAs({ collections, collectionsGraphql }, payload) {
-    let { request, collectionIndex, folderName, requestIndex } = payload
+    let { request, collectionIndex, folderName, requestIndex, flag } = payload
 
+    if (flag == "rest") {
       // Filter out all file inputs
       request = {
         ...request,
@@ -267,32 +316,47 @@ export const mutations = {
           param?.value?.[0] instanceof File ? { ...param, value: "" } : param
         ),
       }
+    }
 
     const specifiedCollection = collectionIndex !== undefined
     const specifiedFolder = folderName !== undefined
     const specifiedRequest = requestIndex !== undefined
 
     if (specifiedCollection && specifiedFolder && specifiedRequest) {
-      const folder = findFolder(folderName, collections[collectionIndex])
+      const folder = findFolder(
+        folderName,
+        flag == "rest" ? collections[collectionIndex] : collectionsGraphql[collectionIndex]
+      )
       Vue.set(folder.requests, requestIndex, request)
     } else if (specifiedCollection && specifiedFolder && !specifiedRequest) {
-      const folder = findFolder(folderName, collections[collectionIndex])
+      const folder = findFolder(
+        folderName,
+        flag == "rest" ? collections[collectionIndex] : collectionsGraphql[collectionIndex]
+      )
       const requests = folder.requests
       const lastRequestIndex = requests.length - 1
       Vue.set(requests, lastRequestIndex + 1, request)
     } else if (specifiedCollection && !specifiedFolder && specifiedRequest) {
-      const requests = collections[collectionIndex].requests
+      const requests =
+        flag == "rest"
+          ? collections[collectionIndex].requests
+          : collectionsGraphql[collectionIndex].requests
       Vue.set(requests, requestIndex, request)
     } else if (specifiedCollection && !specifiedFolder && !specifiedRequest) {
-      const requests = collections[collectionIndex].requests
+      const requests =
+        flag == "rest"
+          ? collections[collectionIndex].requests
+          : collectionsGraphql[collectionIndex].requests
       const lastRequestIndex = requests.length - 1
       Vue.set(requests, lastRequestIndex + 1, request)
     }
   },
 
-  removeRequest({ collections }, payload) {
+  removeRequest({ collections, collectionsGraphql }, payload) {
-    const { collectionIndex, folderName, requestIndex } = payload
+    const { collectionIndex, folderName, requestIndex, flag } = payload
-    let collection = collections[collectionIndex]
+    let collection = null
+    if (flag == "rest") collection = collections[collectionIndex]
+    else collection = collectionsGraphql[collectionIndex]
 
     if (collection.name === folderName) {
       collection.requests.splice(requestIndex, 1)
@@ -309,7 +373,11 @@ export const mutations = {
     state.selectedRequest = Object.assign({}, request)
   },
 
-  moveRequest({ collections }, payload) {
+  selectGraphqlRequest(state, { request }) {
+    state.selectedGraphqlRequest = Object.assign({}, request)
+  },
+
+  moveRequest({ collections, collectionsGraphql }, payload) {
     const {
       oldCollectionIndex,
       newCollectionIndex,
@@ -317,11 +385,15 @@ export const mutations = {
       newFolderName,
       oldFolderName,
       requestIndex,
+      flag,
     } = payload
-
     const isCollection = newFolderIndex === -1
-    const oldCollection = collections[oldCollectionIndex]
+    let oldCollection = null
-    const newCollection = collections[newCollectionIndex]
+    if (flag == "rest") oldCollection = collections[oldCollectionIndex]
+    else oldCollection = collectionsGraphql[oldCollectionIndex]
+    let newCollection = null
+    if (flag == "rest") newCollection = collections[newCollectionIndex]
+    else newCollection = collectionsGraphql[newCollectionIndex]
     const request = findRequest(oldFolderName, oldCollection, requestIndex)
 
     if (isCollection) {