From a0159a3d4b0edc503d120ceb4fdbac9e1fad15cb Mon Sep 17 00:00:00 2001
From: Jake Jarvis <jake@jarv.is>
Date: Sun, 4 Oct 2026 15:59:08 -0400
Subject: [PATCH] fix(web): make Retry and Try again actually refetch

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
---
 apps/web/src/components/route-error.tsx |  8 ++++----
 apps/web/src/lib/orpc/client.ts         |  2 +-
 apps/web/src/routes/__root.tsx          | 12 ++++--------
 3 files changed, 9 insertions(+), 13 deletions(-)

diff --git a/apps/web/src/components/route-error.tsx b/apps/web/src/components/route-error.tsx
index b8bf1a7..1c12f96 100644
--- a/apps/web/src/components/route-error.tsx
+++ b/apps/web/src/components/route-error.tsx
@@ -1,10 +1,10 @@
 import { Trans, useLingui } from "@lingui/react/macro";
 import { IconAlertTriangle } from "@tabler/icons-react";
-import type { ErrorComponentProps } from "@tanstack/react-router";
-import { Link } from "@tanstack/react-router";
+import { Link, useRouter } from "@tanstack/react-router";
 
-export function RouteError({ reset }: ErrorComponentProps) {
+export function RouteError() {
   const { t } = useLingui();
+  const router = useRouter();
 
   return (
     <div className="flex flex-col items-center gap-6 py-24 text-center">
@@ -26,7 +26,7 @@ export function RouteError({ reset }: ErrorComponentProps) {
         <button
           type="button"
           aria-label={t`Try again`}
-          onClick={reset}
+          onClick={() => void router.invalidate()}
           className="group bg-primary text-primary-foreground hover:shadow-primary/20 relative inline-flex h-10 items-center justify-center gap-2 overflow-hidden rounded-lg px-5 text-sm font-medium transition-shadow hover:shadow-lg"
         >
           <span className="relative z-10">
diff --git a/apps/web/src/lib/orpc/client.ts b/apps/web/src/lib/orpc/client.ts
index cbbaf73..2b73037 100644
--- a/apps/web/src/lib/orpc/client.ts
+++ b/apps/web/src/lib/orpc/client.ts
@@ -22,7 +22,7 @@ export const queryClient = new QueryClient({
       toast.error(i18n._(msg`Something went wrong…`), {
         action: {
           label: i18n._(msg`Retry`),
-          onClick: () => query.invalidate(),
+          onClick: () => void queryClient.refetchQueries({ queryKey: query.queryKey, exact: true }),
         },
       });
     },
diff --git a/apps/web/src/routes/__root.tsx b/apps/web/src/routes/__root.tsx
index f03a5dc..2109ace 100644
--- a/apps/web/src/routes/__root.tsx
+++ b/apps/web/src/routes/__root.tsx
@@ -4,12 +4,7 @@ import { IconAlertTriangle } from "@tabler/icons-react";
 import { TanStackDevtools } from "@tanstack/react-devtools";
 import type { QueryClient } from "@tanstack/react-query";
 import { ReactQueryDevtoolsPanel } from "@tanstack/react-query-devtools";
-import {
-  createRootRouteWithContext,
-  type ErrorComponentProps,
-  HeadContent,
-  Outlet,
-} from "@tanstack/react-router";
+import { createRootRouteWithContext, HeadContent, Outlet, useRouter } from "@tanstack/react-router";
 import { TanStackRouterDevtoolsPanel } from "@tanstack/react-router-devtools";
 import { Provider as StoreProvider } from "jotai";
 import { MotionConfig } from "motion/react";
@@ -148,8 +143,9 @@ function GlobalNotFound() {
   );
 }
 
-function GlobalError({ reset }: ErrorComponentProps) {
+function GlobalError() {
   const { t } = useLingui();
+  const router = useRouter();
 
   return (
     <div className="flex flex-col items-center gap-6 py-24 text-center">
@@ -171,7 +167,7 @@ function GlobalError({ reset }: ErrorComponentProps) {
         <button
           type="button"
           aria-label={t`Try again`}
-          onClick={reset}
+          onClick={() => void router.invalidate()}
           className="group bg-primary text-primary-foreground hover:shadow-primary/20 relative inline-flex h-10 items-center justify-center gap-2 overflow-hidden rounded-lg px-5 text-sm font-medium transition-shadow hover:shadow-lg"
         >
           <span className="relative z-10">