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/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: () => {