make preConfig a prop of AppWrapperProvideUrqlClient

src/app/AppWrapperLoadPreConfig.vue

@@ -1,11 +1,12 @@
 <template>
-  <app v-if="!(loading || error)"> </app>
-  <div v-else-if="error">{{ error }}</div>
+  <div v-if="error">{{ error }}</div>
+  <div v-else-if="loading">Loading...</div>
+  <app v-else-if="preConfig" :pre-config="preConfig"> </app>
 </template>
 
 <script setup lang="ts">
 import { storeToRefs } from "pinia";
 import { usePreConfigStore } from "@/stores/pre-config";
 import App from "./AppWrapperProvideUrqlClient.vue";
-const { loading, error } = storeToRefs(usePreConfigStore());
+const { preConfig, loading, error } = storeToRefs(usePreConfigStore());
 </script>

src/app/AppWrapperProvideUrqlClient.vue

@@ -4,13 +4,17 @@
 
 <script setup lang="ts">
 import { ref } from "vue";
-import { usePreConfigStore } from "@/stores/pre-config";
+import { PreConfig } from "@/stores/pre-config";
 import { provideClient } from "@urql/vue";
 import { createUrqlClient } from "@/plugins/urql";
 import App from "./AppWrapperAuth.vue";
-const preConfigStore = usePreConfigStore();
-const url = preConfigStore.preConfig?.graphqlHttp;
-if (!url) throw new Error("api url is not found");
+
+interface Props {
+  preConfig: PreConfig;
+}
+const prop = defineProps<Props>();
+
+const url = prop.preConfig.graphqlHttp;
 const urqlClient = ref(createUrqlClient(url));
 provideClient(urqlClient);
 </script>

src/stores/pre-config.ts

@@ -3,7 +3,7 @@ import { defineStore } from "pinia";
 import { useAxios } from "@vueuse/integrations/useAxios";
 import * as path from "path";
 
-interface PreConfig {
+export interface PreConfig {
   graphqlHttp: string;
 }