more prefetching

Author: KevinVandy

apps/1-vite-componentdidmount/src/AppLayout.tsx

@@ -28,7 +28,7 @@ export function AppLayout({ children }: AppLayoutProps) {
  return (
  <AppShell
  header={{ height: 60 }}
- navbar={{ width: 300, breakpoint: "sm", collapsed: { mobile: !opened } }}
+ navbar={{ width: 200, breakpoint: "sm", collapsed: { mobile: !opened } }}
  padding="xl"
  >
  <AppShell.Header>

apps/2-vite-useeffect/src/AppLayout.tsx

@@ -55,7 +55,7 @@ export function AppLayout({ children }: AppLayoutProps) {
  return (
  <AppShell
  header={{ height: 60 }}
- navbar={{ width: 300, breakpoint: "sm", collapsed: { mobile: !opened } }}
+ navbar={{ width: 200, breakpoint: "sm", collapsed: { mobile: !opened } }}
  padding="xl"
  >
  <AppShell.Header>

apps/2-vite-useeffect/src/pages/PostPage.tsx

@@ -39,7 +39,7 @@ export const PostPage = () => {
  const [isErrorLoadingComments, setIsErrorLoadingComments] = useState(false);
  const [isDeletingComment, setIsDeletingComment] = useState(false);
  const [deletingCommentId, setDeletingCommentId] = useState<number | null>(
- null
+ null,
  );
  const [isPostingComment, setIsPostingComment] = useState(false);
 
@@ -85,7 +85,7 @@ export const PostPage = () => {
  }
  try {
  const fetchUrl = new URL(
- `http://localhost:3333/posts/${postId}/comments`
+ `http://localhost:3333/posts/${postId}/comments`,
  );
  const response = await fetch(fetchUrl.href);
  const fetchedComments = (await response.json()) as IComment[];

apps/2-vite-useeffect/src/pages/UserPage.tsx

@@ -94,7 +94,7 @@ export const UserPage = () => {
  <Text>Email: {user?.email}</Text>
  <Text>Phone: {user?.phone}</Text>
  <Text>Website: {user?.website}</Text>
- <Text>
+ <Text component="div">
  Address:
  <address>
  {user?.address.street}, {user?.address.suite},<br />

apps/2-vite-useeffect/src/pages/UsersPage.tsx

@@ -63,7 +63,7 @@ export const UsersPage = () => {
  ),
  },
  ],
- []
+ [],
  );
 
  return (

apps/3-vite-reactquery/src/AppLayout.tsx

@@ -55,7 +55,7 @@ export function AppLayout({ children }: AppLayoutProps) {
  return (
  <AppShell
  header={{ height: 60 }}
- navbar={{ width: 300, breakpoint: "sm", collapsed: { mobile: !opened } }}
+ navbar={{ width: 200, breakpoint: "sm", collapsed: { mobile: !opened } }}
  padding="xl"
  >
  <AppShell.Header>

apps/3-vite-reactquery/src/pages/PostPage.tsx

@@ -47,7 +47,7 @@ export const PostPage = () => {
  queryKey: ["users", post?.userId],
  queryFn: async () => {
  const response = await fetch(
- `http://localhost:3333/users/${post?.userId}`
+ `http://localhost:3333/users/${post?.userId}`,
  );
  return response.json() as Promise<IUser>;
  },
@@ -64,7 +64,7 @@ export const PostPage = () => {
  queryKey: ["posts", postId, "comments"],
  queryFn: async () => {
  const response = await fetch(
- `http://localhost:3333/posts/${postId}/comments`
+ `http://localhost:3333/posts/${postId}/comments`,
  );
  return response.json() as Promise<IComment[]>;
  },
@@ -82,7 +82,7 @@ export const PostPage = () => {
  `http://localhost:3333/comments/${commentId}`,
  {
  method: "DELETE",
- }
+ },
  );
  return response.json() as Promise<IComment>;
  },
@@ -91,7 +91,7 @@ export const PostPage = () => {
  onError: (err, commentId) => {
  console.error(
  `Error deleting comment ${commentId}. Rolling UI back`,
- err
+ err,
  );
  alert("Error deleting comment");
  },
@@ -133,7 +133,7 @@ export const PostPage = () => {
  // Optimistically update to the new value
  queryClient.setQueryData(
  ["posts", postId, "comments"],
- (oldComments: any) => [...oldComments, newComment]
+ (oldComments: any) => [...oldComments, newComment],
  );
 
  // Return a context object with the snapshot value
@@ -144,7 +144,7 @@ export const PostPage = () => {
  onError: (err, _newComment, context) => {
  queryClient.setQueryData(
  ["posts", postId, "comments"],
- context?.previousComments
+ context?.previousComments,
  );
  console.error("Error posting comment. Rolling UI back", err);
  },

apps/3-vite-reactquery/src/pages/UserPage.tsx

@@ -70,7 +70,7 @@ export const UserPage = () => {
  <Text>Email: {user?.email}</Text>
  <Text>Phone: {user?.phone}</Text>
  <Text>Website: {user?.website}</Text>
- <Text>
+ <Text component="div">
  Address:
  <address>
  {user?.address.street}, {user?.address.suite},<br />

apps/3.1-vite-reactquery-refactor/src/AppLayout.tsx

@@ -10,28 +10,34 @@ import { useDisclosure } from "@mantine/hooks";
 import { IconHome, IconUsersGroup } from "@tabler/icons-react";
 import { useMemo } from "react";
 import { Link, useLocation } from "react-router-dom";
+import { prefetchUsers } from "./hooks/useGetUsers";
+import { useQueryClient } from "@tanstack/react-query";
+import { prefetchPosts } from "./hooks/useGetPosts";
 
 interface AppLayoutProps {
  children: React.ReactNode;
 }
 
-const links = [
- {
- icon: <IconHome size="1rem" />,
- color: "blue",
- label: "Home Feed",
- href: "/",
- },
- {
- icon: <IconUsersGroup size="1rem" />,
- color: "teal",
- label: "Users",
- href: "/users",
- },
-];
-
 export function AppLayout({ children }: AppLayoutProps) {
  const { pathname } = useLocation();
+ const queryClient = useQueryClient();
+
+ const links = [
+ {
+ icon: <IconHome size="1rem" />,
+ color: "blue",
+ label: "Home Feed",
+ href: "/",
+ prefetch: () => prefetchPosts(queryClient),
+ },
+ {
+ icon: <IconUsersGroup size="1rem" />,
+ color: "teal",
+ label: "Users",
+ href: "/users",
+ prefetch: () => prefetchUsers(queryClient),
+ },
+ ];
 
  const breadCrumbLinks = useMemo(() => {
  const routes = pathname.split("/");
@@ -55,7 +61,7 @@ export function AppLayout({ children }: AppLayoutProps) {
  return (
  <AppShell
  header={{ height: 60 }}
- navbar={{ width: 300, breakpoint: "sm", collapsed: { mobile: !opened } }}
+ navbar={{ width: 200, breakpoint: "sm", collapsed: { mobile: !opened } }}
  padding="xl"
  >
  <AppShell.Header>
@@ -66,7 +72,12 @@ export function AppLayout({ children }: AppLayoutProps) {
  </AppShell.Header>
  <AppShell.Navbar p="md">
  {links.map((link) => (
- <Anchor component={Link} key={link.label} to={link.href}>
+ <Anchor
+ onMouseEnter={link.prefetch}
+ component={Link}
+ key={link.label}
+ to={link.href}
+ >
  {link.label}
  </Anchor>
  ))}

apps/3.1-vite-reactquery-refactor/src/AppProviders.tsx

@@ -7,7 +7,7 @@ import { theme } from "./theme";
 const ReactQueryDevtoolsProduction = lazy(() =>
  import("@tanstack/react-query-devtools/production").then((d) => ({
  default: d.ReactQueryDevtools,
- }))
+ })),
 );
 
 const queryClient = new QueryClient({