From 8e7bce101dc4f58c6508dbcac6c047f7f76747e4 Mon Sep 17 00:00:00 2001 From: kenneth Date: Sun, 15 Mar 2026 16:29:10 +0000 Subject: [PATCH] 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 --- apps/aelis-client/package.json | 1 + apps/aelis-client/src/api/auth-middleware.ts | 6 ++++ apps/aelis-client/src/api/client.ts | 38 ++++++++++++++++++++ apps/aelis-client/src/app/_layout.tsx | 24 +++++++++++-- apps/aelis-client/src/feed/queries.ts | 13 +++++++ apps/aelis-client/src/feed/types.ts | 5 +++ bun.lock | 5 +++ 7 files changed, 90 insertions(+), 2 deletions(-) create mode 100644 apps/aelis-client/src/api/auth-middleware.ts create mode 100644 apps/aelis-client/src/api/client.ts create mode 100644 apps/aelis-client/src/feed/queries.ts create mode 100644 apps/aelis-client/src/feed/types.ts diff --git a/apps/aelis-client/package.json b/apps/aelis-client/package.json index ee1f2be..f90ae8a 100644 --- a/apps/aelis-client/package.json +++ b/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", diff --git a/apps/aelis-client/src/api/auth-middleware.ts b/apps/aelis-client/src/api/auth-middleware.ts new file mode 100644 index 0000000..43cf325 --- /dev/null +++ b/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 +} diff --git a/apps/aelis-client/src/api/client.ts b/apps/aelis-client/src/api/client.ts new file mode 100644 index 0000000..7019391 --- /dev/null +++ b/apps/aelis-client/src/api/client.ts @@ -0,0 +1,38 @@ +import { createContext, useContext } from "react" + +export type ApiRequestMiddleware = ( + url: Parameters[0], + init: RequestInit, +) => RequestInit + +export class ApiClient { + private readonly baseUrl: string + private readonly middlewares: readonly ApiRequestMiddleware[] + + private publicRoutes = new Set(["/login", "/signup"]) + + static noop = new ApiClient({ baseUrl: "" }) + + constructor({ + baseUrl, + middlewares = [], + }: { + baseUrl: string + middlewares?: ApiRequestMiddleware[] + }) { + this.baseUrl = baseUrl + this.middlewares = middlewares + } + + async request(...[url, init]: Parameters): Promise<[Response, T]> { + const finalInit = init + ? this.middlewares.reduce((prevInit, middleware) => middleware(url, prevInit), init) + : undefined + return fetch(url, finalInit).then((res) => Promise.all([Promise.resolve(res), res.json()])) + } +} + +export const ApiClientContext = createContext(ApiClient.noop) +export function useApiClient() { + return useContext(ApiClientContext) +} diff --git a/apps/aelis-client/src/app/_layout.tsx b/apps/aelis-client/src/app/_layout.tsx index ce6036b..f55fc72 100644 --- a/apps/aelis-client/src/app/_layout.tsx +++ b/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 ( - <> + - + + ) +} + +function ContextProvider({ children }: React.PropsWithChildren) { + return ( + + {children} + ) } diff --git a/apps/aelis-client/src/feed/queries.ts b/apps/aelis-client/src/feed/queries.ts new file mode 100644 index 0000000..97ea046 --- /dev/null +++ b/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"), + }) +} diff --git a/apps/aelis-client/src/feed/types.ts b/apps/aelis-client/src/feed/types.ts new file mode 100644 index 0000000..91129c9 --- /dev/null +++ b/apps/aelis-client/src/feed/types.ts @@ -0,0 +1,5 @@ +import { Spec } from "@json-render/core" + +export interface FeedItem { + ui: Spec +} diff --git a/bun.lock b/bun.lock index 6dd9301..4954148 100644 --- a/bun.lock +++ b/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=="],