Update React Query to v5 (#2043)

* update api workspace * fix remaining TS errors * fix some tests * fix versions
mitodl · Feb 12, 2025 · a295f34 · a295f34
1 parent a0abcda
commit a295f34
Show file tree

Hide file tree

Showing 40 changed files with 311 additions and 352 deletions.
diff --git a/frontends/api/package.json b/frontends/api/package.json
@@ -27,7 +27,7 @@
     "ol-test-utilities": "0.0.0"
   },
   "dependencies": {
-    "@tanstack/react-query": "^4.36.1",
+    "@tanstack/react-query": "^5.66.0",
     "axios": "^1.6.3"
   }
 }
diff --git a/frontends/api/src/hooks/articles/index.test.ts b/frontends/api/src/hooks/articles/index.test.ts
@@ -71,9 +71,9 @@ describe("Article CRUD", () => {
 
     await waitFor(() => expect(result.current.isSuccess).toBe(true))
     expect(makeRequest).toHaveBeenCalledWith("post", url, requestData)
-    expect(queryClient.invalidateQueries).toHaveBeenCalledWith(
-      articleKeys.listRoot(),
-    )
+    expect(queryClient.invalidateQueries).toHaveBeenCalledWith({
+      queryKey: articleKeys.listRoot(),
+    })
   })
 
   test("useArticlePartialUpdate calls correct API", async () => {
@@ -89,7 +89,9 @@ describe("Article CRUD", () => {
     await waitFor(() => expect(result.current.isSuccess).toBe(true))
     const { id, ...patchData } = article
     expect(makeRequest).toHaveBeenCalledWith("patch", url, patchData)
-    expect(queryClient.invalidateQueries).toHaveBeenCalledWith(articleKeys.root)
+    expect(queryClient.invalidateQueries).toHaveBeenCalledWith({
+      queryKey: articleKeys.root,
+    })
   })
 
   test("useArticleDestroy calls correct API", async () => {
@@ -104,8 +106,8 @@ describe("Article CRUD", () => {
 
     await waitFor(() => expect(result.current.isSuccess).toBe(true))
     expect(makeRequest).toHaveBeenCalledWith("delete", url, undefined)
-    expect(queryClient.invalidateQueries).toHaveBeenCalledWith(
-      articleKeys.listRoot(),
-    )
+    expect(queryClient.invalidateQueries).toHaveBeenCalledWith({
+      queryKey: articleKeys.listRoot(),
+    })
   })
 })
diff --git a/frontends/api/src/hooks/articles/index.ts b/frontends/api/src/hooks/articles/index.ts
@@ -1,9 +1,4 @@
-import {
-  UseQueryOptions,
-  useMutation,
-  useQuery,
-  useQueryClient,
-} from "@tanstack/react-query"
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
 
 import { articlesApi } from "../../clients"
 import type {
@@ -14,7 +9,7 @@ import { articleQueries, articleKeys } from "./queries"
 
 const useArticleList = (
   params: ArticleListRequest = {},
-  opts: Pick<UseQueryOptions, "enabled"> = {},
+  opts?: { enabled?: boolean },
 ) => {
   return useQuery({
     ...articleQueries.list(params),
@@ -40,7 +35,7 @@ const useArticleCreate = () => {
         .articlesCreate({ ArticleRequest: data })
         .then((response) => response.data),
     onSuccess: () => {
-      client.invalidateQueries(articleKeys.listRoot())
+      client.invalidateQueries({ queryKey: articleKeys.listRoot() })
     },
   })
 }
@@ -49,7 +44,7 @@ const useArticleDestroy = () => {
   return useMutation({
     mutationFn: (id: number) => articlesApi.articlesDestroy({ id }),
     onSuccess: () => {
-      client.invalidateQueries(articleKeys.listRoot())
+      client.invalidateQueries({ queryKey: articleKeys.listRoot() })
     },
   })
 }
@@ -64,7 +59,7 @@ const useArticlePartialUpdate = () => {
         })
         .then((response) => response.data),
     onSuccess: (_data) => {
-      client.invalidateQueries(articleKeys.root)
+      client.invalidateQueries({ queryKey: articleKeys.root })
     },
   })
 }

diff --git a/frontends/api/src/hooks/articles/queries.ts b/frontends/api/src/hooks/articles/queries.ts
@@ -1,4 +1,4 @@
-import { QueryOptions } from "@tanstack/react-query"
+import { queryOptions } from "@tanstack/react-query"
 import { articlesApi } from "../../clients"
 import type { ArticlesApiArticlesListRequest as ArticleListRequest } from "../../generated/v1"
 
@@ -12,16 +12,16 @@ const articleKeys = {
 
 const articleQueries = {
   list: (params: ArticleListRequest) =>
-    ({
+    queryOptions({
       queryKey: articleKeys.list(params),
       queryFn: () => articlesApi.articlesList(params).then((res) => res.data),
-    }) satisfies QueryOptions,
+    }),
   detail: (id: number) =>
-    ({
+    queryOptions({
       queryKey: articleKeys.detail(id),
       queryFn: () =>
         articlesApi.articlesRetrieve({ id }).then((res) => res.data),
-    }) satisfies QueryOptions,
+    }),
 }
 
 export { articleQueries, articleKeys }
diff --git a/frontends/api/src/hooks/channels/index.ts b/frontends/api/src/hooks/channels/index.ts
@@ -1,9 +1,4 @@
-import {
-  UseQueryOptions,
-  useMutation,
-  useQuery,
-  useQueryClient,
-} from "@tanstack/react-query"
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
 
 import { channelsApi } from "../../clients"
 import type {
@@ -14,7 +9,7 @@ import { channelKeys, channelQueries } from "./queries"
 
 const useChannelsList = (
   params: ChannelsApiChannelsListRequest = {},
-  opts: Pick<UseQueryOptions, "enabled"> = {},
+  opts?: { enabled?: boolean },
 ) => {
   return useQuery({
     ...channelQueries.list(params),
@@ -45,7 +40,7 @@ const useChannelPartialUpdate = () => {
         })
         .then((response) => response.data),
     onSuccess: (_data) => {
-      client.invalidateQueries(channelKeys.root)
+      client.invalidateQueries({ queryKey: channelKeys.root })
     },
   })
 }

diff --git a/frontends/api/src/hooks/channels/queries.ts b/frontends/api/src/hooks/channels/queries.ts
@@ -1,4 +1,4 @@
-import { QueryOptions } from "@tanstack/react-query"
+import { queryOptions } from "@tanstack/react-query"
 import { channelsApi } from "../../clients"
 import type { ChannelsApiChannelsListRequest as FieldsApiListRequest } from "../../generated/v0"
 
@@ -22,34 +22,34 @@ const channelKeys = {
 
 const channelQueries = {
   list: (params: FieldsApiListRequest) =>
-    ({
+    queryOptions({
       queryKey: channelKeys.list(params),
       queryFn: () => channelsApi.channelsList(params).then((res) => res.data),
-    }) satisfies QueryOptions,
+    }),
   detail: (id: number) =>
-    ({
+    queryOptions({
       queryKey: channelKeys.detail(id),
       queryFn: () =>
         channelsApi.channelsRetrieve({ id }).then((res) => res.data),
-    }) satisfies QueryOptions,
+    }),
   detailByType: (channelType: string, name: string) =>
-    ({
+    queryOptions({
       queryKey: channelKeys.detailByType(channelType, name),
       queryFn: () => {
         return channelsApi
           .channelsTypeRetrieve({ channel_type: channelType, name: name })
           .then((res) => res.data)
       },
-    }) satisfies QueryOptions,
+    }),
   countsByType: (channelType: string) =>
-    ({
+    queryOptions({
       queryKey: channelKeys.countsByType(channelType),
       queryFn: () => {
         return channelsApi
           .channelsCountsList({ channel_type: channelType })
           .then((res) => res.data)
       },
-    }) satisfies QueryOptions,
+    }),
 }
 
 export { channelQueries, channelKeys }
diff --git a/frontends/api/src/hooks/learningPaths/index.test.ts b/frontends/api/src/hooks/learningPaths/index.test.ts
@@ -157,10 +157,9 @@ describe("LearningPath CRUD", () => {
     await waitFor(() => expect(result.current.isSuccess).toBe(true))
     expect(makeRequest).toHaveBeenCalledWith("post", url, requestData)
 
-    expect(queryClient.invalidateQueries).toHaveBeenCalledWith([
-      "learningPaths",
-      "list",
-    ])
+    expect(queryClient.invalidateQueries).toHaveBeenCalledWith({
+      queryKey: ["learningPaths", "list"],
+    })
   })
 
   test("useLearningPathDestroy calls correct API", async () => {
@@ -178,14 +177,12 @@ describe("LearningPath CRUD", () => {
     await waitFor(() => expect(result.current.isSuccess).toBe(true))
     expect(makeRequest).toHaveBeenCalledWith("delete", url, undefined)
 
-    expect(queryClient.invalidateQueries).toHaveBeenCalledWith([
-      "learningPaths",
-      "list",
-    ])
-    expect(queryClient.invalidateQueries).toHaveBeenCalledWith([
-      "learningPaths",
-      "membershipList",
-    ])
+    expect(queryClient.invalidateQueries).toHaveBeenCalledWith({
+      queryKey: ["learningPaths", "list"],
+    })
+    expect(queryClient.invalidateQueries).toHaveBeenCalledWith({
+      queryKey: ["learningPaths", "membershipList"],
+    })
   })
 
   test("useLearningPathUpdate calls correct API", async () => {
@@ -203,14 +200,11 @@ describe("LearningPath CRUD", () => {
     await waitFor(() => expect(result.current.isSuccess).toBe(true))
     expect(makeRequest).toHaveBeenCalledWith("patch", url, patch)
 
-    expect(queryClient.invalidateQueries).toHaveBeenCalledWith([
-      "learningPaths",
-      "list",
-    ])
-    expect(queryClient.invalidateQueries).toHaveBeenCalledWith([
-      "learningPaths",
-      "detail",
-      path.id,
-    ])
+    expect(queryClient.invalidateQueries).toHaveBeenCalledWith({
+      queryKey: ["learningPaths", "list"],
+    })
+    expect(queryClient.invalidateQueries).toHaveBeenCalledWith({
+      queryKey: ["learningPaths", "detail", path.id],
+    })
   })
 })
diff --git a/frontends/api/src/hooks/learningPaths/index.ts b/frontends/api/src/hooks/learningPaths/index.ts
@@ -1,5 +1,4 @@
 import {
-  UseQueryOptions,
   useQuery,
   useInfiniteQuery,
   useQueryClient,
@@ -18,7 +17,7 @@ import { useUserHasPermission, Permission } from "api/hooks/user"
 
 const useLearningPathsList = (
   params: ListRequest = {},
-  opts: Pick<UseQueryOptions, "enabled"> = {},
+  opts?: { enabled?: boolean },
 ) => {
   return useQuery({
     ...learningPathQueries.list(params),
@@ -28,15 +27,11 @@ const useLearningPathsList = (
 
 const useInfiniteLearningPathItems = (
   params: ItemsListRequest,
-  options: Pick<UseQueryOptions, "enabled"> = {},
+  opts?: { enabled?: boolean },
 ) => {
   return useInfiniteQuery({
     ...learningPathQueries.infiniteItems(params.learning_resource_id, params),
-    // TODO: in v5, co-locate this with the query options via infiniteQueryOptions
-    getNextPageParam: (lastPage) => {
-      return lastPage.next ?? undefined
-    },
-    ...options,
+    ...opts,
   })
 }
 
@@ -56,7 +51,7 @@ const useLearningPathCreate = () => {
         LearningPathResourceRequest: params,
       }),
     onSettled: () => {
-      queryClient.invalidateQueries(learningPathKeys.listRoot())
+      queryClient.invalidateQueries({ queryKey: learningPathKeys.listRoot() })
     },
   })
 }
@@ -72,8 +67,10 @@ const useLearningPathUpdate = () => {
         PatchedLearningPathResourceRequest: params,
       }),
     onSettled: (data, err, vars) => {
-      queryClient.invalidateQueries(learningPathKeys.listRoot())
-      queryClient.invalidateQueries(learningPathKeys.detail(vars.id))
+      queryClient.invalidateQueries({ queryKey: learningPathKeys.listRoot() })
+      queryClient.invalidateQueries({
+        queryKey: learningPathKeys.detail(vars.id),
+      })
     },
   })
 }
@@ -84,8 +81,10 @@ const useLearningPathDestroy = () => {
     mutationFn: (params: DestroyRequest) =>
       learningPathsApi.learningpathsDestroy(params),
     onSettled: () => {
-      queryClient.invalidateQueries(learningPathKeys.listRoot())
-      queryClient.invalidateQueries(learningPathKeys.membershipList())
+      queryClient.invalidateQueries({ queryKey: learningPathKeys.listRoot() })
+      queryClient.invalidateQueries({
+        queryKey: learningPathKeys.membershipList(),
+      })
     },
   })
 }
@@ -107,9 +106,9 @@ const useLearningPathListItemMove = () => {
       })
     },
     onSettled: (_data, _err, vars) => {
-      queryClient.invalidateQueries(
-        learningPathKeys.infiniteItemsRoot(vars.parent),
-      )
+      queryClient.invalidateQueries({
+        queryKey: learningPathKeys.infiniteItemsRoot(vars.parent),
+      })
     },
   })
 }

diff --git a/frontends/api/src/hooks/learningPaths/queries.ts b/frontends/api/src/hooks/learningPaths/queries.ts
@@ -6,7 +6,7 @@ import type {
   PaginatedLearningPathRelationshipList,
 } from "../../generated/v1"
 import { clearListMemberships } from "../learningResources/queries"
-import { QueryOptions, UseInfiniteQueryOptions } from "@tanstack/react-query"
+import { infiniteQueryOptions, queryOptions } from "@tanstack/react-query"
 
 const learningPathKeys = {
   root: ["learningPaths"],
@@ -24,21 +24,21 @@ const learningPathKeys = {
 
 const learningPathQueries = {
   list: (params: ListRequest) =>
-    ({
+    queryOptions({
       queryKey: learningPathKeys.list(params),
       queryFn: () =>
         learningPathsApi.learningpathsList(params).then((res) => res.data),
-    }) satisfies QueryOptions,
+    }),
   detail: (id: number) =>
-    ({
+    queryOptions({
       queryKey: learningPathKeys.detail(id),
       queryFn: () =>
         learningPathsApi.learningpathsRetrieve({ id }).then((res) => res.data),
-    }) satisfies QueryOptions,
+    }),
   infiniteItems: (id: number, listingParams: ItemsListRequest) =>
-    ({
+    infiniteQueryOptions({
       queryKey: learningPathKeys.infiniteItems(id, listingParams),
-      queryFn: async ({ pageParam }: { pageParam?: string } = {}) => {
+      queryFn: async ({ pageParam }) => {
         // Use generated API for first request, then use next parameter
         const request = pageParam
           ? axiosInstance.request<PaginatedLearningPathRelationshipList>({
@@ -55,13 +55,18 @@ const learningPathQueries = {
           })),
         }
       },
-    }) satisfies UseInfiniteQueryOptions,
+      // Casting is so infiniteQueryOptions can infer the correct type for initialPageParam
+      initialPageParam: null as string | null,
+      getNextPageParam: (lastPage) => {
+        return lastPage.next ?? undefined
+      },
+    }),
   membershipList: () =>
-    ({
+    queryOptions({
       queryKey: learningPathKeys.membershipList(),
       queryFn: () =>
         learningPathsApi.learningpathsMembershipList().then((res) => res.data),
-    }) satisfies QueryOptions,
+    }),
 }
 
 export { learningPathQueries, learningPathKeys }