update query wait to use error message if one is available

src/components/LoadingWrapper.tsx

@@ -1,31 +1,38 @@
 import { type UseTRPCQueryResult } from "@trpc/react-query/shared";
 import { LoadingBarChart } from "./LoadingBarChart";
 import { ErrorNotice } from "./notice";
+import { type TRPCClientErrorLike } from "@trpc/client";
+import { type TRPCErrorShape } from "@trpc/server/rpc";
+import { type AnyProcedure, type AnyRouter } from "@trpc/server";
 
 /**
  * Generic query wrapper which handles the states of a query
  * (loading, error, etc.). Will hydrate child with query.data
  *
  */
-export function QueryWaitWrapper<TData, TError>({
+export function QueryWaitWrapper<
+  TData,
+  TRouterOrProcedure extends AnyProcedure | AnyRouter | TRPCErrorShape<number>
+>({
   query,
   Render,
 }: {
-  query: UseTRPCQueryResult<TData, TError>;
+  query: UseTRPCQueryResult<TData, TRPCClientErrorLike<TRouterOrProcedure>>;
   Render: (data: TData) => JSX.Element;
 }) {
   if (query.isLoading) {
     return <LoadingBarChart width={200} height={200} />;
   }
 
-  console.log(query.data);
-
   if (!query.data || query.isError) {
     return (
       <div className="my-10 sm:my-16 md:my-28">
         <ErrorNotice
           icon
-          header="Unable to retrieve page data. Please try again."
+          header={
+            query.error?.message ??
+            "Unable to retrieve page data. Please try again."
+          }
           body="If this issue persists, please contact a site administrator"
         />
       </div>

src/pages/resources/[id]/edit.tsx

@@ -22,9 +22,8 @@ const EditResourcePage = () => {
     { id },
     {
       enabled: router.isReady,
-      onError(err) {
-        console.log(err);
-        throw err;
+      retry(_failureCount, error) {
+        return error.data?.httpStatus !== 404;
       },
     }
   );

src/pages/resources/[id]/index.tsx

@@ -82,7 +82,14 @@ const ResourceViewPage = () => {
   const router = useRouter();
   const id = router.query["id"]?.toString() ?? "";
 
-  const resourceQuery = api.auditoryResource.byId.useQuery({ id });
+  const resourceQuery = api.auditoryResource.byId.useQuery(
+    { id },
+    {
+      retry(_failureCount, error) {
+        return error.data?.httpStatus !== 404;
+      },
+    }
+  );
 
   const ConditionalView = (data: AuditoryResource) => {
     return (