fix(_official-realtime-app): fix useActionData/useLoaderData usage (#85)

Author: MichaelDeBoey

_official-realtime-app/app/root.tsx

@@ -1,4 +1,5 @@
 import type { LinksFunction, MetaFunction } from "@remix-run/node";
+import { json } from "@remix-run/node";
 import {
   Links,
   Meta,
@@ -52,6 +53,6 @@ function useRealtimeIssuesRevalidation() {
 
 // FIXME: Pointless action for revalidation until:
 // https://github.com/remix-run/remix/issues/4485
-export function action() {
-  return { ok: true };
+export async function action() {
+  return json({ ok: true });
 }

_official-realtime-app/app/routes/index.tsx

@@ -1,19 +1,20 @@
+import { json } from "@remix-run/node";
 import { Link, useFetcher, useNavigate } from "@remix-run/react";
 import { useLoaderData } from "@remix-run/react";
 import classNames from "classnames";
 import { useEffect, useRef } from "react";
 
-import { getIssues } from "../data";
-import type { Issue } from "../data";
-import * as AmalgoBox from "../amalgo-box.client";
-import icons from "../icons.svg";
+import * as AmalgoBox from "~/amalgo-box.client";
+import type { Issue } from "~/data";
+import { getIssues } from "~/data";
+import icons from "~/icons.svg";
 
-export function loader() {
-  return getIssues();
+export async function loader() {
+  return json(await getIssues());
 }
 
 export default function Index() {
-  const issues = useLoaderData() as Issue[];
+  const issues = useLoaderData<typeof loader>();
 
   useEffect(() => AmalgoBox.registerCustomElements(), []);
   return (

_official-realtime-app/app/routes/issues-events.tsx

@@ -1,9 +1,9 @@
-import { type DataFunctionArgs } from "@remix-run/node";
+import type { LoaderArgs } from "@remix-run/node";
 import { eventStream } from "remix-utils";
 
-import { emitter, EVENTS } from "../events";
+import { emitter, EVENTS } from "~/events";
 
-export const loader = ({ request }: DataFunctionArgs) => {
+export const loader = async ({ request }: LoaderArgs) => {
   return eventStream(request.signal, (send) => {
     const handler = (message: string) => {
       send({ data: message });

_official-realtime-app/app/routes/issues.$id.tsx

@@ -1,28 +1,22 @@
+import type { LoaderArgs, MetaFunction } from "@remix-run/node";
 import { json } from "@remix-run/node";
-import type { DataFunctionArgs, SerializeFrom } from "@remix-run/node";
 import { useFetcher, useLoaderData } from "@remix-run/react";
 import invariant from "tiny-invariant";
 
 import { getIssue } from "~/data";
 
-export const loader = async ({ params }: DataFunctionArgs) => {
+export const loader = async ({ params }: LoaderArgs) => {
   invariant(params.id, "Missing issue id");
   const issue = await getIssue(params.id);
   if (!issue) {
     throw json("Issue not found", { status: 404 });
   }
-  return issue;
+  return json(issue);
 };
 
-export const meta = ({
-  data: issue,
-}: {
-  data: SerializeFrom<typeof loader>;
-}) => {
-  return {
-    title: issue?.title || "Not Found",
-  };
-};
+export const meta: MetaFunction<typeof loader> = ({ data: issue }) => ({
+  title: issue?.title || "Not Found",
+});
 
 export default function Issue() {
   const issue = useLoaderData<typeof loader>();

_official-realtime-app/app/routes/issues.$id.update.tsx

@@ -1,13 +1,14 @@
-import { type DataFunctionArgs } from "@remix-run/node";
+import type { ActionArgs } from "@remix-run/node";
+import { json } from "@remix-run/node";
 import invariant from "tiny-invariant";
 
 import { updateIssue } from "~/data";
 import { emitter, EVENTS } from "~/events";
 
-export const action = async ({ params, request }: DataFunctionArgs) => {
+export const action = async ({ params, request }: ActionArgs) => {
   const updates = Object.fromEntries(await request.formData());
   invariant(params.id, "Missing issue id");
   const result = await updateIssue(params.id, updates);
   emitter.emit(EVENTS.ISSUE_CHANGED, Date.now());
-  return result;
+  return json(result);
 };