feat: graphql request history and collection restore

components/collections/SaveRequest.vue

@@ -55,6 +55,7 @@ import {
   editGraphqlRequest,
   saveGraphqlRequestAs,
 } from "~/newstore/collections"
+import { getGQLSession, useGQLRequestName } from "~/newstore/GQLSession"
 import { getRESTRequest, useRESTRequestName } from "~/newstore/RESTSession"
 
 export default defineComponent({
@@ -63,9 +64,10 @@ export default defineComponent({
     mode: { type: String, default: "rest" },
     show: Boolean,
   },
-  setup() {
+  setup(props) {
     return {
-      requestName: useRESTRequestName(),
+      requestName:
+        props.mode === "rest" ? useRESTRequestName() : useGQLRequestName(),
     }
   },
   data() {
@@ -118,7 +120,8 @@ export default defineComponent({
         return
       }
 
-      const requestUpdated = getRESTRequest()
+      const requestUpdated =
+        this.mode === "rest" ? getRESTRequest() : getGQLSession()
 
       // Filter out all REST file inputs
       if (this.mode === "rest" && requestUpdated.bodyParams) {

components/collections/graphql/Request.vue

@@ -92,6 +92,7 @@
 <script lang="ts">
 import Vue from "vue"
 import { removeGraphqlRequest } from "~/newstore/collections"
+import { setGQLSession } from "~/newstore/GQLSession"
 
 export default Vue.extend({
   props: {
@@ -133,6 +134,16 @@ export default Vue.extend({
     selectRequest() {
       if (this.savingMode) {
         this.pick()
+      } else {
+        setGQLSession({
+          name: this.$props.request.name,
+          url: this.$props.request.url,
+          query: this.$props.request.query,
+          headers: this.$props.request.headers,
+          variables: this.$props.request.variables,
+          schema: "",
+          response: "",
+        })
       }
     },
     dragStart({ dataTransfer }: any) {

components/graphql/RequestOptions.vue

@@ -265,7 +265,6 @@
     <CollectionsSaveRequest
       mode="graphql"
       :show="showSaveRequestModal"
-      :editing-request="editRequest"
       @hide-modal="hideRequestModal"
     />
   </div>
@@ -333,7 +332,6 @@ export default defineComponent({
     const prettifyQueryIcon = ref("photo_filter")
     const copyVariablesIcon = ref("content_copy")
 
-    const editRequest = ref({})
     const showSaveRequestModal = ref(false)
 
     const schema = useReadonlyStream(props.conn.schemaString$, "")
@@ -408,7 +406,6 @@ export default defineComponent({
     }
 
     const hideRequestModal = () => {
-      editRequest.value = {}
       showSaveRequestModal.value = false
     }
 
@@ -419,14 +416,6 @@ export default defineComponent({
     }
 
     const saveRequest = () => {
-      // TODO: Make the modal get the data from the session state
-      editRequest.value = {
-        url: url.value,
-        query: gqlQueryString.value,
-        headers: headers.value,
-        variables: variableString.value,
-      }
-
       showSaveRequestModal.value = true
     }
 
@@ -463,7 +452,6 @@ export default defineComponent({
 
       queryEditor,
 
-      editRequest,
       showSaveRequestModal,
       hideRequestModal,
 

components/history/graphql/Card.vue

@@ -15,7 +15,7 @@
           group-hover:text-secondaryDark
         "
         data-testid="restore_history_entry"
-        @click="$emit('use-entry')"
+        @click="useEntry"
       >
         <span class="truncate">
           {{ entry.url }}
@@ -60,30 +60,53 @@
           truncate
         "
         data-testid="restore_history_entry"
-        @click="$emit('use-entry')"
+        @click="useEntry"
         >{{ line }}</span
       >
     </div>
   </div>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { computed, defineComponent, ref } from "@nuxtjs/composition-api"
+import { setGQLSession } from "~/newstore/GQLSession"
+
+// TODO: Concrete entry data type
+
+export default defineComponent({
   props: {
     entry: { type: Object, default: () => {} },
     showMore: Boolean,
   },
-  data() {
+  setup(props) {
+    const expand = ref(false)
+
+    const query = computed(() =>
+      expand
+        ? (props.entry.query.split("\n") as string[])
+        : (props.entry.query
+            .split("\n")
+            .slice(0, 2)
+            .concat(["..."]) as string[])
+    )
+
+    const useEntry = () => {
+      setGQLSession({
+        name: "",
+        url: props.entry.url,
+        headers: props.entry.headers,
+        response: props.entry.response,
+        schema: "",
+        query: props.entry.query,
+        variables: props.entry.variables,
+      })
+    }
+
     return {
-      expand: false,
+      expand,
+      query,
+      useEntry,
     }
   },
-  computed: {
-    query() {
-      return this.expand
-        ? this.entry.query.split("\n")
-        : this.entry.query.split("\n").slice(0, 2).concat(["..."])
-    },
-  },
-}
+})
 </script>

components/history/index.vue

@@ -144,8 +144,6 @@ export default defineComponent({
     },
     useHistory(entry: any) {
       if (this.page === "rest") setRESTRequest(entry)
-      // TODO: restore gql entry to request section
-      else console.log("not implemented yet")
     },
     deleteHistory(entry: any) {
       if (this.page === "rest") deleteRESTHistoryEntry(entry)