Make queries work on mobile

docker-compose.dev.yml

@@ -39,6 +39,7 @@ services:
     restart: on-failure
     environment:
       - KYOO_URL=http://back:5000
+      - PUBLIC_BACK_URL=${PUBLIC_BACK_URL}
   ingress:
     image: nginx
     restart: on-failure

front/apps/mobile/babel.config.js

@@ -25,6 +25,7 @@ module.exports = function (api) {
 		plugins: [
 			// NOTE: `expo-router/babel` is a temporary extension to `babel-preset-expo`.
 			require.resolve("expo-router/babel"),
+			"transform-inline-environment-variables",
 			"react-native-reanimated/plugin",
 		],
 	};

front/apps/mobile/package.json

@@ -11,6 +11,7 @@
 	"dependencies": {
 		"@kyoo/ui": "workspace:^",
 		"@tanstack/react-query": "^4.19.1",
+		"babel-plugin-transform-inline-environment-variables": "^0.4.4",
 		"expo": "^47.0.0",
 		"expo-constants": "~14.0.2",
 		"expo-linear-gradient": "~12.0.1",

front/packages/models/src/query.tsx

@@ -29,17 +29,24 @@ import {
 import { z } from "zod";
 import { KyooErrors } from "./kyoo-errors";
 import { Page, Paged } from "./page";
+import { Platform } from "react-native";
 
 const queryFn = async <Data,>(
 	type: z.ZodType<Data>,
 	context: QueryFunctionContext,
 ): Promise<Data> => {
-	const kyoo_url = process.env.KYOO_URL ?? "http://localhost:5000";
+	const kyooUrl =
+		Platform.OS !== "web"
+			? process.env.PUBLIC_BACK_URL
+			: typeof window === "undefined"
+			? process.env.KYOO_URL ?? "http://localhost:5000"
+			: "/api";
+	if (!kyooUrl) console.error("Kyoo's url is not defined.")
 
 	let resp;
 	try {
 		resp = await fetch(
-			[typeof window === "undefined" ? kyoo_url : "/api"]
+			[kyooUrl]
 				.concat(
 					context.pageParam ? [context.pageParam] : (context.queryKey.filter((x) => x) as string[]),
 				)

front/packages/models/src/traits/images.ts

@@ -18,9 +18,11 @@
  * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
  */
 
+import { Platform } from "react-native";
 import { z } from "zod";
 
-export const imageFn = (url: string) => (url.startsWith("/api") ? url : `/api${url}`);
+export const imageFn = (url: string) =>
+	Platform.OS === "web" ? `/api/${url}` : process.env.PUBLIC_BACK_URL + url;
 
 export const ImagesP = z.object({
 	/**