and migrate to react-query v5

HolodexNet · Oct 19, 2023 · 6236ce1 · 6236ce1
1 parent b515be3
commit 6236ce1
Show file tree

Hide file tree

Showing 7 changed files with 93 additions and 91 deletions.
diff --git a/packages/react/src/services/@types.d.ts b/packages/react/src/services/@types.d.ts
@@ -0,0 +1,4 @@
+interface CommonQueryConfig {
+  refetchInterval?: number;
+  enabled?: boolean;
+}
diff --git a/packages/react/src/services/channel.service.ts b/packages/react/src/services/channel.service.ts
@@ -1,11 +1,9 @@
 import { useClient } from "@/hooks/useClient";
 import {
-  UseInfiniteQueryOptions,
   UseQueryOptions,
   useInfiniteQuery,
   useQuery,
 } from "@tanstack/react-query";
-import { AxiosError } from "axios";
 
 interface UseChannelsParams {
   limit?: number;
@@ -20,31 +18,42 @@ interface UseChannelsParams {
 
 export function useChannels(
   params: UseChannelsParams,
-  config?: UseInfiniteQueryOptions<Channel[], AxiosError>,
+  // config: infer
 ) {
   const client = useClient();
 
-  return useInfiniteQuery<Channel[], AxiosError>({
+  return useInfiniteQuery({
     queryKey: ["channels", params],
     queryFn: async ({ pageParam = 0 }) =>
       await client<Channel[]>("/api/v2/channels", {
         params: { ...params, offset: pageParam },
       }),
-    getNextPageParam: (lastPage, allPages) =>
-      lastPage.length ? allPages.flat().length : undefined,
-    ...config,
+    initialPageParam: 0,
+    getNextPageParam: (lastPage, _allPages, lastPageParam) => {
+      if (lastPage?.length === 0) {
+        return undefined;
+      }
+      return lastPageParam + 1;
+    },
+    getPreviousPageParam: (_firstPage, _allPages, firstPageParam) => {
+      if (!firstPageParam) {
+        return undefined;
+      }
+      return firstPageParam - 1;
+    },
+    // ...config,
   });
 }
 
 export function useChannel(
   channelId: string,
-  config?: UseQueryOptions<Channel, AxiosError>,
+  config?: UseQueryOptions<Channel, Error>,
 ) {
   const client = useClient();
 
-  return useQuery<Channel, AxiosError>(
-    ["channel", channelId],
-    async () => await client<Channel>(`/api/v2/channels/${channelId}`),
-    config,
-  );
+  return useQuery({
+    queryKey: ["channel", channelId],
+    queryFn: async () => await client<Channel>(`/api/v2/channels/${channelId}`),
+    ...config,
+  });
 }
diff --git a/packages/react/src/services/live.service.ts b/packages/react/src/services/live.service.ts
@@ -1,6 +1,5 @@
 import { useClient } from "@/hooks/useClient";
 import { UseQueryOptions, useQuery } from "@tanstack/react-query";
-import { AxiosError } from "axios";
 
 interface UseLiveParams {
   channel_id?: string;
@@ -27,13 +26,13 @@ function listToString(list: string[] | undefined) {
 
 export function useLive(
   params?: UseLiveParams,
-  config?: UseQueryOptions<Live[], AxiosError>,
+  config?: UseQueryOptions<Live[]>,
 ) {
   const client = useClient();
 
-  return useQuery<Live[], AxiosError>(
-    ["live", params],
-    async () =>
+  return useQuery<Live[]>({
+    queryKey: ["live", params],
+    queryFn: async () =>
       await client<Live[]>("/api/v2/live", {
         params: {
           ...params,
@@ -42,6 +41,6 @@ export function useLive(
           include: listToString(params?.include),
         },
       }),
-    config,
-  );
+    ...config,
+  });
 }
diff --git a/packages/react/src/services/orgs.service.ts b/packages/react/src/services/orgs.service.ts
@@ -2,18 +2,16 @@ import { defaultOrgs } from "@/store/org";
 import { UseQueryOptions, useQuery } from "@tanstack/react-query";
 
 export function useOrgs(config?: UseQueryOptions<Org[], Error>) {
-  return useQuery<Org[], Error>(
-    ["orgs"],
-    async () =>
+  return useQuery<Org[], Error>({
+    queryKey: ["orgs"],
+    queryFn: async () =>
       fetch(`${window.location.origin}/statics/orgs.json`).then((r) => {
         if (!r.ok) {
           throw new Error(`HTTP error! Status: ${r.status}`);
         }
         return r.json();
       }),
-    {
-      placeholderData: defaultOrgs,
-      ...config,
-    },
-  );
+    placeholderData: defaultOrgs,
+    ...config,
+  });
 }
diff --git a/packages/react/src/services/playlist.service.ts b/packages/react/src/services/playlist.service.ts
@@ -5,61 +5,52 @@ import {
   useMutation,
   useQuery,
 } from "@tanstack/react-query";
-import { AxiosError } from "axios";
 
-export function usePlaylists(
-  options?: UseQueryOptions<PlaylistStub[], AxiosError>,
-) {
+export function usePlaylists(options?: UseQueryOptions<PlaylistStub[]>) {
   const client = useClient();
 
-  return useQuery<PlaylistStub[], AxiosError>(
-    ["playlists"],
-    async () => await client<PlaylistStub[]>("/api/v2/users/playlists"),
-    options,
-  );
+  return useQuery({
+    queryKey: ["playlists"],
+    queryFn: async () =>
+      await client<PlaylistStub[]>("/api/v2/users/playlists"),
+    ...options,
+  });
 }
 
-export function usePlaylist(
-  id: number,
-  options?: UseQueryOptions<Playlist, AxiosError>,
-) {
+export function usePlaylist(id: number, options?: UseQueryOptions<Playlist>) {
   const client = useClient();
 
-  return useQuery<Playlist, AxiosError>(
-    ["playlist", id],
-    async () => await client<Playlist>(`/api/v2/playlist/${id}`),
-    options,
-  );
+  return useQuery({
+    queryKey: ["playlist", id],
+    queryFn: async () => await client<Playlist>(`/api/v2/playlist/${id}`),
+    ...options,
+  });
 }
 
 export function usePlaylistInclude(
   videoId: string,
-  options?: UseQueryOptions<PlaylistInclude[], AxiosError>,
+  options?: UseQueryOptions<PlaylistInclude[]>,
 ) {
   const client = useClient();
 
-  return useQuery<PlaylistInclude[], AxiosError>(
-    ["playlist", "include", videoId],
-    async () =>
+  return useQuery({
+    queryKey: ["playlist", "include", videoId],
+    queryFn: async () =>
       await client<PlaylistInclude[]>(`/api/v2/video-playlist/${videoId}`),
-    options,
-  );
+    ...options,
+  });
 }
 
 export function usePlaylistVideoMutation(
-  options?: UseMutationOptions<
-    boolean,
-    AxiosError,
-    { id: number; videoId: string }
-  >,
+  options?: UseMutationOptions<boolean, Error, { id: number; videoId: string }>,
 ) {
   const client = useClient();
 
-  return useMutation<boolean, AxiosError, { id: number; videoId: string }>(
-    async ({ id, videoId }) =>
+  return useMutation({
+    mutationFn: async ({ id, videoId }) =>
       await client<boolean>(`/api/v2/video-playlist/${id}/${videoId}`, {
         method: "PUT",
       }),
-    options,
-  );
+    ...options,
+  });
 }
diff --git a/packages/react/src/services/user.service.ts b/packages/react/src/services/user.service.ts
@@ -2,25 +2,30 @@ import { useClient } from "@/hooks/useClient";
 import {
   UseMutationOptions,
   UseQueryOptions,
+  queryOptions,
   useMutation,
   useQuery,
   useQueryClient,
 } from "@tanstack/react-query";
 import { AxiosError } from "axios";
 
-export function useFavorites(
-  config?: UseQueryOptions<FavoriteChannel[], AxiosError>,
-) {
+// if you're curious: https://tanstack.com/query/latest/docs/react/typescript#typing-query-options
+const favoriteQuery = queryOptions<FavoriteChannel[]>({
+  queryKey: ["user", "favorites"],
+});
+
+export function useFavorites(config?: UseQueryOptions<FavoriteChannel[]>) {
   const client = useClient();
 
-  return useQuery<FavoriteChannel[], AxiosError>(
-    ["user", "favorites"],
-    async () =>
+  return useQuery({
+    queryKey: favoriteQuery.queryKey,
+    queryFn: async () =>
       client.loggedIn
         ? await client<FavoriteChannel[]>("/api/v2/users/favorites")
         : [],
-    config,
-  );
+
+    ...config,
+  });
 }
 
 interface FavoriteMutationPayload {
@@ -31,25 +36,24 @@ interface FavoriteMutationPayload {
 export function useFavoriteMutation(
   config?: UseMutationOptions<
     FavoriteChannel[],
-    AxiosError,
+    Error,
     FavoriteMutationPayload[]
   >,
 ) {
   const queryClient = useQueryClient();
   const client = useClient();
 
-  return useMutation<FavoriteChannel[], AxiosError, FavoriteMutationPayload[]>(
-    async (payload) =>
+  return useMutation({
+    mutationFn: async (payload) =>
       await client.patch<FavoriteChannel[], FavoriteMutationPayload[]>(
         "/api/v2/users/favorites",
         payload,
       ),
-    {
-      ...config,
-      onSuccess: (res, ...args) => {
-        queryClient.setQueryData(["user", "favorites"], res);
-        if (config?.onSuccess) config?.onSuccess(res, ...args);
-      },
+
+    ...config,
+    onSuccess: (res, ...args) => {
+      queryClient.setQueryData(favoriteQuery.queryKey, res);
+      if (config?.onSuccess) config?.onSuccess(res, ...args);
     },
-  );
+  });
 }
diff --git a/packages/react/src/services/video.service.ts b/packages/react/src/services/video.service.ts
@@ -5,7 +5,6 @@ import {
   useInfiniteQuery,
   useQuery,
 } from "@tanstack/react-query";
-import { AxiosError } from "axios";
 
 interface UseVideosParams {
   channel_id?: string;
@@ -29,12 +28,13 @@ interface UseVideosParams {
 
 export function useVideos(
   params?: Omit<UseVideosParams, "offset">,
-  config?: UseInfiniteQueryOptions<VideoBase[], AxiosError>,
+  config?: CommonQueryConfig,
 ) {
   const client = useClient();
 
-  return useInfiniteQuery<VideoBase[], AxiosError>({
+  return useInfiniteQuery({
     queryKey: ["videos", params],
+    initialPageParam: 0,
     queryFn: async ({ pageParam = 0 }) =>
       (
         await client<{ items: VideoBase[]; total: string }>("/videos", {
@@ -47,15 +47,12 @@ export function useVideos(
   });
 }
 
-export function useVideo(
-  videoId: string,
-  config?: UseQueryOptions<Video, AxiosError>,
-) {
+export function useVideo(videoId: string, config?: UseQueryOptions<Video>) {
   const client = useClient();
 
-  return useQuery<Video, AxiosError>(
-    ["video", videoId],
-    async () => await client<Video>(`/videos/${videoId}`),
-    config,
-  );
+  return useQuery({
+    queryKey: ["video", videoId],
+    queryFn: async () => await client<Video>(`/videos/${videoId}`),
+    ...config,
+  });
 }