⬆️ Upgrade to trpc 11 (#1703)

2025-07-30 14:38:57 +02:00 · 2025-04-30 15:14:47 +01:00 · 2025-04-30 15:14:47 +01:00 · 4a98a6ac82
commit 4a98a6ac82
parent 5a4ee56df6
15 changed files with 131 additions and 78 deletions
--- a/apps/web/package.json
+++ b/apps/web/package.json
@ -40,11 +40,13 @@
    "@sentry/nextjs": "^9.14.0",
    "@svgr/webpack": "^8.1.0",
    "@t3-oss/env-nextjs": "^0.11.0",
-    "@tanstack/react-query": "^4.36.1",
+    "@tanstack/react-query": "^5.74.11",
+    "@tanstack/react-query-devtools": "^5.74.11",
    "@tanstack/react-table": "^8.9.1",
-    "@trpc/client": "^10.13.0",
-    "@trpc/react-query": "^10.13.0",
-    "@trpc/server": "^10.13.0",
+    "@trpc/client": "^11.1.2",
+    "@trpc/next": "^11.1.2",
+    "@trpc/react-query": "^11.1.2",
+    "@trpc/server": "^11.1.2",
    "@upstash/qstash": "^2.7.17",
    "@upstash/ratelimit": "^1.2.1",
    "@vercel/functions": "^2.0.0",
--- a/apps/web/src/app/[locale]/(auth)/auth/login/components/login-page.tsx
+++ b/apps/web/src/app/[locale]/(auth)/auth/login/components/login-page.tsx
@ -64,7 +64,7 @@ export const LoginPage = ({ magicLink, email }: PageProps) => {
        <div>
          <Button
            size="lg"
-            loading={magicLinkFetch.isLoading}
+            loading={magicLinkFetch.isPending}
            onClick={async () => {
              await magicLinkFetch.mutateAsync();
            }}
--- a/apps/web/src/app/[locale]/(auth)/register/verify/components/otp-form.tsx
+++ b/apps/web/src/app/[locale]/(auth)/register/verify/components/otp-form.tsx
@ -73,7 +73,7 @@ export function OTPForm({ token }: { token: string }) {
  const isLoading =
    form.formState.isSubmitting ||
    form.formState.isSubmitSuccessful ||
-    authenticateRegistration.isLoading;
+    authenticateRegistration.isPending;

  return (
    <Form {...form}>
--- a/apps/web/src/app/[locale]/(space)/settings/profile/delete-account-dialog.tsx
+++ b/apps/web/src/app/[locale]/(space)/settings/profile/delete-account-dialog.tsx
@ -111,7 +111,7 @@ export function DeleteAccountDialog({
              </DialogClose>
              <Button
                type="submit"
-                loading={deleteAccount.isLoading}
+                loading={deleteAccount.isPending}
                variant="destructive"
              >
                <Trans i18nKey="deleteAccount" defaults="Delete Account" />
--- a/apps/web/src/app/[locale]/invite/[urlId]/page.tsx
+++ b/apps/web/src/app/[locale]/invite/[urlId]/page.tsx
@ -1,6 +1,6 @@
 import { prisma } from "@rallly/database";
 import { absoluteUrl } from "@rallly/utils/absolute-url";
-import { Hydrate, dehydrate } from "@tanstack/react-query";
+import { HydrationBoundary, dehydrate } from "@tanstack/react-query";
 import { notFound } from "next/navigation";

 import { InvitePage } from "@/app/[locale]/invite/[urlId]/invite-page";
@ -45,13 +45,13 @@ export default async function Page(props: {
  }

  return (
-    <Hydrate state={dehydrate(trpc.queryClient)}>
+    <HydrationBoundary state={dehydrate(trpc.queryClient)}>
      <Providers>
        <PermissionContext token={searchParams.token}>
          <InvitePage />
        </PermissionContext>
      </Providers>
-    </Hydrate>
+    </HydrationBoundary>
  );
 }

--- a/apps/web/src/app/[locale]/poll/[urlId]/duplicate-dialog.tsx
+++ b/apps/web/src/app/[locale]/poll/[urlId]/duplicate-dialog.tsx
@ -65,7 +65,7 @@ export function DuplicateDialog({
          </DialogClose>
          <Button
            type="submit"
-            loading={duplicate.isLoading}
+            loading={duplicate.isPending}
            variant="primary"
            form={formName}
          >
--- a/apps/web/src/app/[locale]/poll/[urlId]/edit-details/page.tsx
+++ b/apps/web/src/app/[locale]/poll/[urlId]/edit-details/page.tsx
@ -22,7 +22,7 @@ import { Trans } from "@/components/trans";
 const Page = () => {
  const { poll } = usePoll();
  const urlId = poll.adminUrlId;
-  const { mutate: updatePollMutation, isLoading: isUpdating } =
+  const { mutate: updatePollMutation, isPending: isUpdating } =
    useUpdatePollMutation();
  const router = useRouter();

--- a/apps/web/src/app/[locale]/poll/[urlId]/edit-options/page.tsx
+++ b/apps/web/src/app/[locale]/poll/[urlId]/edit-options/page.tsx
@ -35,7 +35,7 @@ const convertOptionToString = (

 const Page = () => {
  const { poll, getParticipantsWhoVotedForOption } = usePoll();
-  const { mutate: updatePollMutation, isLoading: isUpdating } =
+  const { mutate: updatePollMutation, isPending: isUpdating } =
    useUpdatePollMutation();
  const { t } = useTranslation();
  const modalContext = useModalContext();
--- a/apps/web/src/app/[locale]/poll/[urlId]/layout.tsx
+++ b/apps/web/src/app/[locale]/poll/[urlId]/layout.tsx
@ -1,5 +1,5 @@
 import { prisma } from "@rallly/database";
-import { Hydrate, dehydrate } from "@tanstack/react-query";
+import { HydrationBoundary, dehydrate } from "@tanstack/react-query";
 import { notFound } from "next/navigation";

 import { PollLayout } from "@/components/layouts/poll-layout";
@ -27,9 +27,9 @@ export default async function Layout(
  }

  return (
-    <Hydrate state={dehydrate(trpc.queryClient)}>
+    <HydrationBoundary state={dehydrate(trpc.queryClient)}>
      <PollLayout>{children}</PollLayout>
-    </Hydrate>
+    </HydrationBoundary>
  );
 }

--- a/apps/web/src/components/create-poll.tsx
+++ b/apps/web/src/components/create-poll.tsx
@ -138,7 +138,7 @@ export const CreatePoll: React.FunctionComponent = () => {
          <PollSettingsForm />
          <hr />
          <Button
-            loading={createPoll.isLoading || createPoll.isSuccess}
+            loading={createPoll.isPending || createPoll.isSuccess}
            size="lg"
            type="submit"
            className="w-full"
--- a/apps/web/src/components/participant-dropdown.tsx
+++ b/apps/web/src/components/participant-dropdown.tsx
@ -157,7 +157,7 @@ const DeleteParticipantModal = ({
            <Trans i18nKey="cancel" />
          </Button>
          <Button
-            loading={deleteParticipant.isLoading}
+            loading={deleteParticipant.isPending}
            variant="destructive"
            onClick={async () => {
              deleteParticipant.mutate({
--- a/apps/web/src/components/poll/manage-poll/delete-poll-dialog.tsx
+++ b/apps/web/src/components/poll/manage-poll/delete-poll-dialog.tsx
@ -52,7 +52,7 @@ export const DeletePollDialog: React.FunctionComponent<{
            onClick={() => {
              deletePoll.mutate({ urlId });
            }}
-            loading={deletePoll.isLoading}
+            loading={deletePoll.isPending}
          >
            <Trans i18nKey="delete" />
          </Button>
--- a/apps/web/src/components/poll/manage-poll/finalize-poll-dialog.tsx
+++ b/apps/web/src/components/poll/manage-poll/finalize-poll-dialog.tsx
@ -250,7 +250,7 @@ export function FinalizePollDialog(props: DialogProps) {
            </Button>
          </DialogClose>
          <Button
-            loading={scheduleEvent.isLoading}
+            loading={scheduleEvent.isPending}
            type="submit"
            form="finalize-form"
            variant="primary"
--- a/apps/web/src/trpc/client/provider.tsx
+++ b/apps/web/src/trpc/client/provider.tsx
@ -25,7 +25,6 @@ export function TRPCProvider(props: { children: React.ReactNode }) {
        defaultOptions: {
          queries: {
            retry: false,
-            cacheTime: Number.POSITIVE_INFINITY,
            staleTime: 1000 * 60,
          },
        },
@ -73,9 +72,9 @@ export function TRPCProvider(props: { children: React.ReactNode }) {
      links: [
        httpBatchLink({
          url: "/api/trpc",
+          transformer: superjson,
        }),
      ],
-      transformer: superjson,
    }),
  );
  return (