REFACTOR/api encapsulated

Author: AugustinSorel

apps/api/package.json

@@ -3,7 +3,12 @@
   "version": "0.0.1",
   "private": true,
   "type": "module",
-  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/client.d.ts",
+      "import": "./dist/client.js"
+    }
+  },
   "scripts": {
     "dev": "tsx watch ./src/index.ts",
     "build": "tsup",

apps/api/src/client.ts

@@ -0,0 +1,46 @@
+import { DetailedError, hc, parseResponse } from "hono/client";
+import { z } from "zod";
+import { constant } from "@gym-graphs/constants";
+import type { Api } from "~/index";
+import type {
+  ClientRequestOptions,
+  ClientResponse,
+  InferRequestType,
+} from "hono/client";
+
+export const api = (options: ClientRequestOptions) => {
+  return hc<Api>(constant.url.api, options).api;
+};
+
+export type ApiReqOption = Parameters<typeof api>[0];
+
+export type InferApiReqInput<T> = InferRequestType<T>;
+
+export const parseJsonResponse = async <T extends ClientResponse<any>>(
+  req: T | Promise<T>,
+): ApiResponse<T> => {
+  try {
+    return await parseResponse(req);
+  } catch (e) {
+    if (e instanceof DetailedError) {
+      const msg = detailsErrorSchema.catch(e.message).parse(e.detail);
+
+      throw new Error(msg, { cause: e });
+    }
+
+    throw e;
+  }
+};
+
+const detailsErrorSchema = z
+  .object({
+    data: z.object({
+      message: z.string(),
+    }),
+  })
+  .transform((err) => err.data.message);
+
+//forcing tsup to bundle the return type of parseResponse as hono does not export it
+type ApiResponse<T extends ClientResponse<any>> = ReturnType<
+  typeof parseResponse<T>
+>;

apps/web/package.json

@@ -15,6 +15,7 @@
   "dependencies": {
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
+    "@gym-graphs/api": "workspace:*",
     "@gym-graphs/constants": "workspace:*",
     "@gym-graphs/schemas": "workspace:*",
     "@hookform/resolvers": "^5.2.2",
@@ -50,7 +51,6 @@
     "@visx/vendor": "^3.12.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "hono": "^4.9.11",
     "input-otp": "^1.4.2",
     "nitro": "3.0.1-alpha.0",
     "react": "^19.0.0",
@@ -62,7 +62,6 @@
     "zod": "^4.1.12"
   },
   "devDependencies": {
-    "@gym-graphs/api": "workspace:*",
     "@gym-graphs/db": "workspace:*",
     "@tanstack/react-query-devtools": "^5.62.11",
     "@tanstack/react-router-devtools": "^1.133.3",

apps/web/src/domains/dashboard/components/dashboard.tsx

@@ -30,7 +30,8 @@ import {
 } from "~/domains/dashboard/components/trending-view-tile";
 import { useUser } from "~/domains/user/hooks/use-user";
 import { tileQueries } from "~/domains/tile/tile.queries";
-import { api, parseJsonResponse } from "~/libs/api";
+import { api } from "~/libs/api";
+import { parseJsonResponse } from "@gym-graphs/api";
 import type {
   ComponentProps,
   CSSProperties,
@@ -44,7 +45,7 @@ import type {
   ScreenReaderInstructions,
   UniqueIdentifier,
 } from "@dnd-kit/core";
-import type { InferRequestType } from "hono";
+import type { InferApiReqInput } from "@gym-graphs/api";
 
 export const Dashboard = () => {
   return (
@@ -377,7 +378,7 @@ const useReorderTiles = () => {
   const req = api().tiles.reorder.$put;
 
   return useMutation({
-    mutationFn: async (input: InferRequestType<typeof req>) => {
+    mutationFn: async (input: InferApiReqInput<typeof req>) => {
       return parseJsonResponse(req(input));
     },
   });

apps/web/src/domains/dashboard/components/view-toggle.tsx

@@ -4,8 +4,9 @@ import { userSchema } from "@gym-graphs/schemas/user";
 import { useUser } from "~/domains/user/hooks/use-user";
 import { useMutation } from "@tanstack/react-query";
 import { userQueries } from "~/domains/user/user.queries";
-import { api, parseJsonResponse } from "~/libs/api";
-import type { InferRequestType } from "hono";
+import { api } from "~/libs/api";
+import { parseJsonResponse } from "@gym-graphs/api";
+import type { InferApiReqInput } from "@gym-graphs/api";
 
 const useUpdateDashboadView = () => {
   const req = api().users.me.$patch;
@@ -15,7 +16,7 @@ const useUpdateDashboadView = () => {
   };
 
   return useMutation({
-    mutationFn: async (input: InferRequestType<typeof req>) => {
+    mutationFn: async (input: InferApiReqInput<typeof req>) => {
       return parseJsonResponse(req(input));
     },
     onMutate: async (variables, ctx) => {

apps/web/src/domains/exercise/exercise.queries.ts

@@ -1,6 +1,7 @@
 import { queryOptions } from "@tanstack/react-query";
+import { api } from "~/libs/api";
+import { parseJsonResponse } from "@gym-graphs/api";
 import type { Exercise } from "@gym-graphs/db/schemas";
-import { api, parseJsonResponse } from "~/libs/api";
 
 const get = (exerciseId: Exercise["id"]) => {
   return queryOptions({

apps/web/src/domains/oauth/components/github-sign-in.tsx

@@ -5,8 +5,9 @@ import { useTransition } from "react";
 import { getRouteApi } from "@tanstack/react-router";
 import { Alert, AlertDescription, AlertTitle } from "~/ui/alert";
 import { AlertCircleIcon, GithubIcon } from "~/ui/icons";
-import { api, parseJsonResponse } from "~/libs/api";
-import type { InferRequestType } from "hono";
+import { api } from "~/libs/api";
+import { parseJsonResponse } from "@gym-graphs/api";
+import type { InferApiReqInput } from "@gym-graphs/api";
 
 const routeApi = getRouteApi("/(auth)/_layout");
 
@@ -43,7 +44,7 @@ const useGithubSignIn = () => {
   const req = api().oauth.github.$post;
 
   const githubSignIn = useMutation({
-    mutationFn: async (query: InferRequestType<typeof req>["query"]) => {
+    mutationFn: async (query: InferApiReqInput<typeof req>["query"]) => {
       return parseJsonResponse(req({ query }));
     },
     onSuccess: (url) => {

apps/web/src/domains/session/hooks/use-sign-out.ts

@@ -1,7 +1,8 @@
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { useNavigate } from "@tanstack/react-router";
 import { useTransition } from "react";
-import { api, parseJsonResponse } from "~/libs/api";
+import { api } from "~/libs/api";
+import { parseJsonResponse } from "@gym-graphs/api";
 
 export const useSignOut = () => {
   const [isRedirectPending, startRedirectTransition] = useTransition();

apps/web/src/domains/session/session.queries.ts

@@ -1,13 +1,13 @@
 import { queryOptions } from "@tanstack/react-query";
-import { parseResponse } from "hono/client";
+import { parseJsonResponse } from "@gym-graphs/api";
 import { api } from "~/libs/api";
 
 const get = queryOptions({
   queryKey: ["session"],
   queryFn: async ({ signal }) => {
     const req = api().sessions.me.$get(undefined, { init: { signal } });
 
-    return parseResponse(req);
+    return parseJsonResponse(req);
   },
 });
 

apps/web/src/domains/set/components/create-set-form.tsx

@@ -11,12 +11,13 @@ import { getRouteApi } from "@tanstack/react-router";
 import { CounterInput } from "~/ui/counter-input";
 import { useLastSet } from "~/domains/set/hooks/use-last-set";
 import { WeightUnit } from "~/domains/user/components/weight-unit";
-import { api, parseJsonResponse } from "~/libs/api";
+import { api } from "~/libs/api";
+import { parseJsonResponse } from "@gym-graphs/api";
 import { tileQueries } from "~/domains/tile/tile.queries";
 import { Field, FieldError, FieldGroup, FieldLabel } from "~/ui/field";
 import { Alert, AlertDescription, AlertTitle } from "~/ui/alert";
 import { AlertCircleIcon } from "~/ui/icons";
-import type { InferRequestType } from "hono";
+import type { InferApiReqInput } from "@gym-graphs/api";
 
 export const CreateSetForm = (props: Props) => {
   const form = useCreateExerciseSetForm();
@@ -158,7 +159,7 @@ const useCreateSet = () => {
   };
 
   return useMutation({
-    mutationFn: async (input: InferRequestType<typeof req>) => {
+    mutationFn: async (input: InferApiReqInput<typeof req>) => {
       return parseJsonResponse(req(input));
     },
     onMutate: async (variables, ctx) => {