refactor: gql request object and history typing updates

components/collections/graphql/Request.vue

@@ -97,7 +97,8 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from "@nuxtjs/composition-api"
+import { defineComponent, PropType } from "@nuxtjs/composition-api"
+import { HoppGQLRequest, makeGQLRequest } from "~/helpers/types/HoppGQLRequest"
 import { removeGraphqlRequest } from "~/newstore/collections"
 import { setGQLSession } from "~/newstore/GQLSession"
 
@@ -107,7 +108,7 @@ export default defineComponent({
     picked: { type: Object, default: null },
     // Whether the request is being saved (activate 'select' event)
     savingMode: { type: Boolean, default: false },
-    request: { type: Object, default: () => {} },
+    request: { type: Object as PropType<HoppGQLRequest>, default: () => {} },
     folderPath: { type: String, default: null },
     requestIndex: { type: Number, default: null },
     doc: Boolean,
@@ -143,11 +144,13 @@ export default defineComponent({
         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,
+          request: makeGQLRequest({
+            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: "",
         })

components/graphql/RequestOptions.vue

@@ -291,9 +291,10 @@ import {
 } from "~/newstore/GQLSession"
 import { commonHeaders } from "~/helpers/headers"
 import { GQLConnection } from "~/helpers/GQLConnection"
-import { addGraphqlHistoryEntry } from "~/newstore/history"
+import { makeGQLHistoryEntry, addGraphqlHistoryEntry } from "~/newstore/history"
 import { logHoppRequestRunToAnalytics } from "~/helpers/fb/analytics"
 import { getCurrentStrategyID } from "~/helpers/network"
+import { makeGQLRequest } from "~/helpers/types/HoppGQLRequest"
 
 export default defineComponent({
   props: {
@@ -377,20 +378,19 @@ export default defineComponent({
 
         response.value = JSON.stringify(JSON.parse(responseText), null, 2)
 
-        const historyEntry = {
-          url: runURL,
-          query: runQuery,
-          variables: runVariables,
-          star: false,
-          headers: runHeaders,
-          response: response.value,
-          date: new Date().toLocaleDateString(),
-          time: new Date().toLocaleTimeString(),
-          updatedOn: new Date(),
-          duration,
-        }
-
-        addGraphqlHistoryEntry(historyEntry)
+        addGraphqlHistoryEntry(
+          makeGQLHistoryEntry({
+            request: makeGQLRequest({
+              name: "",
+              url: runURL,
+              query: runQuery,
+              headers: runHeaders,
+              variables: runVariables,
+            }),
+            response: response.value,
+            star: false,
+          })
+        )
 
         $toast.success(t("state.finished_in", { duration }).toString(), {
           icon: "done",

components/graphql/Sidebar.vue

@@ -213,10 +213,10 @@ import {
 import { GraphQLField, GraphQLType } from "graphql"
 import { map } from "rxjs/operators"
 import { GQLConnection } from "~/helpers/GQLConnection"
+import { GQLHeader } from "~/helpers/types/HoppGQLRequest"
 import { copyToClipboard } from "~/helpers/utils/clipboard"
 import { useReadonlyStream } from "~/helpers/utils/composables"
 import {
-  GQLHeader,
   setGQLHeaders,
   setGQLQuery,
   setGQLResponse,

components/history/graphql/Card.vue

@@ -59,14 +59,19 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, ref } from "@nuxtjs/composition-api"
+import {
+  computed,
+  defineComponent,
+  PropType,
+  ref,
+} from "@nuxtjs/composition-api"
+import { makeGQLRequest } from "~/helpers/types/HoppGQLRequest"
 import { setGQLSession } from "~/newstore/GQLSession"
-
-// TODO: Concrete entry data type
+import { GQLHistoryEntry } from "~/newstore/history"
 
 export default defineComponent({
   props: {
-    entry: { type: Object, default: () => {} },
+    entry: { type: Object as PropType<GQLHistoryEntry>, default: () => {} },
     showMore: Boolean,
   },
   setup(props) {
@@ -74,8 +79,8 @@ export default defineComponent({
 
     const query = computed(() =>
       expand.value
-        ? (props.entry.query.split("\n") as string[])
-        : (props.entry.query
+        ? (props.entry.request.query.split("\n") as string[])
+        : (props.entry.request.query
             .split("\n")
             .slice(0, 2)
             .concat(["..."]) as string[])
@@ -83,13 +88,15 @@ export default defineComponent({
 
     const useEntry = () => {
       setGQLSession({
-        name: "",
-        url: props.entry.url,
-        headers: props.entry.headers,
-        response: props.entry.response,
+        request: makeGQLRequest({
+          name: props.entry.request.name,
+          url: props.entry.request.url,
+          headers: props.entry.request.headers,
+          query: props.entry.request.query,
+          variables: props.entry.request.variables,
+        }),
         schema: "",
-        query: props.entry.query,
-        variables: props.entry.variables,
+        response: props.entry.response,
       })
     }
 

components/history/index.vue

@@ -96,6 +96,8 @@ import {
   toggleRESTHistoryEntryStar,
   deleteGraphqlHistoryEntry,
   deleteRESTHistoryEntry,
+  RESTHistoryEntry,
+  GQLHistoryEntry,
 } from "~/newstore/history"
 import { setRESTRequest } from "~/newstore/RESTSession"
 
@@ -105,7 +107,7 @@ export default defineComponent({
   },
   setup(props) {
     return {
-      history: useReadonlyStream(
+      history: useReadonlyStream<RESTHistoryEntry[] | GQLHistoryEntry[]>(
         props.page === "rest" ? restHistory$ : graphqlHistory$,
         []
       ),
@@ -120,19 +122,23 @@ export default defineComponent({
   },
   computed: {
     filteredHistory(): any[] {
-      const filteringHistory = this.history
+      const filteringHistory = this.history as Array<
+        RESTHistoryEntry | GQLHistoryEntry
+      >
 
-      return filteringHistory.filter((entry) => {
-        const filterText = this.filterText.toLowerCase()
-        return Object.keys(entry).some((key) => {
-          let value = entry[key]
-          if (value) {
-            value = typeof value !== "string" ? value.toString() : value
-            return value.toLowerCase().includes(filterText)
-          }
-          return false
-        })
-      })
+      return filteringHistory.filter(
+        (entry: RESTHistoryEntry | GQLHistoryEntry) => {
+          const filterText = this.filterText.toLowerCase()
+          return Object.keys(entry).some((key) => {
+            let value = entry[key as keyof typeof entry]
+            if (value) {
+              value = typeof value !== "string" ? value.toString() : value
+              return value.toLowerCase().includes(filterText)
+            }
+            return false
+          })
+        }
+      )
     },
   },
   methods: {