According to the tutorial of Remix.
Basic usage of loader is like below(It is my original code from this).
1 import { type LoaderFunction, json } from "@remix-run/node";
2 import { useLoaderData } from "@remix-run/react";
3 import { PrismaClient } from "@prisma/client";
4
5 export const loader: LoaderFunction = async () => {
6 const prisma = new PrismaClient();
7 const postData = await prisma.post.findFirst();
8
9 return json({ postData });
10 };
11
12 export default function Index() {
13 const { postData } = useLoaderData<typeof loader>();
14
15 return (
16 <>
17 <h1>My app for sample</h1>
18 <h2>{postData?.name ? postData.name : 'loading...'}</h2>
19 <h2>{postData?.body ? postData.body : 'loading...'}</h2>
20 </>
21 );
22 }
Then, the variable postData
of line 7 has the Type like below(VS code let us show the type while I hover on the variable.).
But the postData
of line 13 which is defined at client has type of any
.
We want to know that type.
The simple answer is below.
July 29th Add
I research again this thing and found much simple way.
We use function declaration instead of allow function.
import { type LoaderFunction, json } from "@remix-run/node";
import { useLoaderData } from "@remix-run/react";
import { PrismaClient } from "@prisma/client";
- export const loader: LoaderFunction = async () => {
+ export async function loader() {
const prisma = new PrismaClient();
const postData = await prisma.post.findFirst();
return json({ postData });
};
export default function Index() {
const { postData } = useLoaderData<typeof loader>();
return (
<>
<h1>My app for sample</h1>
<h2>{postData?.name ? postData.name : 'loading...'}</h2>
<h2>{postData?.body ? postData.body : 'loading...'}</h2>
</>
);
}
We can see the type of the data!
Below is old.
import { type LoaderFunction, json } from "@remix-run/node";
import { useLoaderData } from "@remix-run/react";
import { PrismaClient } from "@prisma/client";
+ type LoaderReturn = {
+ postData: {
+ name: string;
+ body?: string;
+ },
+ }
export const loader: LoaderFunction = async () => {
const prisma = new PrismaClient();
const postData = await prisma.post.findFirst();
return json({ postData });
};
export default function Index() {
- const { postData } = useLoaderData<typeof loader>();
+ const { postData } = useLoaderData<typeof loader>() as LoaderReturn;
return (
<>
<h1>My app for sample</h1>
<h2>{postData?.name ? postData.name : 'loading...'}</h2>
<h2>{postData?.body ? postData.body : 'loading...'}</h2>
</>
);
}
You can define the type manually!
Or, you can replace the loader in the generics of useLoaderData to the type you made.
import { type LoaderFunction, json } from "@remix-run/node";
import { useLoaderData } from "@remix-run/react";
import { PrismaClient } from "@prisma/client";
+ type LoaderReturn = {
+ postData: {
+ name: string;
+ body?: string;
+ },
+ };
export const loader: LoaderFunction = async () => {
const prisma = new PrismaClient();
const postData = await prisma.post.findFirst();
return json({ postData });
};
export default function Index() {
- const { postData } = useLoaderData<typeof loader>();
+ const { postData } = useLoaderData<LoaderReturn>();
return (
<>
<h1>My app for sample</h1>
<h2>{postData?.name ? postData.name : 'loading...'}</h2>
<h2>{postData?.body ? postData.body : 'loading...'}</h2>
</>
);
}
This is cleaner than before!
The return of the action
is same.
I am looking for a job
As of July 2024, I am looking for a job.
My areas of expertise are React, TypeScript, Remix, Next, PHP, and WordPress.
I'm currently a student, so I'm looking for a part-time position where I can work up to 20 hours a week.
I'm looking for a full-time job starting next August.
Top comments (0)