Refactor function to improve performance

web/frontend/src/helpers/vueAuthenticatedFetch.js → web/frontend/src/helpers/useAuthenticatedFetch.js

@@ -1,19 +1,11 @@
 import { authenticatedFetch } from '@shopify/app-bridge/utilities'
-import { createApp } from '@shopify/app-bridge'
 import { Redirect } from '@shopify/app-bridge/actions'
+import { initAppBridge } from '../plugins/appBridge'
 
-export function useAuthenticatedFetchVue() {
-  const host = new URLSearchParams(location.search).get('host') || window.__SHOPIFY_DEV_HOST
-
-  window.__SHOPIFY_DEV_HOST = host
-  const appBridge = createApp({
-    apiKey: process.env.SHOPIFY_API_KEY,
-    host: host,
-    forceRedirect: true
-  })
+export function useAuthenticatedFetch() {
+  const appBridge = initAppBridge()
   const app = appBridge
   const fetchFunction = authenticatedFetch(app)
-
   return async (uri, options) => {
     const response = await fetchFunction(uri, options)
     checkHeadersForReauthorization(response.headers, app)

web/frontend/src/main.js

@@ -1,5 +1,5 @@
 import './assets/main.css'
-import { shopifyAppBridgePlugin } from './helpers/appBridge.js'
+import { ShopifyAppBridge } from '@/plugins/appBridge.js'
 
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
@@ -8,7 +8,7 @@ import App from './App.vue'
 import router from './router'
 
 const app = createApp(App)
-app.use(shopifyAppBridgePlugin)
+app.use(ShopifyAppBridge)
 app.use(createPinia())
 app.use(router)
 

web/frontend/src/plugins/appBridge.js

@@ -0,0 +1,23 @@
+// @ts-nocheck
+
+import { createApp } from '@shopify/app-bridge'
+export const initAppBridge = () => {
+  const host = new URLSearchParams(location.search).get('host') || window.__SHOPIFY_DEV_HOST
+  window.__SHOPIFY_DEV_HOST = host
+  return createApp({
+    apiKey: process.env.SHOPIFY_API_KEY || '',
+    host: host,
+    forceRedirect: true
+  })
+}
+
+export const ShopifyAppBridge = {
+  /**
+   * @param {import('vue').App} app
+   */
+  install: (app) => {
+    const useAppBridge = initAppBridge()
+    app.config.globalProperties.$useAppBridge = useAppBridge
+    app.provide('useAppBridge', useAppBridge)
+  }
+}

web/frontend/src/stores/counter.js

@@ -1,10 +1,10 @@
 import { ref } from 'vue'
 import { defineStore } from 'pinia'
-import { useAuthenticatedFetchVue } from '../helpers/vueAuthenticatedFetch.js'
+import { useAuthenticatedFetch } from '../helpers/useAuthenticatedFetch'
 
 export const useProductCounterStore = defineStore('productCounter', () => {
   const count = ref(0)
-  const fetch = useAuthenticatedFetchVue()
+  const fetch = useAuthenticatedFetch()
 
   const getProducts = async () => {
     try {