feat(client): wire up API client and react-query (#75)

* feat(client): wire up API client and react-query

Add ApiClient class, auth middleware placeholder, feed query,
and wrap the app in QueryClientProvider.

Co-authored-by: Ona <no-reply@ona.com>

* fix(client): append base url on api client req

Co-authored-by: Ona <no-reply@ona.com>

* fix(client): allow req middlewares to run on empty init

* fix(client): rm unused private route declr

* fix(client): handle empty url in client.request

Co-authored-by: ona-patrol <ona@nym.sh>

---------

Co-authored-by: Ona <no-reply@ona.com>
Co-authored-by: ona-patrol <ona@nym.sh>

apps/aelis-client/package.json

@@ -22,6 +22,7 @@
 		"@react-navigation/bottom-tabs": "^7.4.0",
 		"@react-navigation/elements": "^2.6.3",
 		"@react-navigation/native": "^7.1.8",
+		"@tanstack/react-query": "^5.90.21",
 		"expo": "~54.0.33",
 		"expo-constants": "~18.0.13",
 		"expo-dev-client": "~6.0.20",

apps/aelis-client/src/api/auth-middleware.ts

@@ -0,0 +1,6 @@
+import { ApiRequestMiddleware } from "./client"
+
+export const authMiddleware: ApiRequestMiddleware = (_url, init) => {
+	// TODO: placeholder auth middleware
+	return init
+}

apps/aelis-client/src/api/client.ts

@@ -0,0 +1,39 @@
+import { createContext, useContext } from "react"
+
+export type ApiRequestMiddleware = (
+	url: Parameters<typeof fetch>[0],
+	init: RequestInit,
+) => RequestInit
+
+export class ApiClient {
+	private readonly baseUrl: string
+	private readonly middlewares: readonly ApiRequestMiddleware[]
+
+	static noop = new ApiClient({ baseUrl: "" })
+
+	constructor({
+		baseUrl,
+		middlewares = [],
+	}: {
+		baseUrl: string
+		middlewares?: ApiRequestMiddleware[]
+	}) {
+		this.baseUrl = baseUrl
+		this.middlewares = middlewares
+	}
+
+	async request<T>(...[url, init = {}]: Parameters<typeof fetch>): Promise<[Response, T]> {
+		const finalInit = this.middlewares.reduce(
+			(prevInit, middleware) => middleware(url, prevInit),
+			init,
+		)
+		return fetch(this.baseUrl ? new URL(url.toString(), this.baseUrl) : url, finalInit).then((res) =>
+			Promise.all([Promise.resolve(res), res.json()]),
+		)
+	}
+}
+
+export const ApiClientContext = createContext(ApiClient.noop)
+export function useApiClient() {
+	return useContext(ApiClientContext)
+}

apps/aelis-client/src/app/_layout.tsx

@@ -1,17 +1,29 @@
 import "react-native-reanimated"
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
 import { Stack } from "expo-router"
 import { StatusBar } from "expo-status-bar"
+import React from "react"
 import { useColorScheme } from "react-native"
 import tw, { useDeviceContext } from "twrnc"
 
+import { authMiddleware } from "@/api/auth-middleware"
+import { ApiClient, ApiClientContext } from "@/api/client"
+
+const queryClient = new QueryClient()
+const apiClient = new ApiClient({
+	baseUrl: process.env.EXPO_PUBLIC_API_BASE_URL ?? "",
+	middlewares: [authMiddleware],
+})
+
 export default function RootLayout() {
 	useDeviceContext(tw)
+
 	const colorScheme = useColorScheme()
 	const headerBg = colorScheme === "dark" ? "#1c1917" : "#f5f5f4"
 	const headerTint = colorScheme === "dark" ? "#e7e5e4" : "#1c1917"
 
 	return (
-		<>
+		<ContextProvider>
 			<Stack
 				screenOptions={{
 					headerShown: false,
@@ -40,6 +52,14 @@ export default function RootLayout() {
 				/>
 			</Stack>
 			<StatusBar style="auto" />
-		</>
+		</ContextProvider>
+	)
+}
+
+function ContextProvider({ children }: React.PropsWithChildren) {
+	return (
+		<QueryClientProvider client={queryClient}>
+			<ApiClientContext value={apiClient}>{children}</ApiClientContext>
+		</QueryClientProvider>
 	)
 }

apps/aelis-client/src/feed/queries.ts

@@ -0,0 +1,13 @@
+import { queryOptions } from "@tanstack/react-query"
+
+import { useApiClient } from "@/api/client"
+
+import { FeedItem } from "./types"
+
+export function useFeedQuery() {
+	const api = useApiClient()
+	return queryOptions({
+		queryKey: ["feed"],
+		queryFn: async () => api.request<{ items: FeedItem[] }>("/feed?render=json-render"),
+	})
+}

apps/aelis-client/src/feed/types.ts

@@ -0,0 +1,5 @@
+import { Spec } from "@json-render/core"
+
+export interface FeedItem {
+	ui: Spec
+}

bun.lock

@@ -46,6 +46,7 @@
         "@react-navigation/bottom-tabs": "^7.4.0",
         "@react-navigation/elements": "^2.6.3",
         "@react-navigation/native": "^7.1.8",
+        "@tanstack/react-query": "^5.90.21",
         "expo": "~54.0.33",
         "expo-constants": "~18.0.13",
         "expo-dev-client": "~6.0.20",
@@ -1189,6 +1190,10 @@
 
     "@tailwindcss/vite": ["@tailwindcss/vite@4.2.1", "", { "dependencies": { "@tailwindcss/node": "4.2.1", "@tailwindcss/oxide": "4.2.1", "tailwindcss": "4.2.1" }, "peerDependencies": { "vite": "^5.2.0 || ^6 || ^7" } }, "sha512-TBf2sJjYeb28jD2U/OhwdW0bbOsxkWPwQ7SrqGf9sVcoYwZj7rkXljroBO9wKBut9XnmQLXanuDUeqQK0lGg/w=="],
 
+    "@tanstack/query-core": ["@tanstack/query-core@5.90.20", "", {}, "sha512-OMD2HLpNouXEfZJWcKeVKUgQ5n+n3A2JFmBaScpNDUqSrQSjiveC7dKMe53uJUg1nDG16ttFPz2xfilz6i2uVg=="],
+
+    "@tanstack/react-query": ["@tanstack/react-query@5.90.21", "", { "dependencies": { "@tanstack/query-core": "5.90.20" }, "peerDependencies": { "react": "^18 || ^19" } }, "sha512-0Lu6y5t+tvlTJMTO7oh5NSpJfpg/5D41LlThfepTixPYkJ0sE2Jj0m0f6yYqujBwIXlId87e234+MxG3D3g7kg=="],
+
     "@tsconfig/node10": ["@tsconfig/node10@1.0.12", "", {}, "sha512-UCYBaeFvM11aU2y3YPZ//O5Rhj+xKyzy7mvcIoAjASbigy8mHMryP5cK7dgjlz2hWxh1g5pLw084E0a/wlUSFQ=="],
 
     "@tsconfig/node12": ["@tsconfig/node12@1.0.11", "", {}, "sha512-cqefuRsh12pWyGsIoBKJA9luFu3mRxCA+ORZvA4ktLSzIuCUtWVxGIuXigEwO5/ywWFMZ2QEGKWvkZG1zDMTag=="],