Merge pull request #816 from yeatmanlab/ref/318/query-composables-dev…

…-tools

Make TanStack Query dev tools load conditionally

.github/workflows/firebase-hosting-staging.yml

@@ -18,7 +18,9 @@ jobs:
       - name: 'vite staging build'
         env:
           NODE_OPTIONS: '--max_old_space_size=8192'
-        run: export VITE_STAGING_BUILD=true && npm ci && npm run build
+          VITE_STAGING_BUILD: true
+          VITE_QUERY_DEVTOOLS_ENABLED: true
+        run: npm ci && npm run build
       - uses: FirebaseExtended/action-hosting-deploy@v0
         with:
           repoToken: '${{ secrets.GITHUB_TOKEN }}'

src/App.vue

@@ -20,28 +20,28 @@
     <SessionTimer v-if="loadSessionTimeoutHandler" />
   </div>
 
-  <VueQueryDevtools />
+  <VueQueryDevtools v-if="showDevtools" />
 </template>
 
 <script setup>
-// @TODO: Make conditional import for local dev environment only.
-import { VueQueryDevtools } from '@tanstack/vue-query-devtools';
-
-import { computed, onBeforeMount, ref, defineAsyncComponent, onUpdated } from 'vue';
+import { computed, onBeforeMount, onMounted, ref, defineAsyncComponent, onUpdated } from 'vue';
 import { useRoute } from 'vue-router';
 import { useRecaptchaProvider } from 'vue-recaptcha';
 import { Head } from '@unhead/vue/components';
-
 import NavBar from '@/components/NavBar.vue';
 
 const SessionTimer = defineAsyncComponent(() => import('@/containers/SessionTimer/SessionTimer.vue'));
+const VueQueryDevtools = defineAsyncComponent(() =>
+  import('@tanstack/vue-query-devtools').then((module) => module.VueQueryDevtools),
+);
 
 import { useAuthStore } from '@/store/auth';
 import { fetchDocById } from '@/helpers/query/utils';
 import { i18n } from '@/translations/i18n';
 
 const isLevante = import.meta.env.MODE === 'LEVANTE';
 const isAuthStoreReady = ref(false);
+const showDevtools = ref(false);
 
 const authStore = useAuthStore();
 const route = useRoute();
@@ -101,4 +101,17 @@ onBeforeMount(async () => {
   });
   isAuthStoreReady.value = true;
 });
+
+onMounted(() => {
+  const isLocal = import.meta.env.MODE === 'development';
+  const isDevToolsEnabled = import.meta.env.VITE_QUERY_DEVTOOLS_ENABLED === 'true';
+
+  if (isLocal) {
+    showDevtools.value = true;
+  } else if (isDevToolsEnabled) {
+    window.toggleDevtools = () => {
+      showDevtools.value = !showDevtools.value;
+    };
+  }
+});
 </script>