Migrated to Tanstack Router and Guard Processor added

.vscode/settings.json

@@ -1,5 +1,15 @@
 {
     "typescript.tsdk": "node_modules/typescript/lib",
     "npm.packageManager": "bun",
-    "npm.scriptRunner": "bun"
+    "npm.scriptRunner": "bun",
+    "editor.defaultFormatter": "biomejs.biome",
+    "files.readonlyInclude": {
+        "**/routeTree.gen.ts": true
+    },
+    "files.watcherExclude": {
+        "**/routeTree.gen.ts": true
+    },
+    "search.exclude": {
+        "**/routeTree.gen.ts": true
+    }
 }

apps/frontend/package.json

@@ -12,10 +12,10 @@
   "dependencies": {
     "@hookform/resolvers": "^5.2.2",
     "@monaco-editor/react": "^4.7.0",
-    "@orpc/openapi-client": "catalog:",
-    "@orpc/tanstack-query": "catalog:",
     "@orpc/client": "catalog:",
     "@orpc/contract": "catalog:",
+    "@orpc/openapi-client": "catalog:",
+    "@orpc/tanstack-query": "catalog:",
     "@radix-ui/react-accordion": "^1.2.12",
     "@radix-ui/react-alert-dialog": "^1.1.15",
     "@radix-ui/react-aspect-ratio": "^1.1.7",
@@ -46,6 +46,9 @@
     "@repo/utils": "workspace:*",
     "@tailwindcss/vite": "^4.1.7",
     "@tanstack/react-query": "^5.76.1",
+    "@tanstack/react-query-devtools": "^5.90.2",
+    "@tanstack/react-router": "^1.133.13",
+    "@tanstack/react-router-devtools": "^1.133.13",
     "@xyflow/react": "^12.6.4",
     "axios": "^1.9.0",
     "class-variance-authority": "^0.7.1",
@@ -62,7 +65,6 @@
     "react-dom": "^19",
     "react-hook-form": "^7.64.0",
     "react-resizable-panels": "^3.0.6",
-    "react-router": "^7.6.0",
     "recharts": "2.15.4",
     "short-unique-id": "^5.3.2",
     "sonner": "^2.0.7",
@@ -73,11 +75,12 @@
     "zod": "^4.1.11"
   },
   "devDependencies": {
+    "@tanstack/router-plugin": "^1.133.13",
     "@types/react": "^19",
     "@types/react-dom": "^19",
-    "@vitejs/plugin-react": "^4.2.1",
+    "@vitejs/plugin-react": "^5.0.4",
     "tw-animate-css": "^1.3.0",
     "typescript": "catalog:",
-    "vite": "^5.0.8"
+    "vite": "^7.1.10"
   }
 }

apps/frontend/src/api/query/fetchDefinition.tsx

@@ -1,8 +1,8 @@
 import { openApiClient } from '@lib/orpc';
-import { useQuery } from '@tanstack/react-query';
+import { queryOptions } from '@tanstack/react-query';
 import { z } from 'zod/v3';
 
-const responseSchema = z.object({
+export const responseSchema = z.object({
   id: z.number(),
   name: z.string(),
   description: z.string(),
@@ -22,22 +22,21 @@ const responseSchema = z.object({
 
 export const queryKey = 'fetch-definition';
 
-export const useFetchDefinition = (definitionId: string) => {
-  const fetchDefinition = useQuery({
-    queryKey: [queryKey, definitionId],
-    queryFn: async ({ signal }) => {
-      const response = await openApiClient.definition
-        .get(
-          {
-            id: Number(definitionId),
-          },
-          { signal }
-        )
-        .then((res) => responseSchema.parse(res.data));
-
-      return response;
-    },
-  });
+export const fetchDefinition = async (params: { signal?: AbortSignal; definitionId: number }) => {
+  const response = await openApiClient.definition
+    .get(
+      {
+        id: params.definitionId,
+      },
+      { signal: params?.signal }
+    )
+    .then((res) => responseSchema.parse(res.data));
 
-  return fetchDefinition;
+  return response;
 };
+
+export const fetchDefinitionQuery = (params: { definitionId: number }) =>
+  queryOptions({
+    queryKey: [queryKey, params.definitionId],
+    queryFn: ({ signal }) => fetchDefinition({ signal, definitionId: params.definitionId }),
+  });

apps/frontend/src/api/query/fetchEditDefinition.tsx

@@ -1,8 +1,10 @@
 import { openApiClient } from '@lib/orpc';
-import { useQuery } from '@tanstack/react-query';
+import { queryOptions } from '@tanstack/react-query';
 import { z } from 'zod/v3';
 
-const responseSchema = z.object({
+export const queryKey = 'fetch-edit-definition';
+
+export const responseSchema = z.object({
   id: z.number(),
   name: z.string(),
   description: z.string(),
@@ -25,43 +27,40 @@ const responseSchema = z.object({
     }),
 });
 
-export const queryKey = 'fetch-edit-definition';
-
-export const useFetchEditDefinition = (definitionId: string) => {
-  const fetchEditDefinition = useQuery({
-    queryKey: [queryKey, definitionId],
-    queryFn: async ({ signal }) => {
-      const response = await openApiClient.definition
-        .fetchEdit(
-          {
-            id: Number(definitionId),
-          },
-          {
-            signal,
-          }
-        )
-        .then((res) => responseSchema.parse(res.data));
+export const fetchEditDefinition = async (params: { signal?: AbortSignal; definitionId: number }) => {
+  const response = await openApiClient.definition
+    .fetchEdit(
+      {
+        id: params.definitionId,
+      },
+      {
+        signal: params?.signal,
+      }
+    )
+    .then((res) => responseSchema.parse(res.data));
 
-      return {
-        payload: response,
-        definitionForm: {
-          name: response.name,
-          description: response.description,
-          global: response.global,
-        },
-        flowForm: {
-          nodes: response.uiObject.nodes,
-          edges: response.uiObject.edges,
-        },
-      };
+  return {
+    payload: response,
+    definitionForm: {
+      name: response.name,
+      description: response.description,
+      global: response.global,
     },
+    flowForm: {
+      nodes: response.uiObject.nodes,
+      edges: response.uiObject.edges,
+    },
+  };
+};
+
+export const fetchEditDefinitionQuery = (params: { definitionId: number }) =>
+  queryOptions({
+    queryKey: [queryKey, params.definitionId],
+    queryFn: ({ signal }) => fetchEditDefinition({ signal, definitionId: params.definitionId }),
     gcTime: 0,
     staleTime: 0,
     refetchIntervalInBackground: false,
     retry: false,
     refetchOnMount: false,
     refetchOnWindowFocus: false,
   });
-
-  return fetchEditDefinition;
-};

apps/frontend/src/api/query/fetchRuntime.tsx

@@ -1,8 +1,10 @@
 import { openApiClient } from '@lib/orpc';
-import { useQuery } from '@tanstack/react-query';
+import { queryOptions } from '@tanstack/react-query';
 import z from 'zod/v3';
 
-const responseSchema = z.object({
+export const queryKey = 'fetch-runtime';
+
+export const responseSchema = z.object({
   id: z.number().describe('Runtime id'),
   workflowStatus: z.enum(['added', 'pending', 'completed', 'failed']).describe('Runtime status'),
   createdAt: z.string().describe('Runtime created at'),
@@ -39,26 +41,23 @@ const responseSchema = z.object({
     .catch([]),
 });
 
-export const queryKey = 'fetch-runtime';
+export const fetchRuntime = async (params: { signal?: AbortSignal; id: number }) => {
+  const response = await openApiClient.runtime
+    .get(
+      {
+        id: params.id,
+      },
+      {
+        signal: params?.signal,
+      }
+    )
+    .then((res) => responseSchema.parse(res.data));
 
-export const useFetchRuntime = (id: number) => {
-  const fetchRuntime = useQuery({
-    queryKey: [queryKey, id],
-    queryFn: async ({ signal }) => {
-      const response = await openApiClient.runtime
-        .get(
-          {
-            id,
-          },
-          {
-            signal,
-          }
-        )
-        .then((res) => responseSchema.parse(res.data));
+  return response;
+};
 
-      return response;
-    },
+export const fetchRuntimeQuery = (params: { id: number }) =>
+  queryOptions({
+    queryKey: [queryKey, params.id],
+    queryFn: ({ signal }) => fetchRuntime({ signal, id: params.id }),
   });
-
-  return fetchRuntime;
-};

apps/frontend/src/api/query/healthCheck.tsx

@@ -1,17 +1,16 @@
 import { openApiClient } from '@lib/orpc';
-import { useQuery } from '@tanstack/react-query';
+import { queryOptions } from '@tanstack/react-query';
 
 export const queryKey = 'health-check';
 
-export const useHealthCheck = () => {
-  const healthCheck = useQuery({
-    queryKey: [queryKey],
-    queryFn: async () => {
-      const response = await openApiClient.health.liveness();
-
-      return response;
-    },
-  });
+export const healthCheck = async () => {
+  const response = await openApiClient.health.liveness();
 
-  return healthCheck;
+  return response;
 };
+
+export const healthCheckQuery = () =>
+  queryOptions({
+    queryKey: [queryKey],
+    queryFn: () => healthCheck(),
+  });

apps/frontend/src/api/query/listDefinition.tsx

@@ -1,10 +1,10 @@
 import { openApiClient } from '@lib/orpc';
-import { useQuery } from '@tanstack/react-query';
-import { useEffect, useState } from 'react';
-import { useSearchParams } from 'react-router';
+import { queryOptions } from '@tanstack/react-query';
 import { z } from 'zod/v3';
 
-const responseSchema = z.object({
+export const queryKey = 'list-definition';
+
+export const responseSchema = z.object({
   list: z.array(
     z.object({
       id: z.number(),
@@ -21,44 +21,35 @@ const responseSchema = z.object({
   }),
 });
 
-export const queryKey = 'list-definition';
-
-export const useListDefinition = () => {
-  const [searchParams, setSearchParams] = useSearchParams();
-
-  const [paginationState, setPaginationState] = useState<{
+export const fetchDefinitionList = async (params: {
+  signal?: AbortSignal;
+  paginationState: {
     page: number;
     size: number;
-  }>({
-    page: Number(searchParams.get('page') ?? '1'),
-    size: Number(searchParams.get('size') ?? '10'),
-  });
-
-  const listDefinition = useQuery({
-    queryKey: [queryKey, paginationState.page, paginationState.size],
-    queryFn: async ({ signal }) => {
-      const response = await openApiClient.definition
-        .list(
-          {
-            page: paginationState.page.toString(),
-            limit: paginationState.size.toString(),
-          },
-          {
-            signal,
-          }
-        )
-        .then((res) => responseSchema.parse(res.data));
+  };
+}) => {
+  const response = await openApiClient.definition
+    .list(
+      {
+        page: params.paginationState.page.toString(),
+        limit: params.paginationState.size.toString(),
+      },
+      {
+        signal: params.signal,
+      }
+    )
+    .then((res) => responseSchema.parse(res.data));
+
+  return response;
+};
 
-      return response;
-    },
+export const definitionListQuery = (params: {
+  paginationState: {
+    page: number;
+    size: number;
+  };
+}) =>
+  queryOptions({
+    queryKey: [queryKey, params.paginationState.page, params.paginationState.size],
+    queryFn: ({ signal }) => fetchDefinitionList({ signal, paginationState: params.paginationState }),
   });
-
-  useEffect(() => {
-    setSearchParams({
-      page: paginationState.page.toString(),
-      size: paginationState.size.toString(),
-    });
-  }, [paginationState, setSearchParams]);
-
-  return { query: listDefinition, paginationState, setPaginationState };
-};