refactor(hooks): update query keys and improve ID filtering logic

Author: anyulled

src/hooks/useFetchSpeakers.test.tsx

@@ -66,7 +66,7 @@ describe("fetch speaker hook and speaker adapter", () => {
     expect(result.current.data).toEqual(speakerAdapter(payload.data));
   });
 
-  it("should adapt from server response a query with id", async () => {
+  it("should filter by ID when an ID is passed", async () => {
     //Given
     const { wrapper } = getQueryClientWrapper();
     mockedAxios.get.mockResolvedValueOnce(payload);

src/hooks/useFetchSpeakers.ts

@@ -28,7 +28,7 @@ export const useFetchSpeakers = (
   }
 
   return useQuery(
-    "api-speakers",
+    ["api-speakers", speakerId],
     async () => {
       try {
         const serverResponse = await axios.get(url, {
@@ -50,8 +50,8 @@ export const useFetchSpeakers = (
       }
     },
     {
-      cacheTime: 1800000, // 30 minutes
-      staleTime: 1800000, // 30 minutes
+      cacheTime: 1800000,
+      staleTime: 1800000,
     },
   );
 };

src/hooks/useFetchTalks.test.tsx

@@ -103,7 +103,7 @@ describe("useFetchTalksById", () => {
     vi.clearAllMocks();
   });
 
-  it("should use default URL when no parameter is provided", async () => {
+  it("should fetch a single talk by id", async () => {
     const mockSession = createMockSession();
     const mockData: IGroup[] = [
       createMockGroup({

src/hooks/useFetchTalks.ts

@@ -40,7 +40,7 @@ const getUrl = (urlOrYear?: string): string => {
  * @returns The query result
  */
 const useFetchTalksBase = <T>(
-  queryKey: string,
+  queryKey: string | (string | undefined)[],
   urlOrYear?: string,
   dataTransformer: (data: IGroup[]) => T = (data: IGroup[]) =>
     data as unknown as T,
@@ -68,13 +68,19 @@ export const useFetchTalksById = (
   id: string,
   urlOrYear?: string,
 ): UseQueryResult<Session> => {
-  return useFetchTalksBase<Session>("talks", urlOrYear, (data: IGroup[]) => {
-    const sessions = data
-      .map((track: IGroup) => track.sessions)
-      .flat(1)
-      .filter((session: { id: number | string }) => String(session.id) === id);
-    return sessions[0];
-  });
+  return useFetchTalksBase<Session>(
+    ["talks", id],
+    urlOrYear,
+    (data: IGroup[]) => {
+      const sessions = data
+        .map((track: IGroup) => track.sessions)
+        .flat(1)
+        .filter(
+          (session: { id: number | string }) => String(session.id) === id,
+        );
+      return sessions[0];
+    },
+  );
 };
 
 export const useFetchLiveView = (

src/index.tsx

@@ -45,8 +45,4 @@ root.render(
     </BrowserRouter>
   </React.Suspense>,
 );
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals())
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
 reportWebVitals();