Step 8: react query

package.json

@@ -31,6 +31,7 @@
     "@radix-ui/react-dialog": "^1.0.4",
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-slot": "^1.0.2",
+    "@tanstack/react-query": "^5.37.1",
     "axios": "^1.4.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",

src/app.tsx

@@ -1,9 +1,12 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
 
 import { Layout } from "@/components/layout";
 import { Feed } from "@/pages/feed";
 import { UserProfile } from "@/pages/user-profile";
 
+const queryClient = new QueryClient();
+
 const router = createBrowserRouter([
   {
     path: "/",
@@ -22,5 +25,9 @@ const router = createBrowserRouter([
 ]);
 
 export function App() {
-  return <RouterProvider router={router} />;
+  return (
+    <QueryClientProvider client={queryClient}>
+      <RouterProvider router={router} />
+    </QueryClientProvider>
+  );
 }

src/application/get-user-profile/get-user-profile.ts

@@ -1,30 +1,18 @@
-import { useCallback } from "react";
-
-import UserService from "@/infrastructure/user";
+import { useGetUser } from "../queries/use-get-user";
+import { useGetUserShouts } from "../queries/use-get-user-shouts";
 
 interface GetUserProfileInput {
-  handle: string;
-}
-
-const dependencies = {
-  getUser: UserService.getUser,
-  getUserShouts: UserService.getUserShouts,
-};
-
-export async function getUserProfile(
-  { handle }: GetUserProfileInput,
-  { getUser, getUserShouts }: typeof dependencies
-) {
-  const [user, { shouts, images }] = await Promise.all([
-    getUser(handle),
-    getUserShouts(handle),
-  ]);
-  return { user, shouts, images };
+  handle?: string;
 }
 
-export function useGetUserProfile() {
-  return useCallback(
-    (input: GetUserProfileInput) => getUserProfile(input, dependencies),
-    []
-  );
+export function useGetUserProfile({ handle }: GetUserProfileInput) {
+  const user = useGetUser({ handle });
+  const userShouts = useGetUserShouts({ handle });
+  return {
+    user: user.data,
+    shouts: userShouts.data?.shouts,
+    images: userShouts.data?.images,
+    isLoading: user.isLoading || userShouts.isLoading,
+    error: user.error || userShouts.error,
+  };
 }

src/application/mutations/use-create-shout-reply.ts

@@ -0,0 +1,15 @@
+import { useMutation } from "@tanstack/react-query";
+
+import ShoutService from "@/infrastructure/shout";
+
+interface CreateShoutReplyInput {
+  shoutId: string;
+  replyId: string;
+}
+
+export function useCreateShoutReply() {
+  return useMutation({
+    mutationFn: (input: CreateShoutReplyInput) =>
+      ShoutService.createReply(input),
+  });
+}

src/application/mutations/use-create-shout.ts

@@ -0,0 +1,14 @@
+import { useMutation } from "@tanstack/react-query";
+
+import ShoutService from "@/infrastructure/shout";
+
+interface CreateShoutInput {
+  message: string;
+  imageId?: string;
+}
+
+export function useCreateShout() {
+  return useMutation({
+    mutationFn: (input: CreateShoutInput) => ShoutService.createShout(input),
+  });
+}

src/application/mutations/use-login.ts

@@ -0,0 +1,20 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+
+import AuthService from "@/infrastructure/auth";
+
+import { getQueryKey as getFeedQueryKey } from "../queries/use-get-feed";
+import { getQueryKey as getMeQueryKey } from "../queries/use-get-me";
+
+type Credentials = Parameters<(typeof AuthService)["login"]>[0];
+
+export function useLogin() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (credentials: Credentials) => AuthService.login(credentials),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: getMeQueryKey() });
+      queryClient.invalidateQueries({ queryKey: getFeedQueryKey() });
+    },
+  });
+}

src/application/mutations/use-logout.ts

@@ -0,0 +1,18 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+
+import AuthService from "@/infrastructure/auth";
+
+import { getQueryKey as getFeedQueryKey } from "../queries/use-get-feed";
+import { getQueryKey as getMeQueryKey } from "../queries/use-get-me";
+
+export function useLogout() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: () => AuthService.logout(),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: getMeQueryKey() });
+      queryClient.invalidateQueries({ queryKey: getFeedQueryKey() });
+    },
+  });
+}

src/application/mutations/use-save-image.ts

@@ -0,0 +1,9 @@
+import { useMutation } from "@tanstack/react-query";
+
+import MediaService from "@/infrastructure/media";
+
+export function useSaveImage() {
+  return useMutation({
+    mutationFn: (file: File) => MediaService.saveImage(file),
+  });
+}

src/application/queries/use-get-feed.ts

@@ -0,0 +1,14 @@
+import { useQuery } from "@tanstack/react-query";
+
+import FeedService from "@/infrastructure/feed";
+
+export function getQueryKey() {
+  return ["feed"];
+}
+
+export function useGetFeed() {
+  return useQuery({
+    queryKey: getQueryKey(),
+    queryFn: () => FeedService.getFeed(),
+  });
+}

src/application/queries/use-get-me.ts

@@ -0,0 +1,14 @@
+import { useQuery } from "@tanstack/react-query";
+
+import UserService from "@/infrastructure/user";
+
+export function getQueryKey() {
+  return ["me"];
+}
+
+export function useGetMe() {
+  return useQuery({
+    queryKey: getQueryKey(),
+    queryFn: () => UserService.getMe(),
+  });
+}

src/application/queries/use-get-user-shouts.ts

@@ -0,0 +1,18 @@
+import { useQuery } from "@tanstack/react-query";
+
+import UserService from "@/infrastructure/user";
+
+interface GetUserShoutsInput {
+  handle?: string;
+}
+
+export function getQueryKey(handle?: string) {
+  return ["user-shouts", handle];
+}
+
+export function useGetUserShouts({ handle }: GetUserShoutsInput) {
+  return useQuery({
+    queryKey: getQueryKey(handle),
+    queryFn: () => UserService.getUserShouts(handle),
+  });
+}

src/application/queries/use-get-user.ts

@@ -0,0 +1,18 @@
+import { useQuery } from "@tanstack/react-query";
+
+import UserService from "@/infrastructure/user";
+
+interface GetUserInput {
+  handle?: string;
+}
+
+export function getQueryKey(handle?: string) {
+  return ["user", handle];
+}
+
+export function useGetUser({ handle }: GetUserInput) {
+  return useQuery({
+    queryKey: getQueryKey(handle),
+    queryFn: () => UserService.getUser(handle),
+  });
+}

src/application/reply-to-shout/reply-to-shout.test.ts

@@ -31,59 +31,51 @@ const mockRecipient = {
   followerIds: [],
 };
 
-const mockGetMe = vitest.fn().mockResolvedValue(mockMe);
-const mockGetUser = vitest.fn().mockResolvedValue(mockRecipient);
 const mockSaveImage = vitest.fn().mockResolvedValue({ id: imageId });
 const mockCreateShout = vitest.fn().mockResolvedValue({ id: newShoutId });
 const mockCreateReply = vitest.fn();
 
 const mockDependencies = {
-  getMe: mockGetMe,
-  getUser: mockGetUser,
+  me: mockMe,
+  recipient: mockRecipient,
   saveImage: mockSaveImage,
   createShout: mockCreateShout,
   createReply: mockCreateReply,
 };
 
 describe("replyToShout", () => {
   beforeEach(() => {
-    Object.values(mockDependencies).forEach((mock) => mock.mockClear());
+    vitest.clearAllMocks();
   });
 
   it("should return an error if the user has made too many shouts", async () => {
-    mockGetMe.mockResolvedValueOnce({
-      ...mockMe,
-      numShoutsPastDay: MAX_NUM_SHOUTS_PER_DAY,
-    });
-
     const result = await replyToShout(
       { recipientHandle, shoutId, message, files },
-      mockDependencies
+      {
+        ...mockDependencies,
+        me: { ...mockMe, numShoutsPastDay: MAX_NUM_SHOUTS_PER_DAY },
+      }
     );
 
     expect(result).toEqual({ error: ErrorMessages.TooManyShouts });
   });
 
   it("should return an error if the recipient does not exist", async () => {
-    mockGetUser.mockResolvedValueOnce(undefined);
-
     const result = await replyToShout(
       { recipientHandle, shoutId, message, files },
-      mockDependencies
+      { ...mockDependencies, recipient: null }
     );
 
     expect(result).toEqual({ error: ErrorMessages.RecipientNotFound });
   });
 
   it("should return an error if the recipient has blocked the author", async () => {
-    mockGetUser.mockResolvedValueOnce({
-      ...mockRecipient,
-      blockedUserIds: [mockMe.id],
-    });
-
     const result = await replyToShout(
       { recipientHandle, shoutId, message, files },
-      mockDependencies
+      {
+        ...mockDependencies,
+        recipient: { ...mockRecipient, blockedUserIds: [mockMe.id] },
+      }
     );
 
     expect(result).toEqual({ error: ErrorMessages.AuthorBlockedByRecipient });