Aleksei/graphql parameter change (#3416)

* added parameter to persist API url change

* added parameter to persist API url change

* changelog

* refactor get graphql link

* refactor get graphql link

* fixed test

* kill abbreviation

Co-authored-by: Fabian <[email protected]>

changes/aleksei_graphql_parameter_change

@@ -0,0 +1,2 @@
+[Changed] [#3415](https://github.com/cosmos/lunie/issues/3415) graphql url parameter changed to 'api' @iambeone
+[Added] [#3415](https://github.com/cosmos/lunie/issues/3415) added a parameter to persist API change @iambeone

src/ActionModal/utils/ActionManager.js

@@ -3,7 +3,7 @@ import { getSigner } from "./signer"
 import transaction from "./transactionTypes"
 import { uatoms } from "scripts/num"
 import { toMicroDenom } from "src/scripts/common"
-import { getURLParams } from "scripts/url"
+import { getGraphqlHost } from "scripts/url"
 import {
   getMessage,
   getMultiMessage,
@@ -77,16 +77,11 @@ export default class ActionManager {
 
     const command = payload.simulate ? "estimate" : "broadcast"
 
-    // TODO refactor and put into config.js
-    const graphqlHost = urlParams =>
-      (urlParams.graphql ? decodeURIComponent(urlParams.graphql) : false) ||
-      config.graphqlHost
-    const urlParams = getURLParams(window)
+    const graphqlHost = getGraphqlHost()
 
-    return fetch(
-      `${graphqlHost(urlParams)}/transaction/${command}`,
-      options
-    ).then(r => r.json())
+    return fetch(`${graphqlHost}/transaction/${command}`, options).then(result =>
+      result.json()
+    )
   }
 
   async simulateTxAPI(context, type, txProps, memo) {

src/gql/apollo.js

@@ -8,16 +8,12 @@ import { InMemoryCache } from "apollo-cache-inmemory"
 import { split } from "apollo-link"
 import { getMainDefinition } from "apollo-utilities"
 import VueApollo from "vue-apollo"
-import config from "src/../config"
+import { getGraphqlHost } from "scripts/url"
 
 Vue.use(VueApollo)
 
-const graphqlHost = urlParams =>
-  (urlParams.graphql ? decodeURIComponent(urlParams.graphql) : false) ||
-  config.graphqlHost
-
-const makeHttpLink = urlParams => {
-  const host = graphqlHost(urlParams)
+const makeHttpLink = () => {
+  const host = getGraphqlHost()
   const uri = host
 
   // We create a createPersistedQueryLink to lower network usage.
@@ -31,14 +27,14 @@ const makeHttpLink = urlParams => {
   )
 }
 
-const makeWebSocketLink = urlParams => {
-  const host = graphqlHost(urlParams)
+const makeWebSocketLink = () => {
+  const host = getGraphqlHost()
   const uri = `${host.replace("http", "ws")}/graphql`
   console.log("ws", uri)
   return new WebSocketLink({ uri })
 }
 
-const createApolloClient = urlParams => {
+const createApolloClient = () => {
   const link = split(
     ({ query }) => {
       const definition = getMainDefinition(query)
@@ -47,8 +43,8 @@ const createApolloClient = urlParams => {
         definition.operation === "subscription"
       )
     },
-    makeWebSocketLink(urlParams),
-    makeHttpLink(urlParams)
+    makeWebSocketLink(),
+    makeHttpLink()
   )
 
   const cache = new InMemoryCache()
@@ -61,9 +57,9 @@ const createApolloClient = urlParams => {
   })
 }
 
-export const createApolloProvider = urlParams => {
+export const createApolloProvider = () => {
   return new VueApollo({
-    defaultClient: createApolloClient(urlParams),
+    defaultClient: createApolloClient(),
     defaultOptions: {
       // apollo options applied to all queries in components
       $query: {

src/initializeApp.js

@@ -30,7 +30,7 @@ export default function init(urlParams, env = process.env) {
 
   console.log(`Expecting backend at: ${config.graphqlHost}`)
 
-  const apolloProvider = createApolloProvider(urlParams)
+  const apolloProvider = createApolloProvider()
   const apolloClient = apolloProvider.clients.defaultClient
 
   const store = Store({ apollo: apolloClient })

src/scripts/url.js

@@ -1,8 +1,18 @@
+import config from "src/../config"
+
 export function getURLParams(window) {
   const queries = window.location.search.slice(1).split(`&`)
   const parameters = queries.reduce((config, current) => {
     const [name, value] = current.split(`=`)
-    if ([`experimental`, `insecure`, `graphql`, `network`].includes(name)) {
+    if (
+      [
+        `experimental`,
+        `insecure`,
+        `api`,
+        `iwouldliketochangetheapipersistentlyandiknowwhatido`,
+        `network`
+      ].includes(name)
+    ) {
       return {
         ...config,
         [name]: value
@@ -13,3 +23,51 @@ export function getURLParams(window) {
 
   return parameters
 }
+
+export const getGraphqlHost = () => {
+  const urlParams = getURLParams(window)
+
+  return (
+    checkPersistentAPI(urlParams) ||
+    (urlParams.api ? decodeURIComponent(urlParams.api) : false) ||
+    config.graphqlHost
+  )
+}
+
+// persistent api
+// setting api url in localStorage
+const checkPersistentAPI = urlParams => {
+  if (
+    typeof urlParams.iwouldliketochangetheapipersistentlyandiknowwhatido !==
+    "undefined"
+  ) {
+    // removing presistent api on false value
+    if (
+      !urlParams.iwouldliketochangetheapipersistentlyandiknowwhatido ||
+      urlParams.iwouldliketochangetheapipersistentlyandiknowwhatido == "false"
+    ) {
+      localStorage.removeItem(`persistentapi`)
+      return false
+    }
+    // setting presistent api
+    if (urlParams.iwouldliketochangetheapipersistentlyandiknowwhatido) {
+      localStorage.setItem(
+        `persistentapi`,
+        decodeURIComponent(
+          urlParams.iwouldliketochangetheapipersistentlyandiknowwhatido
+        )
+      )
+      return decodeURIComponent(
+        urlParams.iwouldliketochangetheapipersistentlyandiknowwhatido
+      )
+    }
+  }
+
+  if (localStorage.getItem(`persistentapi`)) {
+    console.warn(
+      "Your API version differ from normal. Query ?iwouldliketochangetheapipersistentlyandiknowwhatido=false to reset"
+    )
+    return localStorage.getItem(`persistentapi`)
+  }
+  return false
+}

tests/unit/specs/scripts/url.spec.js

@@ -4,13 +4,13 @@ describe(`URL functions`, () => {
   it(`gets query params`, () => {
     const windowMock = {
       location: {
-        search: `?network=y&graphql=z`
+        search: `?network=y&api=z`
       }
     }
 
     expect(getURLParams(windowMock)).toEqual({
       network: `y`,
-      graphql: "z"
+      api: "z"
     })
   })