feat(web): migrate Tanstack Query to v5 (#1277)

* feat: migrate to v5

* refactor: Revise error handling in QueryClient for compatibility with React Query v5

The `useErrorBoundary` option has been renamed to `throwOnError` and suspense have been removed: more on suspense more on suspense.
https://tanstack.com/query/v5/docs/react/guides/migrating-to-v5#new-hooks-for-suspense

* refactor: Callbacks on useQuery (and QueryObserver) have been removed

onSuccess, onError and onSettled have been removed from Queries. They haven't been touched for Mutations. Please see this https://github.com/TanStack/query/discussions/5279 for motivations behind this change and what to do instead.

* refactor: change to isPending, isLoading have been renamed for mutations.

Also, they are using object now:
- useQuery(key, fn, options)
+ useQuery({ queryKey, queryFn, ...options })

* refactor: change to placeHolderData.

Removed keepPreviousData in favor of placeholderData identity function
https://tanstack.com/query/v5/docs/react/guides/migrating-to-v5#removed-keeppreviousdata-in-favor-of-placeholderdata-identity-function

* fix: useSuspenseQuery instead of useQuery.

* fix(web): more useSuspenseQuery substitutions

* whoops - nobody saw that okay?

* fix pnpm lockfile

* fix pnpm lockfile again

---------

Co-authored-by: martylukyy <35452459+martylukyy@users.noreply.github.com>
Co-authored-by: soup <soup@r4tio.dev>

web/package.json

@@ -36,8 +36,17 @@
     "@hookform/error-message": "^2.0.1",
     "@popperjs/core": "^2.11.8",
     "@tailwindcss/forms": "^0.5.7",
-    "@tanstack/react-query": "^4.36.1",
-    "@tanstack/react-query-devtools": "^4.36.1",
+    "@tanstack/react-query": "^5.8.4",
+    "@tanstack/react-query-devtools": "^5.8.4",
+    "@types/node": "^20.9.1",
+    "@types/react": "^18.2.37",
+    "@types/react-dom": "^18.2.15",
+    "@types/react-portal": "^4.0.6",
+    "@types/react-router-dom": "^5.3.3",
+    "@types/react-table": "^7.7.18",
+    "@typescript-eslint/eslint-plugin": "^6.11.0",
+    "@typescript-eslint/parser": "^6.11.0",
+    "@vitejs/plugin-react-swc": "^3.5.0",
     "autoprefixer": "^10.4.16",
     "buffer": "^6.0.3",
     "date-fns": "^2.30.0",

web/src/App.tsx

@@ -21,8 +21,7 @@ const queryClient = new QueryClient({
       // See https://tanstack.com/query/v4/docs/guides/query-retries#retry-delay
       // delay = Math.min(1000 * 2 ** attemptIndex, 30000)
       retry: true,
-      useErrorBoundary: true,
-      suspense: true
+      throwOnError: true,
     },
     mutations: {
       onError: (error) => {

web/src/components/data-table/Cells.tsx

@@ -103,7 +103,7 @@ const RetryActionButton = ({ status }: RetryActionButtonProps) => {
   return (
     <button className="flex items-center px-1.5 py-1 ml-2 rounded transition border-gray-500 bg-gray-250 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600" onClick={replayAction}>
       <span className="mr-1.5">Retry</span>
-      {mutation.isLoading
+      {mutation.isPending
         ? <RingResizeSpinner className="text-blue-500 w-4 h-4 iconHeight" aria-hidden="true" />
         : <ArrowPathIcon className="h-4 w-4" />
       }

web/src/components/header/Header.tsx

@@ -18,23 +18,29 @@ import { MobileNav } from "./MobileNav";
 import { ExternalLink } from "@components/ExternalLink";
 
 export const Header = () => {
-  const { data: config } = useQuery({
+  const { isError:isConfigError, error: configError, data: config } = useQuery({
     queryKey: ["config"],
     queryFn: () => APIClient.config.get(),
     retry: false,
-    refetchOnWindowFocus: false,
-    onError: err => console.log(err)
+    refetchOnWindowFocus: false
   });
 
-  const { data } = useQuery({
+  if (isConfigError) {
+    console.log(configError);
+  }
+
+  const { isError, error, data } = useQuery({
     queryKey: ["updates"],
     queryFn: () => APIClient.updates.getLatestRelease(),
     retry: false,
     refetchOnWindowFocus: false,
-    enabled: config?.check_for_updates === true,
-    onError: err => console.log(err)
+    enabled: config?.check_for_updates === true
   });
 
+  if (isError) {
+    console.log(error);
+  }
+
   const logoutMutation = useMutation({
     mutationFn: APIClient.auth.logout,
     onSuccess: () => {

web/src/forms/settings/DownloadClientForms.tsx

@@ -917,7 +917,7 @@ export function DownloadClientUpdateForm({ client, isOpen, toggle }: updateFormP
       >
         <DeleteModal
           isOpen={deleteModalIsOpen}
-          isLoading={deleteMutation.isLoading}
+          isLoading={deleteMutation.isPending}
           toggle={toggleDeleteModal}
           buttonRef={cancelModalButtonRef}
           deleteAction={deleteAction}

web/src/screens/Logs.tsx

@@ -4,7 +4,7 @@
  */
 
 import { Fragment, useEffect, useRef, useState } from "react";
-import { useQuery } from "@tanstack/react-query";
+import { useSuspenseQuery } from "@tanstack/react-query";
 import { Menu, Transition } from "@headlessui/react";
 import { DebounceInput } from "react-debounce-input";
 import {
@@ -174,14 +174,17 @@ export const Logs = () => {
 };
 
 export const LogFiles = () => {
-  const { data } = useQuery({
+  const { isError, error, data } = useSuspenseQuery({
     queryKey: ["log-files"],
     queryFn: () => APIClient.logs.files(),
     retry: false,
-    refetchOnWindowFocus: false,
-    onError: err => console.log(err)
+    refetchOnWindowFocus: false
   });
 
+  if (isError) {
+    console.log(error);
+  }
+
   return (
     <div>
       <div className="mt-2">

web/src/screens/dashboard/ActivityTable.tsx

@@ -4,7 +4,7 @@
  */
 
 import React, { useState } from "react";
-import { useQuery } from "@tanstack/react-query";
+import { useSuspenseQuery } from "@tanstack/react-query";
 import {
   useTable,
   useFilters,
@@ -18,7 +18,7 @@ import { EmptyListState } from "@components/emptystates";
 import * as Icons from "@components/Icons";
 import { EyeIcon, EyeSlashIcon } from "@heroicons/react/24/solid";
 import * as DataTable from "@components/data-table";
-import { RandomLinuxIsos } from "@utils/index";
+import { RandomLinuxIsos } from "@utils";
 
 // This is a custom filter UI for selecting
 // a unique option from a list
@@ -185,12 +185,15 @@ export const ActivityTable = () => {
     }
   ], []);
 
-  const { isLoading, data } = useQuery({
+  const { isLoading, data } = useSuspenseQuery({
     queryKey: ["dash_recent_releases"],
     queryFn: APIClient.release.findRecent,
     refetchOnWindowFocus: false
   });
 
+  const [modifiedData, setModifiedData] = useState<Release[]>([]);
+  const [showLinuxIsos, setShowLinuxIsos] = useState(false);
+
   if (isLoading) {
     return (
       <div className="flex flex-col mt-12">
@@ -204,10 +207,6 @@ export const ActivityTable = () => {
     );
   }
 
-
-  const [modifiedData, setModifiedData] = useState<Release[]>([]);
-  const [showLinuxIsos, setShowLinuxIsos] = useState(false);
-
   const toggleReleaseNames = () => {
     setShowLinuxIsos(!showLinuxIsos);
     if (!showLinuxIsos && data && data.data) {

web/src/screens/dashboard/Stats.tsx

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: GPL-2.0-or-later
  */
 
-import { useQuery } from "@tanstack/react-query";
+import { useSuspenseQuery } from "@tanstack/react-query";
 import { APIClient } from "@api/APIClient";
 import { classNames } from "@utils";
 import { useNavigate } from "react-router-dom";
@@ -49,7 +49,7 @@ export const Stats = () => {
     }
   };
 
-  const { isLoading, data } = useQuery({
+  const { isLoading, data } = useSuspenseQuery({
     queryKey: ["dash_release_stats"],
     queryFn: APIClient.release.stats,
     refetchOnWindowFocus: false

web/src/screens/filters/Details.tsx

@@ -4,7 +4,7 @@
  */
 
 import { Suspense, useEffect, useRef } from "react";
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useMutation, useQueryClient, useSuspenseQuery } from "@tanstack/react-query";
 import { Form, Formik, useFormikContext } from "formik";
 import type { FormikErrors, FormikValues } from "formik";
 import { z } from "zod";
@@ -291,15 +291,16 @@ export const FilterDetails = () => {
 
   const id = parseInt(filterId!);
 
-  const { isLoading, data: filter } = useQuery({
+  const { isLoading, isError, data: filter } = useSuspenseQuery({
     queryKey: filterKeys.detail(id),
     queryFn: ({ queryKey }) => APIClient.filters.getByID(queryKey[2]),
-    refetchOnWindowFocus: false,
-    onError: () => {
-      navigate("/filters");
-    }
+    refetchOnWindowFocus: false
   });
 
+  if (isError) {
+    navigate("/filters");
+  }
+
   const updateMutation = useMutation({
     mutationFn: (filter: Filter) => APIClient.filters.update(filter),
     onSuccess: (newFilter, variables) => {

web/src/screens/filters/List.tsx

@@ -7,7 +7,7 @@ import { Dispatch, FC, Fragment, MouseEventHandler, useReducer, useRef, useState
 import { Link } from "react-router-dom";
 import { toast } from "react-hot-toast";
 import { Listbox, Menu, Transition } from "@headlessui/react";
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useMutation, useQuery, useQueryClient, keepPreviousData, useSuspenseQuery } from "@tanstack/react-query";
 import { FormikValues } from "formik";
 import { useCallback } from "react";
 import {
@@ -192,7 +192,7 @@ function FilterList({ toggleCreateFilter }: any) {
     filterListState
   );
 
-  const { data, error } = useQuery({
+  const { data, error } = useSuspenseQuery({
     queryKey: filterKeys.list(indexerFilter, sortOrder),
     queryFn: ({ queryKey }) => APIClient.filters.find(queryKey[2].indexers, queryKey[2].sortOrder),
     refetchOnWindowFocus: false
@@ -425,7 +425,7 @@ const FilterItemDropdown = ({ filter, onToggle }: FilterItemDropdownProps) => {
     <Menu as="div">
       <DeleteModal
         isOpen={deleteModalIsOpen}
-        isLoading={deleteMutation.isLoading}
+        isLoading={deleteMutation.isPending}
         toggle={toggleDeleteModal}
         buttonRef={cancelModalButtonRef}
         deleteAction={() => {
@@ -774,7 +774,7 @@ const IndexerSelectFilter = ({ dispatch }: any) => {
   const { data, isSuccess } = useQuery({
     queryKey: ["filters", "indexers_options"],
     queryFn: () => APIClient.indexers.getOptions(),
-    keepPreviousData: true,
+    placeholderData: keepPreviousData,
     staleTime: Infinity
   });
 

web/src/screens/filters/sections/Actions.tsx

@@ -32,11 +32,11 @@ interface FilterActionsProps {
 }
 
 export function Actions({ filter, values }: FilterActionsProps) {
-  const { data } = useQuery(
-    ["filters", "download_clients"],
-    () => APIClient.download_clients.getAll(),
-    { refetchOnWindowFocus: false }
-  );
+  const { data } = useQuery({
+    queryKey: ["filters", "download_clients"],
+    queryFn: () => APIClient.download_clients.getAll(),
+    refetchOnWindowFocus: false
+  });
 
   const newAction: Action = {
     id: 0,
@@ -258,7 +258,7 @@ function FilterActionsItem({ action, clients, idx, initialEdit, remove }: Filter
         <div className="flex items-center mt-1 px-3 sm:px-5 rounded-md border border-gray-150 dark:border-gray-750">
           <DeleteModal
             isOpen={deleteModalIsOpen}
-            isLoading={removeMutation.isLoading}
+            isLoading={removeMutation.isPending}
             buttonRef={cancelButtonRef}
             toggle={toggleDeleteModal}
             deleteAction={() => removeAction(action.id)}

web/src/screens/releases/Filters.tsx

@@ -4,7 +4,7 @@
  */
 
 import * as React from "react";
-import { useQuery } from "@tanstack/react-query";
+import { useQuery, keepPreviousData } from "@tanstack/react-query";
 import { Listbox, Transition } from "@headlessui/react";
 import { CheckIcon, ChevronDownIcon } from "@heroicons/react/24/solid";
 
@@ -70,7 +70,7 @@ export const IndexerSelectColumnFilter = ({
   const { data, isSuccess } = useQuery({
     queryKey: ["indexer_options"],
     queryFn: () => APIClient.release.indexerOptions(),
-    keepPreviousData: true,
+    placeholderData: keepPreviousData,
     staleTime: Infinity
   });
 

web/src/screens/releases/ReleaseTable.tsx

@@ -5,7 +5,7 @@
 
 import React, { useState } from "react";
 import { useLocation } from "react-router-dom";
-import { useQuery } from "@tanstack/react-query";
+import { useSuspenseQuery } from "@tanstack/react-query";
 import { CellProps, Column, useFilters, usePagination, useSortBy, useTable } from "react-table";
 import {
   ChevronDoubleLeftIcon,
@@ -15,7 +15,7 @@ import {
 } from "@heroicons/react/24/solid";
 import { EyeIcon, EyeSlashIcon } from "@heroicons/react/24/solid";
 
-import { RandomLinuxIsos } from "@utils/index";
+import { RandomLinuxIsos } from "@utils";
 import { APIClient } from "@api/APIClient";
 import { EmptyListState } from "@components/emptystates";
 
@@ -141,10 +141,9 @@ export const ReleaseTable = () => {
   const [{ queryPageIndex, queryPageSize, totalCount, queryFilters }, dispatch] =
         React.useReducer(TableReducer, initialState);
 
-  const { isLoading, error, data, isSuccess } = useQuery({
+  const { isLoading, error, data, isSuccess } = useSuspenseQuery({
     queryKey: releaseKeys.list(queryPageIndex, queryPageSize, queryFilters),
     queryFn: () => APIClient.release.findQuery(queryPageIndex * queryPageSize, queryPageSize, queryFilters),
-    keepPreviousData: true,
     staleTime: 5000
   });
 

web/src/screens/settings/Api.tsx

@@ -4,7 +4,7 @@
  */
 
 import { useRef } from "react";
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useMutation, useQueryClient, useSuspenseQuery } from "@tanstack/react-query";
 import { toast } from "react-hot-toast";
 import { TrashIcon } from "@heroicons/react/24/outline";
 
@@ -30,14 +30,17 @@ export const apiKeys = {
 function APISettings() {
   const [addFormIsOpen, toggleAddForm] = useToggle(false);
 
-  const { data } = useQuery({
+  const { isError, error, data } = useSuspenseQuery({
     queryKey: apiKeys.lists(),
     queryFn: APIClient.apikeys.getAll,
     retry: false,
-    refetchOnWindowFocus: false,
-    onError: (err) => console.log(err)
+    refetchOnWindowFocus: false
   });
 
+  if (isError) {
+    console.log(error);
+  }
+
   return (
     <Section
       title="API keys"
@@ -110,7 +113,7 @@ function APIListItem({ apikey }: ApiKeyItemProps) {
     <li className="text-gray-500 dark:text-gray-400">
       <DeleteModal
         isOpen={deleteModalIsOpen}
-        isLoading={deleteMutation.isLoading}
+        isLoading={deleteMutation.isPending}
         toggle={toggleDeleteModal}
         buttonRef={cancelModalButtonRef}
         deleteAction={() => {

web/src/screens/settings/Application.tsx

@@ -17,23 +17,28 @@ import { Section, RowItem } from "./_components";
 function ApplicationSettings() {
   const [settings, setSettings] = SettingsContext.use();
 
-  const { data } = useQuery({
+  const { isError:isConfigError, error: configError, data } = useQuery({
     queryKey: ["config"],
     queryFn: APIClient.config.get,
     retry: false,
-    refetchOnWindowFocus: false,
-    onError: err => console.log(err)
+    refetchOnWindowFocus: false
   });
+  if (isConfigError) {
+    console.log(configError);
+  }
 
-  const { data: updateData } = useQuery({
+  const { isError, error, data: updateData } = useQuery({
     queryKey: ["updates"],
     queryFn: APIClient.updates.getLatestRelease,
     retry: false,
     refetchOnWindowFocus: false,
-    enabled: data?.check_for_updates === true,
-    onError: err => console.log(err)
+    enabled: data?.check_for_updates === true
   });
 
+  if (isError) {
+    console.log(error);
+  }
+
   const queryClient = useQueryClient();
 
   const checkUpdateMutation = useMutation({

web/src/screens/settings/DownloadClient.tsx

@@ -4,7 +4,7 @@
  */
 
 import { useState, useMemo } from "react";
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useMutation, useQueryClient, useSuspenseQuery } from "@tanstack/react-query";
 import { PlusIcon } from "@heroicons/react/24/solid";
 import toast from "react-hot-toast";
 
@@ -140,7 +140,7 @@ function ListItem({ client }: DLSettingsItemProps) {
 function DownloadClientSettings() {
   const [addClientIsOpen, toggleAddClient] = useToggle(false);
 
-  const { error, data } = useQuery({
+  const { error, data } = useSuspenseQuery({
     queryKey: clientKeys.lists(),
     queryFn: APIClient.download_clients.getAll,
     refetchOnWindowFocus: false

web/src/screens/settings/Feed.tsx

@@ -4,7 +4,7 @@
  */
 
 import { Fragment, useRef, useState, useMemo } from "react";
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useMutation, useQueryClient, useSuspenseQuery } from "@tanstack/react-query";
 import { Menu, Transition } from "@headlessui/react";
 import { toast } from "react-hot-toast";
 import {
@@ -97,7 +97,7 @@ function useSort(items: ListItemProps["feed"][], config?: SortConfig) {
 }
 
 function FeedSettings() {
-  const { data } = useQuery({
+  const { data } = useSuspenseQuery({
     queryKey: feedKeys.lists(),
     queryFn: APIClient.feeds.find,
     refetchOnWindowFocus: false
@@ -279,7 +279,7 @@ const FeedItemDropdown = ({
     <Menu as="div">
       <DeleteModal
         isOpen={deleteModalIsOpen}
-        isLoading={deleteMutation.isLoading}
+        isLoading={deleteMutation.isPending}
         toggle={toggleDeleteModal}
         buttonRef={cancelModalButtonRef}
         deleteAction={() => {
@@ -291,7 +291,7 @@ const FeedItemDropdown = ({
       />
       <DeleteModal
         isOpen={deleteCacheModalIsOpen}
-        isLoading={deleteMutation.isLoading}
+        isLoading={deleteMutation.isPending}
         toggle={toggleDeleteCacheModal}
         buttonRef={cancelCacheModalButtonRef}
         deleteAction={() => {
@@ -302,7 +302,7 @@ const FeedItemDropdown = ({
       />
       <ForceRunModal
         isOpen={forceRunModalIsOpen}
-        isLoading={forceRunMutation.isLoading}
+        isLoading={forceRunMutation.isPending}
         toggle={toggleForceRunModal}
         buttonRef={cancelModalButtonRef}
         forceRunAction={() => {

web/src/screens/settings/Indexer.tsx

@@ -5,7 +5,7 @@
 
 import { useState, useMemo } from "react";
 import toast from "react-hot-toast";
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useMutation, useQueryClient, useSuspenseQuery } from "@tanstack/react-query";
 import { PlusIcon } from "@heroicons/react/24/solid";
 
 import { useToggle } from "@hooks/hooks";
@@ -169,7 +169,7 @@ const ListItem = ({ indexer }: ListItemProps) => {
 function IndexerSettings() {
   const [addIndexerIsOpen, toggleAddIndexer] = useToggle(false);
 
-  const { error, data } = useQuery({
+  const { error, data } = useSuspenseQuery({
     queryKey: indexerKeys.lists(),
     queryFn: APIClient.indexers.getAll,
     refetchOnWindowFocus: false

web/src/screens/settings/Irc.tsx

@@ -4,7 +4,7 @@
  */
 
 import { Fragment, useRef, useState, useMemo, useEffect, MouseEvent } from "react";
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useMutation, useQueryClient, useSuspenseQuery } from "@tanstack/react-query";
 import { LockClosedIcon, LockOpenIcon, PlusIcon } from "@heroicons/react/24/solid";
 import { Menu, Transition } from "@headlessui/react";
 import { toast } from "react-hot-toast";
@@ -98,7 +98,7 @@ const IrcSettings = () => {
   const [expandNetworks, toggleExpand] = useToggle(false);
   const [addNetworkIsOpen, toggleAddNetwork] = useToggle(false);
 
-  const { data } = useQuery({
+  const { data } = useSuspenseQuery({
     queryKey: ircKeys.lists(),
     queryFn: APIClient.irc.getNetworks,
     refetchOnWindowFocus: false,
@@ -463,7 +463,7 @@ const ListItemDropdown = ({
     >
       <DeleteModal
         isOpen={deleteModalIsOpen}
-        isLoading={deleteMutation.isLoading}
+        isLoading={deleteMutation.isPending}
         toggle={toggleDeleteModal}
         buttonRef={cancelModalButtonRef}
         deleteAction={() => {

web/src/screens/settings/Logs.tsx

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: GPL-2.0-or-later
  */
 
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useMutation, useQueryClient, useSuspenseQuery } from "@tanstack/react-query";
 import { toast } from "react-hot-toast";
 import { Link } from "react-router-dom";
 import Select from "react-select";
@@ -56,14 +56,17 @@ const SelectWrapper = ({ id, value, onChange, options }: SelectWrapperProps) =>
 );
 
 function LogSettings() {
-  const { isLoading, data } = useQuery({
+  const { isError, error, isLoading, data } = useSuspenseQuery({
     queryKey: ["config"],
     queryFn: APIClient.config.get,
     retry: false,
-    refetchOnWindowFocus: false,
-    onError: err => console.log(err)
+    refetchOnWindowFocus: false
   });
 
+  if (isError) {
+    console.log(error);
+  }
+
   const queryClient = useQueryClient();
 
   const setLogLevelUpdateMutation = useMutation({

web/src/screens/settings/Notifications.tsx

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: GPL-2.0-or-later
  */
 
-import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { useMutation, useQueryClient, useSuspenseQuery } from "@tanstack/react-query";
 
 import { APIClient } from "@api/APIClient";
 import { EmptySimple } from "@components/emptystates";
@@ -27,7 +27,7 @@ export const notificationKeys = {
 function NotificationSettings() {
   const [addNotificationsIsOpen, toggleAddNotifications] = useToggle(false);
 
-  const { data } = useQuery({
+  const { data } = useSuspenseQuery({
     queryKey: notificationKeys.lists(),
     queryFn: APIClient.notifications.getAll,
     refetchOnWindowFocus: false

web/src/screens/settings/Releases.tsx

@@ -91,7 +91,7 @@ function DeleteReleases() {
     <div className="flex flex-col sm:flex-row gap-2 justify-between items-center rounded-md">
       <DeleteModal
         isOpen={deleteModalIsOpen}
-        isLoading={deleteOlderMutation.isLoading}
+        isLoading={deleteOlderMutation.isPending}
         toggle={toggleDeleteModal}
         buttonRef={cancelModalButtonRef}
         deleteAction={deleteOlderReleases}