feat: gql revamp (#2644)

Co-authored-by: Liyas Thomas <liyascthomas@gmail.com>
Co-authored-by: Andrew Bastin <andrewbastin.k@gmail.com>

packages/hoppscotch-common/src/newstore/GQLSession.ts

@@ -1,278 +0,0 @@
-import { distinctUntilChanged, pluck } from "rxjs/operators"
-import {
-  GQLHeader,
-  HoppGQLRequest,
-  makeGQLRequest,
-  HoppGQLAuth,
-} from "@hoppscotch/data"
-import DispatchingStore, { defineDispatchers } from "./DispatchingStore"
-import { useStream } from "@composables/stream"
-
-type GQLSession = {
-  request: HoppGQLRequest
-  schema: string
-  response: string
-}
-
-export const defaultGQLSession: GQLSession = {
-  request: makeGQLRequest({
-    name: "Untitled request",
-    url: "https://echo.hoppscotch.io/graphql",
-    headers: [],
-    variables: `{
-  "id": "1"
-}`,
-    query: `query Request {
-  method
-  url
-  headers {
-    key
-    value
-  }
-}
-`,
-    auth: {
-      authType: "none",
-      authActive: true,
-    },
-  }),
-  schema: "",
-  response: "",
-}
-
-const dispatchers = defineDispatchers({
-  setSession(_: GQLSession, { session }: { session: GQLSession }) {
-    return session
-  },
-  setName(curr: GQLSession, { newName }: { newName: string }) {
-    return {
-      request: {
-        ...curr.request,
-        name: newName,
-      },
-    }
-  },
-  setURL(curr: GQLSession, { newURL }: { newURL: string }) {
-    return {
-      request: {
-        ...curr.request,
-        url: newURL,
-      },
-    }
-  },
-  setHeaders(curr: GQLSession, { headers }: { headers: GQLHeader[] }) {
-    return {
-      request: {
-        ...curr.request,
-        headers,
-      },
-    }
-  },
-  addHeader(curr: GQLSession, { header }: { header: GQLHeader }) {
-    return {
-      request: {
-        ...curr.request,
-        headers: [...curr.request.headers, header],
-      },
-    }
-  },
-  removeHeader(curr: GQLSession, { headerIndex }: { headerIndex: number }) {
-    return {
-      request: {
-        ...curr.request,
-        headers: curr.request.headers.filter((_x, i) => i !== headerIndex),
-      },
-    }
-  },
-  updateHeader(
-    curr: GQLSession,
-    {
-      headerIndex,
-      updatedHeader,
-    }: { headerIndex: number; updatedHeader: GQLHeader }
-  ) {
-    return {
-      request: {
-        ...curr.request,
-        headers: curr.request.headers.map((x, i) =>
-          i === headerIndex ? updatedHeader : x
-        ),
-      },
-    }
-  },
-  setQuery(curr: GQLSession, { newQuery }: { newQuery: string }) {
-    return {
-      request: {
-        ...curr.request,
-        query: newQuery,
-      },
-    }
-  },
-  setVariables(curr: GQLSession, { newVariables }: { newVariables: string }) {
-    return {
-      request: {
-        ...curr.request,
-        variables: newVariables,
-      },
-    }
-  },
-  setResponse(_: GQLSession, { newResponse }: { newResponse: string }) {
-    return {
-      response: newResponse,
-    }
-  },
-  setAuth(curr: GQLSession, { newAuth }: { newAuth: HoppGQLAuth }) {
-    return {
-      request: {
-        ...curr.request,
-        auth: newAuth,
-      },
-    }
-  },
-})
-
-export const gqlSessionStore = new DispatchingStore(
-  defaultGQLSession,
-  dispatchers
-)
-
-export function setGQLURL(newURL: string) {
-  gqlSessionStore.dispatch({
-    dispatcher: "setURL",
-    payload: {
-      newURL,
-    },
-  })
-}
-
-export function setGQLHeaders(headers: GQLHeader[]) {
-  gqlSessionStore.dispatch({
-    dispatcher: "setHeaders",
-    payload: {
-      headers,
-    },
-  })
-}
-
-export function addGQLHeader(header: GQLHeader) {
-  gqlSessionStore.dispatch({
-    dispatcher: "addHeader",
-    payload: {
-      header,
-    },
-  })
-}
-
-export function updateGQLHeader(headerIndex: number, updatedHeader: GQLHeader) {
-  gqlSessionStore.dispatch({
-    dispatcher: "updateHeader",
-    payload: {
-      headerIndex,
-      updatedHeader,
-    },
-  })
-}
-
-export function removeGQLHeader(headerIndex: number) {
-  gqlSessionStore.dispatch({
-    dispatcher: "removeHeader",
-    payload: {
-      headerIndex,
-    },
-  })
-}
-
-export function clearGQLHeaders() {
-  gqlSessionStore.dispatch({
-    dispatcher: "setHeaders",
-    payload: {
-      headers: [],
-    },
-  })
-}
-
-export function setGQLQuery(newQuery: string) {
-  gqlSessionStore.dispatch({
-    dispatcher: "setQuery",
-    payload: {
-      newQuery,
-    },
-  })
-}
-
-export function setGQLVariables(newVariables: string) {
-  gqlSessionStore.dispatch({
-    dispatcher: "setVariables",
-    payload: {
-      newVariables,
-    },
-  })
-}
-
-export function setGQLResponse(newResponse: string) {
-  gqlSessionStore.dispatch({
-    dispatcher: "setResponse",
-    payload: {
-      newResponse,
-    },
-  })
-}
-
-export function getGQLSession() {
-  return gqlSessionStore.value
-}
-
-export function setGQLSession(session: GQLSession) {
-  gqlSessionStore.dispatch({
-    dispatcher: "setSession",
-    payload: {
-      session,
-    },
-  })
-}
-
-export function useGQLRequestName() {
-  return useStream(gqlName$, gqlSessionStore.value.request.name, (newName) => {
-    gqlSessionStore.dispatch({
-      dispatcher: "setName",
-      payload: { newName },
-    })
-  })
-}
-
-export function setGQLAuth(newAuth: HoppGQLAuth) {
-  gqlSessionStore.dispatch({
-    dispatcher: "setAuth",
-    payload: {
-      newAuth,
-    },
-  })
-}
-
-export const gqlName$ = gqlSessionStore.subject$.pipe(
-  pluck("request", "name"),
-  distinctUntilChanged()
-)
-export const gqlURL$ = gqlSessionStore.subject$.pipe(
-  pluck("request", "url"),
-  distinctUntilChanged()
-)
-export const gqlQuery$ = gqlSessionStore.subject$.pipe(
-  pluck("request", "query"),
-  distinctUntilChanged()
-)
-export const gqlVariables$ = gqlSessionStore.subject$.pipe(
-  pluck("request", "variables"),
-  distinctUntilChanged()
-)
-export const gqlHeaders$ = gqlSessionStore.subject$.pipe(
-  pluck("request", "headers"),
-  distinctUntilChanged()
-)
-
-export const gqlResponse$ = gqlSessionStore.subject$.pipe(
-  pluck("response"),
-  distinctUntilChanged()
-)
-
-export const gqlAuth$ = gqlSessionStore.subject$.pipe(pluck("request", "auth"))

packages/hoppscotch-common/src/newstore/localpersistence.ts

@@ -48,8 +48,10 @@ import {
   loadTabsFromPersistedState,
   persistableTabState,
 } from "~/helpers/rest/tab"
-import { debounceTime } from "rxjs"
-import { gqlSessionStore, setGQLSession } from "./GQLSession"
+import {
+  loadTabsFromPersistedState as loadGQLTabsFromPersistedState,
+  persistableTabState as persistableGQLTabState,
+} from "~/helpers/graphql/tab"
 
 function checkAndMigrateOldSettings() {
   if (window.localStorage.getItem("selectedEnvIndex")) {
@@ -340,26 +342,27 @@ export function setupRESTTabsPersistence() {
   )
 }
 
-// temporary persistence for GQL session
-export function setupGQLPersistence() {
+function setupGQLTabsPersistence() {
   try {
-    const state = window.localStorage.getItem("gqlState")
+    const state = window.localStorage.getItem("gqlTabState")
     if (state) {
       const data = JSON.parse(state)
-      data["schema"] = ""
-      data["response"] = ""
-      setGQLSession(data)
+      loadGQLTabsFromPersistedState(data)
     }
   } catch (e) {
     console.error(
-      `Failed parsing persisted GraphQL state, state:`,
-      window.localStorage.getItem("gqlState")
+      `Failed parsing persisted tab state, state:`,
+      window.localStorage.getItem("gqlTabState")
     )
   }
 
-  gqlSessionStore.subject$.pipe(debounceTime(500)).subscribe((state) => {
-    window.localStorage.setItem("gqlState", JSON.stringify(state))
-  })
+  watchDebounced(
+    persistableGQLTabState,
+    (state) => {
+      window.localStorage.setItem("gqlTabState", JSON.stringify(state))
+    },
+    { debounce: 500, deep: true }
+  )
 }
 
 export function setupLocalPersistence() {
@@ -368,7 +371,9 @@ export function setupLocalPersistence() {
   setupLocalStatePersistence()
   setupSettingsPersistence()
   setupRESTTabsPersistence()
-  setupGQLPersistence()
+
+  setupGQLTabsPersistence()
+
   setupHistoryPersistence()
   setupCollectionsPersistence()
   setupGlobalEnvsPersistence()