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>
+<script lang="ts">
-export default {
+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)

newstore/GQLSession.ts

@@ -1,5 +1,6 @@
 import { distinctUntilChanged, pluck } from "rxjs/operators"
 import DispatchingStore, { defineDispatchers } from "./DispatchingStore"
+import { useStream } from "~/helpers/utils/composables"
 
 export type GQLHeader = {
   key: string
@@ -8,8 +9,8 @@ export type GQLHeader = {
 }
 
 type GQLSession = {
+  name: string
   url: string
-  connected: boolean
   headers: GQLHeader[]
   schema: string
   query: string
@@ -17,9 +18,9 @@ type GQLSession = {
   response: string
 }
 
-const defaultGQLSession: GQLSession = {
+export const defaultGQLSession: GQLSession = {
+  name: "",
   url: "https://rickandmortyapi.com/graphql",
-  connected: false,
   headers: [],
   schema: "",
   query: `query GetCharacter($id: ID!) {
@@ -33,16 +34,19 @@ const defaultGQLSession: GQLSession = {
 }
 
 const dispatchers = defineDispatchers({
+  setSession(_: GQLSession, { session }: { session: GQLSession }) {
+    return session
+  },
+  setName(_: GQLSession, { newName }: { newName: string }) {
+    return {
+      name: newName,
+    }
+  },
   setURL(_: GQLSession, { newURL }: { newURL: string }) {
     return {
       url: newURL,
     }
   },
-  setConnected(_: GQLSession, { newStatus }: { newStatus: boolean }) {
-    return {
-      connected: newStatus,
-    }
-  },
   setHeaders(_, { headers }: { headers: GQLHeader[] }) {
     return {
       headers,
@@ -102,15 +106,6 @@ export function setGQLURL(newURL: string) {
   })
 }
 
-export function setGQLConnected(newStatus: boolean) {
-  gqlSessionStore.dispatch({
-    dispatcher: "setConnected",
-    payload: {
-      newStatus,
-    },
-  })
-}
-
 export function setGQLHeaders(headers: GQLHeader[]) {
   gqlSessionStore.dispatch({
     dispatcher: "setHeaders",
@@ -184,12 +179,36 @@ export function setGQLResponse(newResponse: string) {
   })
 }
 
-export const gqlURL$ = gqlSessionStore.subject$.pipe(
+export function getGQLSession() {
-  pluck("url"),
+  return gqlSessionStore.value
+}
+
+export function setGQLSession(session: GQLSession) {
+  gqlSessionStore.dispatch({
+    dispatcher: "setSession",
+    payload: {
+      session,
+    },
+  })
+}
+
+export function useGQLRequestName() {
+  return useStream(gqlName$, gqlSessionStore.value.name, (val) => {
+    gqlSessionStore.dispatch({
+      dispatcher: "setName",
+      payload: {
+        newName: val,
+      },
+    })
+  })
+}
+
+export const gqlName$ = gqlSessionStore.subject$.pipe(
+  pluck("name"),
   distinctUntilChanged()
 )
-export const gqlConnected$ = gqlSessionStore.subject$.pipe(
+export const gqlURL$ = gqlSessionStore.subject$.pipe(
-  pluck("connected"),
+  pluck("url"),
   distinctUntilChanged()
 )
 export const gqlQuery$ = gqlSessionStore.subject$.pipe(