From 096dd9586d6aeb2992b24d21ab77ace584b5ffc1 Mon Sep 17 00:00:00 2001
From: einhornimmond <info@einhornimmond.de>
Date: Tue, 4 Mar 2025 17:02:14 +0100
Subject: [PATCH] move around more graphql queries

---
 .../ProjectBranding/ProjectBrandingForm.vue   | 15 +++------
 admin/src/graphql/projectBranding.graphql     |  7 ++++
 frontend/package.json                         |  1 +
 frontend/src/graphql/projectBranding.graphql  |  3 ++
 frontend/src/layouts/AuthLayout.vue           | 18 ++++------
 frontend/vite.config.js                       |  4 ++-
 frontend/yarn.lock                            | 33 ++++++++++++++++---
 7 files changed, 53 insertions(+), 28 deletions(-)
 create mode 100644 frontend/src/graphql/projectBranding.graphql

diff --git a/admin/src/components/ProjectBranding/ProjectBrandingForm.vue b/admin/src/components/ProjectBranding/ProjectBrandingForm.vue
index 236b5f44b..90e928c41 100644
--- a/admin/src/components/ProjectBranding/ProjectBrandingForm.vue
+++ b/admin/src/components/ProjectBranding/ProjectBrandingForm.vue
@@ -75,11 +75,11 @@
 <script setup>
 import ValidatedInput from '@/components/input/ValidatedInput'
 import ListHumhubSpaces from '@/components/ProjectBranding/ListHumhubSpaces.vue'
+import { spaceWithNameAndDescription } from '@/graphql/projectBranding.graphql'
 import { useI18n } from 'vue-i18n'
 import { reactive, computed, watch, ref } from 'vue'
 import { object, string, boolean, number } from 'yup'
 import { useQuery } from '@vue/apollo-composable'
-import gql from 'graphql-tag'
 
 const props = defineProps({
   modelValue: { type: Object, required: true },
@@ -99,17 +99,10 @@ const description = computed(() => form.description)
 const spaceId = computed(() => form.spaceId)
 const newUserToSpace = computed(() => form.newUserToSpace)
 const logoUrl = computed(() => form.logoUrl)
+
 // show space
-const getSpace = gql`
-  query ($id: ID!) {
-    space(id: $id) {
-      name
-      description
-    }
-  }
-`
-const { result } = useQuery(getSpace, () => ({ id: spaceId.value }), {
-  enabled: computed(() => !!spaceId.value),
+const { result } = useQuery(spaceWithNameAndDescription, () => ({ id: spaceId.value }), {
+  enabled: !!spaceId.value,
 })
 
 const selectedSpaceText = computed(() => {
diff --git a/admin/src/graphql/projectBranding.graphql b/admin/src/graphql/projectBranding.graphql
index 5574f9d4c..98f38dab0 100644
--- a/admin/src/graphql/projectBranding.graphql
+++ b/admin/src/graphql/projectBranding.graphql
@@ -25,4 +25,11 @@ query spaces($page: Int!, $limit: Int!) {
       ...SpaceFields
     }
   }
+}
+
+query spaceWithNameAndDescription($id: ID!) {
+  space(id: $id) {
+    name
+    description
+  }
 }
\ No newline at end of file
diff --git a/frontend/package.json b/frontend/package.json
index d927419a8..f18abf73c 100755
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -106,6 +106,7 @@
     "unplugin-icons": "^0.19.1",
     "unplugin-vue-components": "^0.27.3",
     "vite-plugin-environment": "^1.1.3",
+    "vite-plugin-graphql-loader": "^4.0.4",
     "vite-plugin-html": "^3.2.2",
     "vitest": "^2.0.5",
     "vitest-canvas-mock": "^0.3.3"
diff --git a/frontend/src/graphql/projectBranding.graphql b/frontend/src/graphql/projectBranding.graphql
new file mode 100644
index 000000000..7441ae8c3
--- /dev/null
+++ b/frontend/src/graphql/projectBranding.graphql
@@ -0,0 +1,3 @@
+query projectBrandingBanner($project: String!) {
+  projectBrandingBanner(alias: $project)
+}
diff --git a/frontend/src/layouts/AuthLayout.vue b/frontend/src/layouts/AuthLayout.vue
index fe6587d7a..e9f0aeaf7 100644
--- a/frontend/src/layouts/AuthLayout.vue
+++ b/frontend/src/layouts/AuthLayout.vue
@@ -105,17 +105,17 @@
 <script setup>
 import { onBeforeMount, computed, watchEffect } from 'vue'
 import { useQuery } from '@vue/apollo-composable'
+import { projectBrandingBanner } from '@/graphql/projectBranding.graphql'
 import AuthNavbar from '@/components/Auth/AuthNavbar'
 import AuthNavbarSmall from '@/components/Auth/AuthNavbarSmall'
 import AuthCarousel from '@/components/Auth/AuthCarousel'
 import AuthFooter from '@/components/Auth/AuthFooter'
 import CONFIG from '@/config'
 import { useStore } from 'vuex'
-import gql from 'graphql-tag'
 
 const communityName = CONFIG.COMMUNITY_NAME
 const store = useStore()
-const projectValue = computed(() => {
+const project = computed(() => {
   const urlParams = new URLSearchParams(window.location.search)
   return urlParams.get('project')
 })
@@ -125,15 +125,9 @@ const setTextSize = (size) => {
 }
 
 const { result: projectBannerResult, loading: projectBannerLoading } = useQuery(
-  gql`
-    query ($project: String!) {
-      projectBrandingBanner(alias: $project)
-    }
-  `,
-  {
-    project: projectValue.value,
-  },
-  { enabled: !!projectValue.value },
+  projectBrandingBanner,
+  { project: project.value },
+  { enabled: !!project.value },
 )
 
 onBeforeMount(() => {
@@ -144,7 +138,7 @@ onBeforeMount(() => {
 // put project value into store, if projectBrandingBanner query don't throw an error, so project exists
 watchEffect(() => {
   if (projectBannerResult.value) {
-    store.commit('project', projectValue.value)
+    store.commit('project', project.value)
   }
 })
 </script>
diff --git a/frontend/vite.config.js b/frontend/vite.config.js
index 2385e92ef..590338bd5 100644
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@@ -18,7 +18,8 @@ dotenv.config() // load env vars from .env
 const CONFIG = require('./src/config')
 
 // https://vitejs.dev/config/
-export default defineConfig(({ command }) => {
+export default defineConfig(async ({ command }) => {
+  const { vitePluginGraphqlLoader } = await import('vite-plugin-graphql-loader')
   if (command === 'serve') {
     CONFIG.FRONTEND_HOSTING = 'nodejs'
   } else {
@@ -117,6 +118,7 @@ export default defineConfig(({ command }) => {
         META_KEYWORDS_EN: null,
         META_AUTHOR: null,
       }),
+      vitePluginGraphqlLoader(),
       commonjs(),
     ],
     css: {
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 8036b3e46..744643c9d 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -4218,7 +4218,7 @@ graphql-tag@^2.12.6, graphql-tag@^2.4.2:
   dependencies:
     tslib "^2.1.0"
 
-graphql@^16.9.0:
+graphql@^16.8.1, graphql@^16.9.0:
   version "16.10.0"
   resolved "https://registry.yarnpkg.com/graphql/-/graphql-16.10.0.tgz#24c01ae0af6b11ea87bf55694429198aaa8e220c"
   integrity sha512-AjqGKbDGUFRKIRCP9tCKiIGHyriz2oHEbPIbEtcSLSs4YjReZOIPQQWek4+6hjw62H9QShXHyaGivGiYVLeYFQ==
@@ -5074,7 +5074,7 @@ lru-cache@^5.1.1:
   dependencies:
     yallist "^3.0.2"
 
-magic-string@^0.30.11, magic-string@^0.30.12, magic-string@^0.30.14, magic-string@^0.30.17:
+magic-string@^0.30.10, magic-string@^0.30.11, magic-string@^0.30.12, magic-string@^0.30.14, magic-string@^0.30.17:
   version "0.30.17"
   resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.30.17.tgz#450a449673d2460e5bbcfba9a61916a1714c7453"
   integrity sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==
@@ -6466,7 +6466,14 @@ string.prototype.trimstart@^1.0.8:
     define-properties "^1.2.1"
     es-object-atoms "^1.0.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@6.0.1, strip-ansi@^6.0.0, strip-ansi@^6.0.1, strip-ansi@^7.0.1, strip-ansi@^7.1.0:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
+strip-ansi@6.0.1, strip-ansi@^6.0.0, strip-ansi@^6.0.1, strip-ansi@^7.0.1, strip-ansi@^7.1.0:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -7168,6 +7175,15 @@ vite-plugin-environment@^1.1.3:
   resolved "https://registry.yarnpkg.com/vite-plugin-environment/-/vite-plugin-environment-1.1.3.tgz#d01a04abb2f69730a4866c9c9db51d3dab74645b"
   integrity sha512-9LBhB0lx+2lXVBEWxFZC+WO7PKEyE/ykJ7EPWCq95NEcCpblxamTbs5Dm3DLBGzwODpJMEnzQywJU8fw6XGGGA==
 
+vite-plugin-graphql-loader@^4.0.4:
+  version "4.0.4"
+  resolved "https://registry.yarnpkg.com/vite-plugin-graphql-loader/-/vite-plugin-graphql-loader-4.0.4.tgz#cf6c599b3e5fa32bf2b768983da68f7beccc8486"
+  integrity sha512-lYnpQ2luV2fcuXmOJADljuktfMbDW00Y+6QS+Ek8Jz1Vdzlj/51LSGJwZqyjJ24a5YQ+o29Hr6el/5+nlZetvg==
+  dependencies:
+    graphql "^16.8.1"
+    graphql-tag "^2.12.6"
+    magic-string "^0.30.10"
+
 vite-plugin-html@^3.2.2:
   version "3.2.2"
   resolved "https://registry.yarnpkg.com/vite-plugin-html/-/vite-plugin-html-3.2.2.tgz#661834fa09015d3fda48ba694dbaa809396f5f7a"
@@ -7443,7 +7459,16 @@ word-wrap@^1.2.5:
   resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.5.tgz#d2c45c6dd4fbce621a66f136cbe328afd0410b34"
   integrity sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@7.0.0, wrap-ansi@^8.1.0:
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
+wrap-ansi@7.0.0, wrap-ansi@^8.1.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==