🐛 fix(calendar-web): use client URL in browser for API calls

The API client was using the SSR backend URL (http://calendar-backend:3016)
in the browser, causing mixed content errors. Now uses the injected client
URL (https://calendar-api.mana.how) from window.__PUBLIC_BACKEND_URL__.
This commit is contained in:
Till-JS 2026-01-30 16:34:39 +01:00
parent ad7f875c5f
commit 017891b1c8

View file

@ -6,24 +6,40 @@
* refreshes expired tokens before making requests.
*/
import { browser } from '$app/environment';
import { env } from '$env/dynamic/public';
import { createApiClient, type ApiResult } from '@manacore/shared-api-client';
import { createApiClient, type ApiResult, type ApiClient } from '@manacore/shared-api-client';
import { authStore } from '$lib/stores/auth.svelte';
const API_BASE = env.PUBLIC_BACKEND_URL || 'http://localhost:3014';
// Use client URL in browser (injected by hooks.server.ts), SSR URL on server
function getApiBase(): string {
if (browser && typeof window !== 'undefined') {
const injectedUrl = (window as unknown as { __PUBLIC_BACKEND_URL__?: string })
.__PUBLIC_BACKEND_URL__;
if (injectedUrl) return injectedUrl;
}
return env.PUBLIC_BACKEND_URL || 'http://localhost:3014';
}
/**
* Calendar API client instance
* Calendar API client instance (lazy initialized)
* - Auto token handling via authStore.getValidToken()
* - Consistent ApiResult<T> response format
*/
const api = createApiClient({
baseUrl: API_BASE,
apiPrefix: '/api/v1',
getAuthToken: () => authStore.getValidToken(),
timeout: 30000,
debug: import.meta.env.DEV,
});
let _api: ApiClient | null = null;
function getApi(): ApiClient {
if (!_api) {
_api = createApiClient({
baseUrl: getApiBase(),
apiPrefix: '/api/v1',
getAuthToken: () => authStore.getValidToken(),
timeout: 30000,
debug: import.meta.env.DEV,
});
}
return _api;
}
/**
* Legacy fetchApi interface for backwards compatibility
@ -45,6 +61,7 @@ export async function fetchApi<T>(
options: FetchOptions = {}
): Promise<ApiResult<T>> {
const { method = 'GET', body, isFormData = false } = options;
const api = getApi();
if (isFormData && body instanceof FormData) {
return api.upload<T>(endpoint, body);