Overhaul loaders to use identical signature serialization

apps/web/app/lib/auth.ts

@@ -1,4 +1,4 @@
-import { redirect } from "@remix-run/node";
+import { redirect } from "@remix-run/server-runtime";
 
 export function redirectToAuth({ request }: { request: Request }) {
   return redirect(getAuthRedirect({ request }));

apps/web/app/lib/isomorphicLoader.ts

@@ -1,8 +1,14 @@
 import { makeTRPCClient } from "@peated/server/lib/trpc";
 import { type User } from "@peated/server/types";
 import config from "@peated/web/config";
-import { type ClientLoaderFunctionArgs } from "@remix-run/react";
-import { json, type LoaderFunctionArgs } from "@remix-run/server-runtime";
+import {
+  type ClientLoaderFunction,
+  type ClientLoaderFunctionArgs,
+} from "@remix-run/react";
+import {
+  type LoaderFunction,
+  type LoaderFunctionArgs,
+} from "@remix-run/server-runtime";
 import { captureException } from "@sentry/remix";
 
 export type IsomorphicContext = {
@@ -41,21 +47,16 @@ export function makeIsomorphicLoader<T extends DataFunctionValue>(
       request,
       params,
       context: { trpc, user },
-    }: LoaderFunctionArgs) {
+    }) {
       const context: IsomorphicContext = {
         request,
         params,
         context: { trpc, user },
         isServer: true,
       };
-      const payload = await callback(context);
-      if (payload instanceof Response) return payload;
-      return json(payload);
-    },
-    clientLoader: async function clientLoader({
-      request,
-      params,
-    }: ClientLoaderFunctionArgs) {
+      return await callback(context);
+    } satisfies LoaderFunction,
+    clientLoader: async function clientLoader({ request, params }) {
       const trpcClient = makeTRPCClient(
         config.API_SERVER,
         window.REMIX_CONTEXT.accessToken,
@@ -69,6 +70,6 @@ export function makeIsomorphicLoader<T extends DataFunctionValue>(
         isServer: false,
       };
       return await callback(context);
-    },
+    } satisfies ClientLoaderFunction,
   };
 }

apps/web/app/routes/_index.tsx

@@ -1,7 +1,3 @@
-import { Link, useLoaderData, useLocation } from "@remix-run/react";
-import { Fragment } from "react";
-import { useEventListener } from "usehooks-ts";
-
 import Alert from "@peated/web/components/alert";
 import Glyph from "@peated/web/components/assets/Glyph";
 import BetaNotice from "@peated/web/components/betaNotice";
@@ -17,6 +13,10 @@ import useAuth from "@peated/web/hooks/useAuth";
 import classNames from "@peated/web/lib/classNames";
 import { trpc } from "@peated/web/lib/trpc";
 import { type SerializeFrom } from "@remix-run/node";
+import { Link, useLoaderData, useLocation } from "@remix-run/react";
+import { json } from "@remix-run/server-runtime";
+import { Fragment } from "react";
+import { useEventListener } from "usehooks-ts";
 import { makeIsomorphicLoader } from "../lib/isomorphicLoader";
 
 const defaultViewParam = "global";
@@ -26,12 +26,12 @@ export const { loader, clientLoader } = makeIsomorphicLoader(
     const { searchParams } = new URL(request.url);
     const filter = mapFilterParam(searchParams.get("view"));
 
-    return {
+    return json({
       tastingList: await trpc.tastingList.query({
         filter,
         limit: 10,
       }),
-    };
+    });
   },
 );
 

apps/web/app/routes/bottles.$bottleId.prices.tsx

@@ -1,6 +1,7 @@
 import BetaNotice from "@peated/web/components/betaNotice";
 import TimeSince from "@peated/web/components/timeSince";
 import { useLoaderData } from "@remix-run/react";
+import { json } from "@remix-run/server-runtime";
 import invariant from "tiny-invariant";
 import { makeIsomorphicLoader } from "../lib/isomorphicLoader";
 
@@ -12,7 +13,7 @@ export const { loader, clientLoader } = makeIsomorphicLoader(
       bottle: Number(bottleId),
     });
 
-    return { priceList };
+    return json({ priceList });
   },
 );
 

apps/web/app/routes/bottles.$bottleId.tastings.tsx

@@ -1,6 +1,7 @@
 import EmptyActivity from "@peated/web/components/emptyActivity";
 import TastingList from "@peated/web/components/tastingList";
 import { useLoaderData, useParams } from "@remix-run/react";
+import { json } from "@remix-run/server-runtime";
 import invariant from "tiny-invariant";
 import { makeIsomorphicLoader } from "../lib/isomorphicLoader";
 
@@ -12,7 +13,7 @@ export const { loader, clientLoader } = makeIsomorphicLoader(
       bottle: Number(bottleId),
     });
 
-    return { tastingList };
+    return json({ tastingList });
   },
 );
 

apps/web/app/routes/bottles.$bottleId.tsx

@@ -21,8 +21,9 @@ import useAuth from "@peated/web/hooks/useAuth";
 import { summarize } from "@peated/web/lib/markdown";
 import { formatCategoryName } from "@peated/web/lib/strings";
 import { trpc } from "@peated/web/lib/trpc";
-import type { MetaFunction } from "@remix-run/node";
+import { type MetaFunction } from "@remix-run/node";
 import { Link, Outlet, useLoaderData, useNavigate } from "@remix-run/react";
+import { json } from "@remix-run/server-runtime";
 import { useQueryClient } from "@tanstack/react-query";
 import invariant from "tiny-invariant";
 import { makeIsomorphicLoader } from "../lib/isomorphicLoader";
@@ -33,7 +34,7 @@ export const { loader, clientLoader } = makeIsomorphicLoader(
 
     const bottle = await trpc.bottleById.query(Number(params.bottleId));
 
-    return { bottle };
+    return json({ bottle });
   },
 );
 

apps/web/app/routes/bottles.$bottleId_.addTasting.tsx

@@ -20,15 +20,16 @@ import { redirectToAuth } from "@peated/web/lib/auth";
 import { toBlob } from "@peated/web/lib/blobs";
 import { logError } from "@peated/web/lib/log";
 import { trpc } from "@peated/web/lib/trpc";
-import type { LoaderFunctionArgs, MetaFunction } from "@remix-run/node";
-import { json } from "@remix-run/node";
+import { type MetaFunction } from "@remix-run/node";
 import { useLoaderData, useNavigate } from "@remix-run/react";
+import { json } from "@remix-run/server-runtime";
 import { TRPCClientError } from "@trpc/client";
 import { useState } from "react";
 import type { SubmitHandler } from "react-hook-form";
 import { Controller, useForm } from "react-hook-form";
 import invariant from "tiny-invariant";
 import type { z } from "zod";
+import { makeIsomorphicLoader } from "../lib/isomorphicLoader";
 
 type FormSchemaType = z.infer<typeof TastingInputSchema>;
 
@@ -41,22 +42,20 @@ const servingStyleList = SERVING_STYLE_LIST.map((c) => ({
   name: formatServingStyle(c),
 }));
 
-export async function loader({
-  request,
-  params: { bottleId },
-  context: { trpc, user },
-}: LoaderFunctionArgs) {
-  invariant(bottleId);
+export const { loader, clientLoader } = makeIsomorphicLoader(
+  async ({ request, params: { bottleId }, context: { trpc, user } }) => {
+    invariant(bottleId);
 
-  if (!user) return redirectToAuth({ request });
+    if (!user) return redirectToAuth({ request });
 
-  const bottle = await trpc.bottleById.query(Number(bottleId));
-  const suggestedTags = await trpc.bottleSuggestedTagList.query({
-    bottle: Number(bottleId),
-  });
+    const bottle = await trpc.bottleById.query(Number(bottleId));
+    const suggestedTags = await trpc.bottleSuggestedTagList.query({
+      bottle: Number(bottleId),
+    });
 
-  return json({ bottle, suggestedTags });
-}
+    return json({ bottle, suggestedTags });
+  },
+);
 
 export const meta: MetaFunction = () => {
   return [

apps/web/app/routes/bottles.$bottleId_.edit.tsx

@@ -1,10 +1,11 @@
 import BottleForm from "@peated/web/components/bottleForm";
 import Spinner from "@peated/web/components/spinner";
 import { trpc } from "@peated/web/lib/trpc";
-import type { LoaderFunctionArgs } from "@remix-run/node";
-import { json, type MetaFunction } from "@remix-run/node";
+import { type MetaFunction } from "@remix-run/node";
 import { useLoaderData, useNavigate, useParams } from "@remix-run/react";
+import { json } from "@remix-run/server-runtime";
 import invariant from "tiny-invariant";
+import { makeIsomorphicLoader } from "../lib/isomorphicLoader";
 
 export const meta: MetaFunction = () => {
   return [
@@ -14,15 +15,15 @@ export const meta: MetaFunction = () => {
   ];
 };
 
-export async function loader({
-  params: { bottleId },
-  context: { trpc },
-}: LoaderFunctionArgs) {
-  invariant(bottleId);
-  const bottle = await trpc.bottleById.query(Number(bottleId));
+export const { loader, clientLoader } = makeIsomorphicLoader(
+  async ({ params, context: { trpc } }) => {
+    invariant(params.bottleId);
 
-  return json({ bottle });
-}
+    const bottle = await trpc.bottleById.query(Number(params.bottleId));
+
+    return json({ bottle });
+  },
+);
 
 export default function EditBottle() {
   const { bottle } = useLoaderData<typeof loader>();

apps/web/app/routes/bottles._index.tsx

@@ -9,6 +9,7 @@ import { formatCategoryName } from "@peated/web/lib/strings";
 import { buildQueryString } from "@peated/web/lib/urls";
 import { type MetaFunction, type SerializeFrom } from "@remix-run/node";
 import { useLoaderData, useLocation } from "@remix-run/react";
+import { json } from "@remix-run/server-runtime";
 import { type SitemapFunction } from "remix-sitemap";
 import { makeIsomorphicLoader } from "../lib/isomorphicLoader";
 
@@ -38,15 +39,15 @@ export const { loader, clientLoader } = makeIsomorphicLoader(
       "bottler",
       "entity",
     ]);
-    return {
+    return json({
       bottleList: await trpc.bottleList.query(
         Object.fromEntries(
           [...searchParams.entries()].map(([k, v]) =>
             numericFields.has(k) ? [k, Number(v)] : [k, v === "" ? null : v],
           ),
         ),
       ),
-    };
+    });
   },
 );
 

apps/web/app/routes/entities.$entityId.bottles.tsx

@@ -1,8 +1,9 @@
 import type { Entity } from "@peated/server/types";
 import BottleTable from "@peated/web/components/bottleTable";
 import QueryBoundary from "@peated/web/components/queryBoundary";
-import type { SerializeFrom } from "@remix-run/node";
+import { type SerializeFrom } from "@remix-run/node";
 import { useLoaderData, useLocation, useOutletContext } from "@remix-run/react";
+import { json } from "@remix-run/server-runtime";
 import invariant from "tiny-invariant";
 import { makeIsomorphicLoader } from "../lib/isomorphicLoader";
 
@@ -20,7 +21,7 @@ export const { loader, clientLoader } = makeIsomorphicLoader(
       "entity",
     ]);
 
-    return {
+    return json({
       bottleList: await trpc.bottleList.query({
         ...Object.fromEntries(
           [...searchParams.entries()].map(([k, v]) =>
@@ -29,7 +30,7 @@ export const { loader, clientLoader } = makeIsomorphicLoader(
         ),
         entity: Number(entityId),
       }),
-    };
+    });
   },
 );
 

apps/web/app/routes/entities.$entityId.tastings.tsx

@@ -1,18 +1,19 @@
 import EmptyActivity from "@peated/web/components/emptyActivity";
 import TastingList from "@peated/web/components/tastingList";
 import { useLoaderData } from "@remix-run/react";
+import { json } from "@remix-run/server-runtime";
 import invariant from "tiny-invariant";
 import { makeIsomorphicLoader } from "../lib/isomorphicLoader";
 
 export const { loader, clientLoader } = makeIsomorphicLoader(
   async ({ params: { entityId }, context: { trpc } }) => {
     invariant(entityId);
 
-    return {
+    return json({
       tastingList: await trpc.tastingList.query({
         entity: Number(entityId),
       }),
-    };
+    });
   },
 );
 

apps/web/app/routes/entities.$entityId.tsx

@@ -9,25 +9,21 @@ import Tabs from "@peated/web/components/tabs";
 import useAuth from "@peated/web/hooks/useAuth";
 import { summarize } from "@peated/web/lib/markdown";
 import { getEntityUrl } from "@peated/web/lib/urls";
-import type {
-  LinksFunction,
-  LoaderFunctionArgs,
-  MetaFunction,
-} from "@remix-run/node";
-import { json } from "@remix-run/node";
+import type { LinksFunction, MetaFunction } from "@remix-run/node";
 import { Link, Outlet, useLoaderData, useParams } from "@remix-run/react";
+import { json } from "@remix-run/server-runtime";
 import invariant from "tiny-invariant";
+import { makeIsomorphicLoader } from "../lib/isomorphicLoader";
 
-export async function loader({
-  params: { entityId },
-  context: { trpc },
-}: LoaderFunctionArgs) {
-  invariant(entityId);
+export const { loader, clientLoader } = makeIsomorphicLoader(
+  async ({ params: { entityId }, context: { trpc } }) => {
+    invariant(entityId);
 
-  const entity = await trpc.entityById.query(Number(entityId));
+    const entity = await trpc.entityById.query(Number(entityId));
 
-  return json({ entity });
-}
+    return json({ entity });
+  },
+);
 
 export const meta: MetaFunction<typeof loader> = ({ data }) => {
   if (!data) return [];

apps/web/app/routes/entities.$entityId_.edit.tsx

@@ -12,18 +12,16 @@ import SelectField from "@peated/web/components/selectField";
 import Spinner from "@peated/web/components/spinner";
 import TextField from "@peated/web/components/textField";
 import { trpc } from "@peated/web/lib/trpc";
-import {
-  json,
-  type LoaderFunctionArgs,
-  type MetaFunction,
-} from "@remix-run/node";
+import { type MetaFunction } from "@remix-run/node";
 import { useLoaderData, useNavigate, useParams } from "@remix-run/react";
+import { json } from "@remix-run/server-runtime";
 import { useQueryClient } from "@tanstack/react-query";
 import { getQueryKey } from "@trpc/react-query";
 import type { SubmitHandler } from "react-hook-form";
 import { Controller, useForm } from "react-hook-form";
 import invariant from "tiny-invariant";
 import type { z } from "zod";
+import { makeIsomorphicLoader } from "../lib/isomorphicLoader";
 
 const entityTypes = [
   { id: "brand", name: "Brand" },
@@ -41,15 +39,15 @@ export const meta: MetaFunction = () => {
   ];
 };
 
-export async function loader({
-  params: { entityId },
-  context: { trpc },
-}: LoaderFunctionArgs) {
-  invariant(entityId);
-  const entity = await trpc.entityById.query(Number(entityId));
+export const { loader, clientLoader } = makeIsomorphicLoader(
+  async ({ params: { entityId }, context: { trpc } }) => {
+    invariant(entityId);
 
-  return json({ entity });
-}
+    const entity = await trpc.entityById.query(Number(entityId));
+
+    return json({ entity });
+  },
+);
 
 export default function EditEntity() {
   const navigate = useNavigate();