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/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}