improve orval generation and use loader to prefetch

Author: ddecrulle

orval.config.ts

@@ -0,0 +1,18 @@
+import { defineConfig } from "orval";
+export default defineConfig({
+    todos: {
+        output: {
+            target: "src/todos-api/client.gen.ts",
+            client: "react-query",
+            override: {
+                mutator: {
+                    path: "src/todos-api/axiosInstance.ts",
+                    name: "fetch"
+                }
+            }
+        },
+        hooks: {
+            afterAllFilesWrite: "yarn format"
+        }
+    }
+});

package.json

@@ -7,7 +7,7 @@
     "type": "module",
     "scripts": {
         "postinstall": "vite-envs update-types",
-        "dev": "vite --host",
+        "dev": "vite",
         "build": "tsc -b && vite build",
         "lint": "eslint ./src",
         "preview": "vite preview",

scripts/generate-todos-api-client.ts

@@ -1,10 +1,8 @@
 import * as fs from "fs";
-import { join as pathJoin } from "path";
+import { join as pathJoin, resolve } from "path";
 import { assert } from "tsafe/assert";
 import fetch from "node-fetch";
 import * as child_process from "child_process";
-import type { defineConfig } from "orval";
-import type { Param0 } from "tsafe";
 
 const projectDirPath = process.cwd();
 
@@ -36,41 +34,22 @@ const projectDirPath = process.cwd();
         await fetch(`${todosApiUrl}/doc`).then(response => response.text())
     );
 
+    const originalOrvalConfigPath = pathJoin(projectDirPath, "orval.config.ts");
     const orvalConfigFilePath = pathJoin(cacheDirPath, "orval.config.ts");
 
-    const todosApiSrcDirPath = pathJoin(projectDirPath, "src", "todos-api");
+    const configContent = fs
+        .readFileSync(originalOrvalConfigPath, "utf-8")
+        .replace(/(path|target):\s*['"]([^'"]+)['"]/g, (_, key, relativePath) => {
+            const absolutePath = resolve(projectDirPath, relativePath);
+            return `${key}: '${absolutePath.replace(/\\/g, "\\\\")}'`;
+        })
+        .replace(/todos:\s*{/, match => {
+            return `${match}\n    input: '${todosOpenApiJsonFilePath.replace(/\\/g, "\\\\")}',`;
+        });
 
-    const generatedFilePath = pathJoin(todosApiSrcDirPath, "client.gen.ts");
-
-    const orvalConfig: Param0<typeof defineConfig> = {
-        todos: {
-            input: todosOpenApiJsonFilePath,
-            output: {
-                target: generatedFilePath,
-                override: {
-                    mutator: {
-                        path: pathJoin(todosApiSrcDirPath, "axiosInstance.ts"),
-                        name: "fetch"
-                    }
-                }
-            }
-        }
-    };
-
-    fs.writeFileSync(
-        orvalConfigFilePath,
-        Buffer.from(
-            [
-                `import { defineConfig } from "orval";`,
-                `export default defineConfig(${JSON.stringify(orvalConfig)});`
-            ].join("\n"),
-            "utf8"
-        )
-    );
+    fs.writeFileSync(orvalConfigFilePath, configContent, "utf-8");
 
     run(`npx orval --config ${orvalConfigFilePath}`);
-
-    run(`npx prettier --write ${generatedFilePath}`);
 })();
 
 function run(command: string) {

src/main.lazy.tsx

@@ -7,8 +7,12 @@ import { routeTree } from "./routeTree.gen";
 import { I18nFetchingSuspense } from "i18n";
 import { MuiDsfrThemeProvider } from "@codegouvfr/react-dsfr/mui";
 import { useLang } from "i18n";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
+const queryClient = new QueryClient();
+
+const router = createRouter({ routeTree, context: { queryClient }, defaultPreload: "intent" });
 
-const router = createRouter({ routeTree });
 // Register the router instance for type safety
 declare module "@tanstack/react-router" {
     interface Register {
@@ -33,12 +37,14 @@ startReactDsfr({
 
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
     <React.StrictMode>
-        <MuiDsfrThemeProvider>
-            <OidcProvider>
-                <I18nFetchingSuspense>
-                    <RouterProvider router={router} />
-                </I18nFetchingSuspense>
-            </OidcProvider>
-        </MuiDsfrThemeProvider>
+        <QueryClientProvider client={queryClient}>
+            <MuiDsfrThemeProvider>
+                <OidcProvider>
+                    <I18nFetchingSuspense>
+                        <RouterProvider router={router} />
+                    </I18nFetchingSuspense>
+                </OidcProvider>
+            </MuiDsfrThemeProvider>
+        </QueryClientProvider>
     </React.StrictMode>
 );

src/oidc.ts

@@ -17,7 +17,7 @@ if (!issuerUri) {
     console.log("=============  VITE_OIDC_ISSUER_URI not set, USING MOCK OIDC =============");
 }
 
-export const { OidcProvider, useOidc, getOidc, enforceLogin } = issuerUri
+export const { OidcProvider, useOidc, getOidc, enforceLogin, withLoginEnforced } = issuerUri
     ? createReactOidc({
           issuerUri,
           clientId,

src/routes/__root.tsx

@@ -1,11 +1,14 @@
 import { createRootRouteWithContext, Outlet } from "@tanstack/react-router";
+import { QueryClient } from "@tanstack/react-query";
 import { Footer } from "components/Footer";
 import { Header } from "components/Header";
 import { fr } from "@codegouvfr/react-dsfr";
 import { AutoLogoutCountdown } from "components/AutoLogoutCountdown";
 import { tss, GlobalStyles } from "tss";
 
-export const Route = createRootRouteWithContext()({
+export const Route = createRootRouteWithContext<{
+    queryClient: QueryClient;
+}>()({
     component: RootComponent,
     notFoundComponent: () => <>The route is not defined</>
 });

src/routes/todo.tsx

@@ -7,29 +7,40 @@ import { fr } from "@codegouvfr/react-dsfr";
 import { assert } from "tsafe/assert";
 import CircularProgress from "@mui/material/CircularProgress";
 import { declareComponentKeys, useTranslation } from "i18n";
+import { getGetTodosQueryOptions } from "todos-api/client.gen";
 
 export const Route = createFileRoute("/todo")({
     component: Page,
+    pendingComponent: PendingTodo,
     beforeLoad: async params => {
         await enforceLogin(params);
+    },
+    loader: async ({ context: { queryClient }, abortController }) => {
+        queryClient.prefetchQuery(
+            getGetTodosQueryOptions({ request: { signal: abortController.signal } })
+        );
     }
 });
 
+function PendingTodo() {
+    const { classes } = useStyles();
+    const { t } = useTranslation("TodoPage");
+
+    return (
+        <div className={classes.circularProgressWrapper}>
+            <CircularProgress />
+            <br />
+            <h5 className={classes.delayedMessage}>{t("waking up container")}</h5>
+        </div>
+    );
+}
 function Page() {
     const { todos, createTodo, deleteTodo, updateTodo, isPending } = useTodosApi();
 
     const { classes } = useStyles();
 
-    const { t } = useTranslation("TodoPage");
-
     if (todos === undefined) {
-        return (
-            <div className={classes.circularProgressWrapper}>
-                <CircularProgress />
-                <br />
-                <h5 className={classes.delayedMessage}>{t("waking up container")}</h5>
-            </div>
-        );
+        return <PendingTodo />;
     }
 
     return (
@@ -38,17 +49,17 @@ function Page() {
                 className={classes.todoApp}
                 todos={todos}
                 isPending={isPending}
-                onAddTodo={createTodo}
-                onDeleteTodo={deleteTodo}
-                onUpdateTodoText={(id, text) => updateTodo({ id, text })}
+                onAddTodo={(text: string) => createTodo({ data: { text } })}
+                onDeleteTodo={(id: string) => deleteTodo({ id })}
+                onUpdateTodoText={(id, text) => updateTodo({ id, data: { text } })}
                 onToggleTodo={id => {
                     const todo = todos.find(todo => todo.id === id);
 
                     assert(todo !== undefined);
 
                     updateTodo({
                         id,
-                        isDone: !todo.isDone
+                        data: { isDone: !todo.isDone }
                     });
                 }}
             />