Update tanstack query to v5

src/apps/experimental/components/library/ItemsView.tsx

@@ -72,7 +72,7 @@ const ItemsView: FC<ItemsViewProps> = ({
     const {
         isLoading,
         data: itemsResult,
-        isPreviousData,
+        isPlaceholderData,
         refetch
     } = useGetItemsViewByType(
         viewType,
@@ -228,7 +228,7 @@ const ItemsView: FC<ItemsViewProps> = ({
                     <Pagination
                         totalRecordCount={totalRecordCount}
                         libraryViewSettings={libraryViewSettings}
-                        isPreviousData={isPreviousData}
+                        isPlaceholderData={isPlaceholderData}
                         setLibraryViewSettings={setLibraryViewSettings}
                     />
                 )}
@@ -312,7 +312,7 @@ const ItemsView: FC<ItemsViewProps> = ({
                     <Pagination
                         totalRecordCount={totalRecordCount}
                         libraryViewSettings={libraryViewSettings}
-                        isPreviousData={isPreviousData}
+                        isPlaceholderData={isPlaceholderData}
                         setLibraryViewSettings={setLibraryViewSettings}
                     />
                 </Box>

src/apps/experimental/components/library/Pagination.tsx

@@ -13,14 +13,14 @@ interface PaginationProps {
     libraryViewSettings: LibraryViewSettings;
     setLibraryViewSettings: React.Dispatch<React.SetStateAction<LibraryViewSettings>>;
     totalRecordCount: number;
-    isPreviousData: boolean
+    isPlaceholderData: boolean
 }
 
 const Pagination: FC<PaginationProps> = ({
     libraryViewSettings,
     setLibraryViewSettings,
     totalRecordCount,
-    isPreviousData
+    isPlaceholderData
 }) => {
     const limit = userSettings.libraryPageSize(undefined);
     const startIndex = libraryViewSettings.StartIndex ?? 0;
@@ -65,7 +65,7 @@ const Pagination: FC<PaginationProps> = ({
                         <IconButton
                             title={globalize.translate('Previous')}
                             className='paper-icon-button-light btnPreviousPage autoSize'
-                            disabled={startIndex == 0 || isPreviousData}
+                            disabled={startIndex == 0 || isPlaceholderData}
                             onClick={onPreviousPageClick}
                         >
                             <ArrowBackIcon />
@@ -74,7 +74,7 @@ const Pagination: FC<PaginationProps> = ({
                         <IconButton
                             title={globalize.translate('Next')}
                             className='paper-icon-button-light btnNextPage autoSize'
-                            disabled={startIndex + limit >= totalRecordCount || isPreviousData }
+                            disabled={startIndex + limit >= totalRecordCount || isPlaceholderData }
                             onClick={onNextPageClick}
                         >
                             <ArrowForwardIcon />

src/hooks/useFetchItems.ts

@@ -1,5 +1,7 @@
-import { AxiosRequestConfig } from 'axios';
-import type { BaseItemDto, ItemsApiGetItemsRequest, PlaylistsApiMoveItemRequest, TimerInfoDto } from '@jellyfin/sdk/lib/generated-client';
+import type { AxiosRequestConfig } from 'axios';
+import type { ItemsApiGetItemsRequest, PlaylistsApiMoveItemRequest } from '@jellyfin/sdk/lib/generated-client';
+import type { BaseItemDto } from '@jellyfin/sdk/lib/generated-client/models/base-item-dto';
+import type { TimerInfoDto } from '@jellyfin/sdk/lib/generated-client/models/timer-info-dto';
 import type { BaseItemKind } from '@jellyfin/sdk/lib/generated-client/models/base-item-kind';
 import { ImageType } from '@jellyfin/sdk/lib/generated-client/models/image-type';
 import { ItemFields } from '@jellyfin/sdk/lib/generated-client/models/item-fields';
@@ -17,16 +19,16 @@ import { getUserLibraryApi } from '@jellyfin/sdk/lib/utils/api/user-library-api'
 import { getPlaylistsApi } from '@jellyfin/sdk/lib/utils/api/playlists-api';
 import { getLiveTvApi } from '@jellyfin/sdk/lib/utils/api/live-tv-api';
 import { getPlaystateApi } from '@jellyfin/sdk/lib/utils/api/playstate-api';
-import { useMutation, useQuery } from '@tanstack/react-query';
+import { keepPreviousData, useMutation, useQuery } from '@tanstack/react-query';
 import datetime from 'scripts/datetime';
 import globalize from 'scripts/globalize';
 
-import { JellyfinApiContext, useApi } from './useApi';
+import { type JellyfinApiContext, useApi } from './useApi';
 import { getAlphaPickerQuery, getFieldsQuery, getFiltersQuery, getLimitQuery } from 'utils/items';
 import { getProgramSections, getSuggestionSections } from 'utils/sections';
-import { LibraryViewSettings, ParentId } from 'types/library';
+import type { LibraryViewSettings, ParentId } from 'types/library';
+import { type Section, type SectionType, SectionApiMethod } from 'types/sections';
 import { LibraryTab } from 'types/libraryTab';
-import { Section, SectionApiMethod, SectionType } from 'types/sections';
 
 const fetchGetItems = async (
     currentApi: JellyfinApiContext,
@@ -59,7 +61,7 @@ export const useGetItems = (parametersOptions: ItemsApiGetItemsRequest) => {
         ],
         queryFn: ({ signal }) =>
             fetchGetItems(currentApi, parametersOptions, { signal }),
-        cacheTime: parametersOptions.sortBy?.includes(ItemSortBy.Random) ? 0 : undefined
+        gcTime: parametersOptions.sortBy?.includes(ItemSortBy.Random) ? 0 : undefined
     });
 };
 
@@ -363,7 +365,7 @@ export const useGetItemsViewByType = (
                 { signal }
             ),
         refetchOnWindowFocus: false,
-        keepPreviousData : true,
+        placeholderData : keepPreviousData,
         enabled:
             [
                 LibraryTab.Movies,

src/hooks/useItem.ts

@@ -1,10 +1,8 @@
 import type { Api } from '@jellyfin/sdk/lib/api';
 import { getUserLibraryApi } from '@jellyfin/sdk/lib/utils/api/user-library-api';
-import { useQuery } from '@tanstack/react-query';
+import { queryOptions, useQuery } from '@tanstack/react-query';
 import type { AxiosRequestConfig } from 'axios';
 
-import { queryOptions } from 'utils/query/queryOptions';
-
 import { useApi } from './useApi';
 
 const fetchItem = async (

src/hooks/useSystemInfo.ts

@@ -1,10 +1,9 @@
-import { useQuery } from '@tanstack/react-query';
+import { queryOptions, useQuery } from '@tanstack/react-query';
 import type { Api } from '@jellyfin/sdk';
 import { getSystemApi } from '@jellyfin/sdk/lib/utils/api/system-api';
 import type { AxiosRequestConfig } from 'axios';
 
 import { useApi } from './useApi';
-import { queryOptions } from 'utils/query/queryOptions';
 
 const fetchSystemInfo = async (
     api?: Api,

src/hooks/useUserViews.ts

@@ -1,11 +1,9 @@
 import type { Api } from '@jellyfin/sdk/lib/api';
 import type { UserViewsApiGetUserViewsRequest } from '@jellyfin/sdk/lib/generated-client/api/user-views-api';
 import { getUserViewsApi } from '@jellyfin/sdk/lib/utils/api/user-views-api';
-import { useQuery } from '@tanstack/react-query';
+import { queryOptions, useQuery } from '@tanstack/react-query';
 import type { AxiosRequestConfig } from 'axios';
 
-import { queryOptions } from 'utils/query/queryOptions';
-
 import { useApi } from './useApi';
 
 const fetchUserViews = async (

src/utils/query/queryOptions.ts

@@ -1,59 +0,0 @@
-// Copyright (c) 2021-2024 Tanner Linsley
-//
-// This software is released under the MIT License.
-// https://opensource.org/licenses/MIT
-
-/**
- * Backport of the `queryOptions` utility function for react-query v4.
- * Upgrading to v5 requires React 18.
- */
-
-import type { QueryKey, UseQueryOptions } from '@tanstack/react-query';
-
-export type UndefinedInitialDataOptions<
-  TQueryFnData = unknown,
-  TError = unknown,
-  TData = TQueryFnData,
-  TQueryKey extends QueryKey = QueryKey,
-> = UseQueryOptions<TQueryFnData, TError, TData, TQueryKey> & {
-  initialData?: undefined
-};
-
-type NonUndefinedGuard<T> = T extends undefined ? never : T;
-
-export type DefinedInitialDataOptions<
-  TQueryFnData = unknown,
-  TError = unknown,
-  TData = TQueryFnData,
-  TQueryKey extends QueryKey = QueryKey,
-> = UseQueryOptions<TQueryFnData, TError, TData, TQueryKey> & {
-  initialData:
-    | NonUndefinedGuard<TQueryFnData>
-    | (() => NonUndefinedGuard<TQueryFnData>)
-};
-
-export function queryOptions<
-  TQueryFnData = unknown,
-  TError = unknown,
-  TData = TQueryFnData,
-  TQueryKey extends QueryKey = QueryKey,
->(
-  options: UndefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey>,
-): UndefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey> & {
-  queryKey: TQueryKey
-};
-
-export function queryOptions<
-  TQueryFnData = unknown,
-  TError = unknown,
-  TData = TQueryFnData,
-  TQueryKey extends QueryKey = QueryKey,
->(
-  options: DefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey>,
-): DefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey> & {
-  queryKey: TQueryKey
-};
-
-export function queryOptions(options: unknown) {
-    return options;
-}