🧑‍💻 use remix new useLoaderData type inference

less code and awesome type security 😊 https://github.com/remix-run/remix/releases/tag/remix%401.6.5 remix-run/remix#3276
capraconsulting · Jul 21, 2022 · 85b5746 · 85b5746
1 parent bb62990
commit 85b5746
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 24 deletions.
diff --git a/app/routes/dette-har-vi-gjort/$slug.tsx b/app/routes/dette-har-vi-gjort/$slug.tsx
@@ -1,6 +1,7 @@
-import type { LoaderFunction, MetaFunction } from "@remix-run/node";
+import type { LoaderArgs, MetaFunction } from "@remix-run/node";
 import { json } from "@remix-run/node";
 import { useLoaderData } from "@remix-run/react";
+import type { UseDataFunctionReturn } from "@remix-run/react/dist/components";
 
 import { Todo } from "~/components/todo";
 import {
@@ -22,24 +23,24 @@ export function assertItemFound<T>(item: T | undefined): asserts item is T {
     });
 }
 
-const query = (slug: string) =>
-  sanityClient.getAll("selvskryt", `slug.current == "${slug}"`);
+export const loader = async ({ params }: LoaderArgs) => {
+  const query = (slug: string) =>
+    sanityClient.getAll("selvskryt", `slug.current == "${slug}"`);
 
-type Data = { item: Awaited<ReturnType<typeof query>>[0] };
-export const loader: LoaderFunction = async ({ params }) => {
   const item = (await query(params.slug ?? ""))[0];
   assertItemFound(item);
 
-  return json<Data>({ item });
+  return json({ item });
 };
 
-export const meta: MetaFunction = ({ data }: { data: Data }) => ({
+type LoaderData = UseDataFunctionReturn<typeof loader>;
+export const meta: MetaFunction = ({ data }: { data: LoaderData }) => ({
   title: data.item.helmetTitle,
   description: data.item.helmetDescription,
 });
 
 export default function DetteHarViGjortItem() {
-  const { item } = useLoaderData<Data>();
+  const { item } = useLoaderData<typeof loader>();
 
   // Quick and dirty
   // Extract some text from the BlockContent body

diff --git a/app/routes/dette-har-vi-gjort/index.tsx b/app/routes/dette-har-vi-gjort/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";
 
@@ -7,20 +7,9 @@ import { TitleAndText } from "~/components/title-and-text";
 import { Todo } from "~/components/todo";
 import { sanityClient } from "~/sanity/sanity-client.server";
 
-// TODO: I propose to move this function to a shared utility/common file
-export function assertItemFound<T>(item: T | undefined): asserts item is T {
-  if (item === undefined)
-    throw new Response("Not Found", {
-      status: 404,
-    });
-}
-
-const query = () => sanityClient.getAll("selvskryt");
-
-type Data = { items: Awaited<ReturnType<typeof query>> };
-export const loader: LoaderFunction = async () => {
-  const items = await query();
-  return json<Data>({ items });
+export const loader = async () => {
+  const items = await sanityClient.getAll("selvskryt");
+  return json({ items });
 };
 
 const TITLE =
@@ -33,7 +22,7 @@ export const meta: MetaFunction = () => ({
 });
 
 export default function DetteHarViGjort() {
-  const { items } = useLoaderData<Data>();
+  const { items } = useLoaderData<typeof loader>();
 
   return (
     <>