fix: fix useActionData/useLoaderData usage (#82)

Author: MichaelDeBoey

basic/app/routes/demos/actions.tsx

@@ -1,4 +1,4 @@
-import type { ActionFunction, MetaFunction } from "@remix-run/node";
+import type { ActionArgs, MetaFunction } from "@remix-run/node";
 import { json, redirect } from "@remix-run/node";
 import { Form, useActionData } from "@remix-run/react";
 import { useEffect, useRef } from "react";
@@ -10,7 +10,7 @@ export const meta: MetaFunction = () => ({
 // When your form sends a POST, the action is called on the server.
 // - https://remix.run/api/conventions#action
 // - https://remix.run/guides/data-updates
-export const action: ActionFunction = async ({ request }) => {
+export const action = async ({ request }: ActionArgs) => {
   const formData = await request.formData();
   const answer = formData.get("answer");
 
@@ -35,7 +35,7 @@ export const action: ActionFunction = async ({ request }) => {
 
 export default function ActionsDemo() {
   // https://remix.run/api/remix#useactiondata
-  const actionMessage = useActionData<string>();
+  const actionMessage = useActionData<typeof action>();
   const answerRef = useRef<HTMLInputElement>(null);
 
   // This form works without JavaScript, but when we have JavaScript we can make

basic/app/routes/demos/params/$id.tsx

@@ -1,11 +1,11 @@
-import type { LoaderFunction, MetaFunction } from "@remix-run/node";
+import type { LoaderArgs, MetaFunction } from "@remix-run/node";
 import { json } from "@remix-run/node";
 import { useCatch, useLoaderData } from "@remix-run/react";
 
 // The `$` in route filenames becomes a pattern that's parsed from the URL and
 // passed to your loaders so you can look up data.
 // - https://remix.run/api/conventions#loader-params
-export const loader: LoaderFunction = async ({ params }) => {
+export const loader = async ({ params }: LoaderArgs) => {
   // pretend like we're using params.id to look something up in the db
 
   if (params.id === "this-record-does-not-exist") {
@@ -39,7 +39,7 @@ export const loader: LoaderFunction = async ({ params }) => {
 };
 
 export default function ParamDemo() {
-  const data = useLoaderData();
+  const data = useLoaderData<typeof loader>();
   return (
     <h1>
       The param is <i style={{ color: "red" }}>{data.param}</i>

basic/app/routes/index.tsx

@@ -1,4 +1,4 @@
-import type { LoaderFunction, MetaFunction } from "@remix-run/node";
+import type { MetaFunction } from "@remix-run/node";
 import { json } from "@remix-run/node";
 import { Link, useLoaderData } from "@remix-run/react";
 
@@ -11,7 +11,7 @@ type IndexData = {
 // you can connect to a database or run any server side code you want right next
 // to the component that renders it.
 // https://remix.run/api/conventions#loader
-export const loader: LoaderFunction = async () => {
+export const loader = async () => {
   const data: IndexData = {
     resources: [
       {
@@ -48,16 +48,14 @@ export const loader: LoaderFunction = async () => {
 };
 
 // https://remix.run/api/conventions#meta
-export const meta: MetaFunction = () => {
-  return {
-    title: "Remix Starter",
-    description: "Welcome to remix!",
-  };
-};
+export const meta: MetaFunction = () => ({
+  title: "Remix Starter",
+  description: "Welcome to remix!",
+});
 
 // https://remix.run/guides/routing#index-routes
 export default function Index() {
-  const data = useLoaderData<IndexData>();
+  const data = useLoaderData<typeof loader>();
 
   return (
     <div className="remix__page">

bullmq-task-queue/app/routes/index.tsx

@@ -1,10 +1,10 @@
-import type { ActionFunction } from "@remix-run/node";
+import type { ActionArgs } from "@remix-run/node";
 import { json } from "@remix-run/node";
 import { Form, useActionData, useTransition } from "@remix-run/react";
 
 import { queue } from "~/queues/notifier.server";
 
-export const action: ActionFunction = async ({ request }) => {
+export const action = async ({ request }: ActionArgs) => {
   const formData = await request.formData();
   const email = formData.get("email");
 
@@ -23,7 +23,7 @@ export const action: ActionFunction = async ({ request }) => {
 };
 
 export default function Index() {
-  const actionMessage = useActionData<string>();
+  const actionMessage = useActionData<typeof action>();
   const transition = useTransition();
 
   return (

catch-boundary/app/routes/index.tsx

@@ -1,4 +1,3 @@
-import type { LoaderFunction } from "@remix-run/node";
 import { redirect } from "@remix-run/node";
 
-export const loader: LoaderFunction = async () => redirect("/users");
+export const loader = async () => redirect("/users");

catch-boundary/app/routes/users.tsx

@@ -1,25 +1,20 @@
-import type { LoaderFunction, MetaFunction } from "@remix-run/node";
+import type { MetaFunction } from "@remix-run/node";
 import { json } from "@remix-run/node";
 import { Link, Outlet, useLoaderData } from "@remix-run/react";
 
-import type { User } from "~/data.server";
 import { getUsers } from "~/data.server";
 
-type LoaderData = {
-  users: Array<User>;
-};
-
 export const meta: MetaFunction = () => {
   return { title: "Users" };
 };
 
-export const loader: LoaderFunction = async () => {
+export const loader = async () => {
   const users = getUsers();
-  return json<LoaderData>({ users });
+  return json({ users });
 };
 
 export default function Users() {
-  const { users } = useLoaderData<LoaderData>();
+  const { users } = useLoaderData<typeof loader>();
 
   return (
     <div>

catch-boundary/app/routes/users/$userId.tsx

@@ -1,15 +1,10 @@
-import type { LoaderFunction, MetaFunction } from "@remix-run/node";
+import type { LoaderArgs, MetaFunction } from "@remix-run/node";
 import { json } from "@remix-run/node";
 import { useCatch, useLoaderData, useParams } from "@remix-run/react";
 
-import type { User as UserType } from "~/data.server";
 import { getUsers } from "~/data.server";
 
-interface LoaderData {
-  user: UserType;
-}
-
-export const meta: MetaFunction = ({ data }: { data: LoaderData | null }) => {
+export const meta: MetaFunction<typeof loader> = ({ data }) => {
   // When the response is thrown for a missing user, the data will be the
   // thrown response.
   if (!data || !data.user) {
@@ -18,7 +13,7 @@ export const meta: MetaFunction = ({ data }: { data: LoaderData | null }) => {
   return { title: data.user.name };
 };
 
-export const loader: LoaderFunction = async ({ params }) => {
+export const loader = async ({ params }: LoaderArgs) => {
   const userId = params.userId;
 
   const users = getUsers();
@@ -29,11 +24,11 @@ export const loader: LoaderFunction = async ({ params }) => {
     throw new Response("Not Found", { status: 404 });
   }
 
-  return json<LoaderData>({ user });
+  return json({ user });
 };
 
 export default function User() {
-  const { user } = useLoaderData<LoaderData>();
+  const { user } = useLoaderData<typeof loader>();
   return <div>Hi there {user.name}!</div>;
 }
 

client-side-validation/app/root.tsx

@@ -1,9 +1,4 @@
-import type {
-  ActionFunction,
-  LinksFunction,
-  LoaderFunction,
-  MetaFunction,
-} from "@remix-run/node";
+import type { ActionArgs, LinksFunction, MetaFunction } from "@remix-run/node";
 import { json } from "@remix-run/node";
 import {
   Links,
@@ -27,7 +22,7 @@ export const meta: MetaFunction = () => ({
   viewport: "width=device-width,initial-scale=1",
 });
 
-export const action: ActionFunction = async ({ request }) => {
+export const action = async ({ request }: ActionArgs) => {
   const form = await request.formData();
   const message = `Successfully submitted data:
       - Required text: ${form.get("required-text")}
@@ -42,12 +37,7 @@ export const action: ActionFunction = async ({ request }) => {
   return json({ message }, { status: 200 });
 };
 
-type LoaderData = {
-  todayString: string;
-  tomorrowString: string;
-};
-
-export const loader: LoaderFunction = async () => {
+export const loader = async () => {
   const date = new Date();
 
   // today string in "YYYY-MM-DD" format
@@ -66,8 +56,8 @@ export const loader: LoaderFunction = async () => {
 };
 
 export default function App() {
-  const actionData = useActionData();
-  const data = useLoaderData<LoaderData>();
+  const actionData = useActionData<typeof action>();
+  const data = useLoaderData<typeof loader>();
 
   return (
     <html lang="en">

collected-notes/app/routes/$slug.tsx

@@ -1,23 +1,18 @@
-import type { LoaderFunction } from "@remix-run/node";
+import type { LoaderArgs } from "@remix-run/node";
 import { json } from "@remix-run/node";
 import { useLoaderData } from "@remix-run/react";
-import type { HTML } from "collected-notes";
 
 import { cn, sitePath } from "~/cn.server";
 
-type LoaderData = {
-  body: HTML;
-};
-
-export const loader: LoaderFunction = async ({ params }) => {
+export const loader = async ({ params }: LoaderArgs) => {
   const slug = params.slug;
   if (typeof slug !== "string") throw new Error("Missing slug");
   const { body } = await cn.body(sitePath, slug);
-  return json<LoaderData>({ body });
+  return json({ body });
 };
 
 export default function Screen() {
-  const { body } = useLoaderData<LoaderData>();
+  const { body } = useLoaderData<typeof loader>();
   return (
     <main>
       <article dangerouslySetInnerHTML={{ __html: body }} />

collected-notes/app/routes/index.tsx

@@ -1,16 +1,10 @@
-import type { LoaderFunction } from "@remix-run/node";
+import type { LoaderArgs } from "@remix-run/node";
 import { json } from "@remix-run/node";
 import { Form, Link, useLoaderData, useSearchParams } from "@remix-run/react";
-import type { Note, Site } from "collected-notes";
 
 import { cn, sitePath } from "~/cn.server";
 
-type LoaderData = {
-  site: Site;
-  notes: Note[];
-};
-
-export const loader: LoaderFunction = async ({ request }) => {
+export const loader = async ({ request }: LoaderArgs) => {
   const url = new URL(request.url);
   const term = url.searchParams.get("term") || "";
   const page = Number(url.searchParams.get("page") || "1");
@@ -24,11 +18,11 @@ export const loader: LoaderFunction = async ({ request }) => {
     cn.site(sitePath),
   ]);
 
-  return json<LoaderData>({ notes, site });
+  return json({ notes, site });
 };
 
 export default function Screen() {
-  const { site, notes } = useLoaderData<LoaderData>();
+  const { site, notes } = useLoaderData<typeof loader>();
   const [params] = useSearchParams();
   const term = params.get("term") || "";
   const page = Number(params.get("page") || "1");