feat: add superjson middleware and React Query debugger

backend/.adonisjs/api.ts

@@ -4,49 +4,52 @@
 // This file is auto-generated by Tuyau. Do not edit manually !
 // --------------------------------------------------
 
-import type { MakeTuyauRequest, MakeTuyauResponse } from "@tuyau/utils/types";
+import type {
+  MakeTuyauRequest,
+  MakeNonSerializedTuyauResponse,
+} from "@tuyau/utils/types";
 import type { InferInput } from "@vinejs/vine/types";
 
 type TokenPost = {
   request: MakeTuyauRequest<
     InferInput<(typeof import("../app/validators/token.ts"))["tokenValidator"]>
   >;
-  response: MakeTuyauResponse<
+  response: MakeNonSerializedTuyauResponse<
     import("../app/controllers/auth/tokens_controller.ts").default["token"],
     true
   >;
 };
 type AuthIdRedirectGetHead = {
   request: unknown;
-  response: MakeTuyauResponse<
+  response: MakeNonSerializedTuyauResponse<
     import("../app/controllers/auth/social_controller.ts").default["redirect"],
     false
   >;
 };
 type AuthIdCallbackGetHead = {
   request: unknown;
-  response: MakeTuyauResponse<
+  response: MakeNonSerializedTuyauResponse<
     import("../app/controllers/auth/social_controller.ts").default["callback"],
     false
   >;
 };
 type AuthLocalLoginPost = {
   request: unknown;
-  response: MakeTuyauResponse<
+  response: MakeNonSerializedTuyauResponse<
     import("../app/controllers/auth/local_controller.ts").default["login"],
     false
   >;
 };
 type AuthLocalRegisterPost = {
   request: unknown;
-  response: MakeTuyauResponse<
+  response: MakeNonSerializedTuyauResponse<
     import("../app/controllers/auth/local_controller.ts").default["register"],
     false
   >;
 };
 type WaitingListEntriesGetHead = {
   request: unknown;
-  response: MakeTuyauResponse<
+  response: MakeNonSerializedTuyauResponse<
     import("../app/controllers/waiting_list_entries_controller.ts").default["getAllWaitingListEntries"],
     false
   >;
@@ -57,14 +60,14 @@ type WaitingListEntriesPost = {
       (typeof import("../app/validators/waiting_list.ts"))["waitingListEntryValidator"]
     >
   >;
-  response: MakeTuyauResponse<
+  response: MakeNonSerializedTuyauResponse<
     import("../app/controllers/waiting_list_entries_controller.ts").default["addWaitingListEntry"],
     true
   >;
 };
 type WaitinglistentriesIdDelete = {
   request: unknown;
-  response: MakeTuyauResponse<
+  response: MakeNonSerializedTuyauResponse<
     import("../app/controllers/waiting_list_entries_controller.ts").default["deleteWaitingListEntry"],
     false
   >;

backend/package.json

@@ -41,17 +41,18 @@
     "@napi-rs/image": "^1.9.2",
     "@sendgrid/mail": "^8.1.4",
     "@sentry/cli": "^2.41.1",
-    "@sentry/node": "^8.52.0",
-    "@sentry/profiling-node": "^8.52.0",
-    "@tuyau/core": "^0.3.0",
+    "@sentry/node": "^8.53.0",
+    "@sentry/profiling-node": "^8.53.0",
+    "@tuyau/core": "^0.3.2",
+    "@tuyau/superjson": "^0.0.2",
     "@vinejs/vine": "^3.0.0",
     "canvas": "^3.1.0",
     "jsbarcode": "^3.11.6",
     "jsonwebtoken": "^9.0.2",
     "moment": "^2.30.1",
     "moment-timezone": "^0.5.47",
-    "mongodb": "^6.12.0",
-    "mongoose": "^8.9.5",
+    "mongodb": "^6.13.0",
+    "mongoose": "^8.9.6",
     "passport": "^0.7.0",
     "passport-jwt": "^4.0.1",
     "passport-local": "^1.0.0",
@@ -71,16 +72,16 @@
     "@japa/assert": "^4.0.1",
     "@japa/plugin-adonisjs": "^4.0.0",
     "@japa/runner": "^4.2.0",
-    "@swc/core": "^1.10.11",
-    "@tuyau/utils": "^0.0.6",
+    "@swc/core": "^1.10.12",
+    "@tuyau/utils": "^0.0.7",
     "@types/chai": "^5.0.1",
     "@types/chai-as-promised": "^8.0.1",
     "@types/cors": "^2.8.17",
     "@types/jsonwebtoken": "^9.0.8",
     "@types/passport": "^1.0.17",
     "@types/passport-jwt": "^4.0.1",
     "@types/passport-local": "^1.0.38",
-    "@types/pdfkit": "^0.13.8",
+    "@types/pdfkit": "^0.13.9",
     "@types/qrcode": "^1.5.5",
     "@types/qs": "^6.9.18",
     "@types/request": "^2.48.12",

backend/start/kernel.ts

@@ -7,10 +7,9 @@ server.use([
   () => import("#middleware/container_bindings_middleware"),
   () => import("#middleware/force_json_response_middleware"),
   () => import("@adonisjs/cors/cors_middleware"),
+  () => import("@tuyau/superjson/superjson_middleware"),
 ]);
 
 router.use([() => import("@adonisjs/core/bodyparser_middleware")]);
 
-export const middleware = router.named({
-  superjson: () => import("#middleware/superjson_middleware"),
-});
+export const middleware = router.named({});

backend/start/routes.ts

@@ -1,7 +1,6 @@
 import router from "@adonisjs/core/services/router";
 
 import CollectionEndpointCreator from "#services/collection-endpoint/collection-endpoint-creator";
-import { middleware } from "#start/kernel";
 
 const AuthTokensController = () =>
   import("#controllers/auth/tokens_controller");
@@ -41,7 +40,6 @@ router
     WaitingListEntriesController,
     "getAllWaitingListEntries",
   ])
-  .use(middleware.superjson())
   .as("waiting_list_entries.getAll");
 router
   .post("/waiting_list_entries", [

frontend/package.json

@@ -16,18 +16,19 @@
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
     "@fontsource/roboto": "^5.1.1",
-    "@mui/icons-material": "^6.4.1",
-    "@mui/lab": "6.0.0-beta.24",
-    "@mui/material": "^6.4.1",
-    "@mui/material-nextjs": "^6.3.1",
-    "@mui/x-data-grid": "^7.24.1",
-    "@mui/x-date-pickers": "^7.24.1",
-    "@sentry/nextjs": "^8.52.0",
+    "@mui/icons-material": "^6.4.2",
+    "@mui/lab": "6.0.0-beta.25",
+    "@mui/material": "^6.4.2",
+    "@mui/material-nextjs": "^6.4.2",
+    "@mui/x-data-grid": "^7.25.0",
+    "@mui/x-date-pickers": "^7.25.0",
+    "@sentry/nextjs": "^8.53.0",
     "@tanstack/react-query": "^5.66.0",
     "@toolpad/core": "^0.12.0",
-    "@tuyau/client": "^0.2.4",
+    "@tuyau/client": "^0.2.5",
+    "@tuyau/superjson": "^0.0.2",
     "@yudiel/react-qr-scanner": "^2.1.0",
-    "babel-plugin-react-compiler": "19.0.0-beta-27714ef-20250124",
+    "babel-plugin-react-compiler": "19.0.0-beta-714736e-20250131",
     "draft-js": "^0.11.7",
     "moment": "^2.30.1",
     "next": "15.1.6",
@@ -44,6 +45,7 @@
     "zustand": "^5.0.3"
   },
   "devDependencies": {
+    "@tanstack/react-query-devtools": "^5.66.0",
     "@testing-library/react": "^16.2.0",
     "@tsconfig/cypress": "^1.0.2",
     "@tsconfig/next": "^2.0.3",

frontend/src/api/user.ts

@@ -40,7 +40,9 @@ export const updateUserDetails = async (
   userDetails: Partial<UserDetail>,
 ) => {
   return await BlFetcher.patch(
-    apiClient.$url("collection.userdetails.patch", { params: { id: userId } }),
+    apiClient.$url("collection.userdetails.patch", {
+      params: { id: userId },
+    }),
     userDetails,
   );
 };

frontend/src/app/(offentlig)/auth/forgot/page.tsx

@@ -22,7 +22,7 @@ interface ForgotFields {
 }
 
 const ForgotPage = () => {
-  const { client } = useApiClient();
+  const client = useApiClient();
   const {
     register,
     handleSubmit,

frontend/src/app/(offentlig)/under-construction/orders/page.tsx

@@ -9,7 +9,7 @@ import OrderHistory from "@/components/OrderHistory";
 import useApiClient from "@/utils/api/useApiClient";
 
 const OrdersPage = () => {
-  const { client } = useApiClient();
+  const client = useApiClient();
   const [orders, setOrders] = useState<Order[]>();
 
   useEffect(() => {

frontend/src/app/layout.tsx

@@ -2,7 +2,7 @@ import { ThemeProvider } from "@mui/material";
 import CssBaseline from "@mui/material/CssBaseline";
 import { AppRouterCacheProvider } from "@mui/material-nextjs/v15-appRouter";
 import { Metadata } from "next";
-import { ReactNode, Suspense } from "react";
+import { ReactNode } from "react";
 
 import AuthLinker from "@/components/AuthLinker";
 import DynamicHeightProvider from "@/components/DynamicHeightProvider";
@@ -27,23 +27,21 @@ export default function RootLayout({ children }: { children: ReactNode }) {
   return (
     <html lang="no">
       <body>
-        <Suspense>
+        <ReactQueryClientProvider>
           <DynamicHeightProvider>
             <CustomLocalizationProvider>
-              <ReactQueryClientProvider>
-                <AppRouterCacheProvider>
-                  <ThemeProvider theme={theme}>
-                    <AuthLinker>
-                      {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
-                      <CssBaseline />
-                      {children}
-                    </AuthLinker>
-                  </ThemeProvider>
-                </AppRouterCacheProvider>
-              </ReactQueryClientProvider>
+              <AppRouterCacheProvider>
+                <ThemeProvider theme={theme}>
+                  <AuthLinker>
+                    {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
+                    <CssBaseline />
+                    {children}
+                  </AuthLinker>
+                </ThemeProvider>
+              </AppRouterCacheProvider>
             </CustomLocalizationProvider>
           </DynamicHeightProvider>
-        </Suspense>
+        </ReactQueryClientProvider>
       </body>
     </html>
   );

frontend/src/components/AuthVerifier.tsx

@@ -12,7 +12,7 @@ import useApiClient from "@/utils/api/useApiClient";
 import BL_CONFIG from "@/utils/bl-config";
 
 export default function AuthVerifier() {
-  const { client } = useApiClient();
+  const client = useApiClient();
   const router = useRouter();
   useEffect(() => {
     if (!isLoggedIn()) {

frontend/src/components/BranchSelect.tsx

@@ -17,7 +17,7 @@ import useApiClient from "@/utils/api/useApiClient";
 import { useGlobalState } from "@/utils/useGlobalState";
 
 const BranchSelect = ({ isNav }: { isNav?: boolean }) => {
-  const { client } = useApiClient();
+  const client = useApiClient();
   const { data: branches } = useQuery({
     queryKey: [
       client.$url("collection.branches.getAll", {

frontend/src/components/EmailConfirmer.tsx

@@ -13,7 +13,7 @@ export default function EmailConfirmer({
 }: {
   confirmationId: string;
 }) {
-  const { client } = useApiClient();
+  const client = useApiClient();
   const [status, setStatus] = useState<"WAIT" | "SUCCESS" | "ERROR">("WAIT");
 
   useEffect(() => {

frontend/src/components/OrderHistory.tsx

@@ -51,7 +51,7 @@ const paymentTypes = {
 };
 
 const OrderHistory = ({ orders }: { orders: Order[] }) => {
-  const { client } = useApiClient();
+  const client = useApiClient();
   const [wait, setWait] = useState(false);
   const [openOrder, setOpenOrder] = useState("");
   const [openPayment, setOpenPayment] = useState<Payment | undefined>();

frontend/src/components/RapidHandoutDetails.tsx

@@ -38,7 +38,7 @@ export default function RapidHandoutDetails({
 }: {
   customer: UserDetail;
 }) {
-  const { client } = useApiClient();
+  const client = useApiClient();
   const queryClient = useQueryClient();
   const ordersUrl = client.$url("collection.orders.getAll", {
     query: { placed: true, customer: customer.id },

frontend/src/components/ReactQueryClientProvider.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import { ReactNode } from "react";
 
 export default function ReactQueryClientProvider({
@@ -21,6 +22,7 @@ export default function ReactQueryClientProvider({
       }
     >
       {children}
+      <ReactQueryDevtools />
     </QueryClientProvider>
   );
 }

frontend/src/components/admin/communication/MultiBranchPicker.tsx

@@ -31,7 +31,7 @@ export default function MultiBranchPicker({
 }: {
   onChange: (newBranchIds: string[]) => void;
 }) {
-  const { client } = useApiClient();
+  const client = useApiClient();
   const [branchIDs, setBranchIDs] = useState<string[]>([]);
 
   const { data: branches } = useQuery({

frontend/src/components/admin/waiting-list/CreateWaitingListEntry.tsx

@@ -24,7 +24,7 @@ interface WaitingListEntryFormFields {
 }
 
 export default function CreateWaitingListEntry({ items }: { items: Item[] }) {
-  const { client } = useApiClient();
+  const client = useApiClient();
   const queryClient = useQueryClient();
   const { selectedBranchId } = useGlobalState();
   const [selectedItems, setSelectedItems] = useState<

frontend/src/components/admin/waiting-list/WaitingList.tsx

@@ -2,7 +2,6 @@
 
 import { Branch } from "@boklisten/backend/shared/branch/branch";
 import { Item } from "@boklisten/backend/shared/item/item";
-import { WaitingListEntry } from "@boklisten/backend/shared/waiting-list/waiting-list-entry";
 import { Alert, AlertTitle } from "@mui/material";
 import { useQuery } from "@tanstack/react-query";
 
@@ -12,7 +11,7 @@ import WaitingListTable from "@/components/admin/waiting-list/WaitingListTable";
 import useApiClient from "@/utils/api/useApiClient";
 
 export default function WaitingList() {
-  const { client, deserialize } = useApiClient();
+  const client = useApiClient();
 
   const {
     data: items,
@@ -42,11 +41,7 @@ export default function WaitingList() {
     error: waitingListError,
   } = useQuery({
     queryKey: [client.waiting_list_entries.$url()],
-    queryFn: () =>
-      client.waiting_list_entries
-        .$get()
-        .unwrap()
-        .then((res) => deserialize<WaitingListEntry[]>(res)),
+    queryFn: () => client.waiting_list_entries.$get().unwrap(),
   });
 
   if (itemsError || branchesError || waitingListError) {

frontend/src/components/admin/waiting-list/WaitingListTable.tsx

@@ -26,7 +26,7 @@ export default function WaitingListTable({
   branches: Branch[];
   waitingList: WaitingListEntry[];
 }) {
-  const { client } = useApiClient();
+  const client = useApiClient();
   const queryClient = useQueryClient();
   const [pendingUpdate, setPendingUpdate] = useState(false);
   async function handleDeleteWaitingListEntry(id: string | number) {

frontend/src/components/editableText/EditableTextEditor.tsx

@@ -16,7 +16,7 @@ const Quill = styled(
 )({});
 
 export const EditableTextEditor = ({ editableText }: EditorProps) => {
-  const { client } = useApiClient();
+  const client = useApiClient();
   const initialValue = editableText.text ?? "";
 
   const editorState = useRef<string>(initialValue);