-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.tsx
57 lines (48 loc) · 1.62 KB
/
index.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
import { QueryClient, useQuery } from "@tanstack/react-query";
import { LoaderFunctionArgs, useLoaderData, useParams } from "react-router-dom";
import { postContentActions } from "~/config/postContentActions";
import { PostContent } from "~/features/Post/PostContent";
import { PostHeader } from "~/features/Post/PostHeader";
import { useBlogErrorToast } from "~/hooks/useBlogErrorToast";
import { PostMetadata } from "~/models/post";
import {
availableActionsQuery,
commentListQuery,
postMetadataQuery,
postQuery,
} from "~/services/queries";
/** Load a blog post content + comments */
export const loader =
(queryClient: QueryClient) =>
async ({ params }: LoaderFunctionArgs) => {
const { blogId, postId } = params;
// Prefetch some data, if not done already
const actions = availableActionsQuery(postContentActions);
await queryClient.fetchQuery(actions);
if (blogId && postId) {
const comments = commentListQuery(blogId, postId);
await queryClient.fetchQuery(comments);
return await queryClient.fetchQuery(postMetadataQuery(blogId, postId));
}
return null;
};
export function Component() {
useBlogErrorToast();
const { blogId, postId } = useParams();
const postMetadata = useLoaderData() as PostMetadata; // see loader above
const query = useQuery(postQuery(blogId!, postMetadata));
const { data: comments } = useQuery(commentListQuery(blogId!, postId!));
if (!blogId || !query.data) {
return <></>;
}
return (
<>
<PostHeader />
<PostContent
blogId={blogId}
post={query.data}
comments={comments ?? []}
/>
</>
);
}