Feat: Migrate to tRPC v11

package.json

@@ -59,11 +59,12 @@
     "@react-email/render": "0.0.16",
     "@stoplight/elements": "8.3.3",
     "@t3-oss/env-nextjs": "0.7.3",
-    "@tanstack/react-query": "4.36.1",
-    "@tanstack/react-query-devtools": "4.36.1",
-    "@trpc/client": "10.45.2",
-    "@trpc/react-query": "10.45.2",
-    "@trpc/server": "10.45.2",
+    "@tanstack/react-query": "5.62.2",
+    "@tanstack/react-query-devtools": "5.62.2",
+    "@trpc/client": "11.0.0-rc.648",
+    "@trpc/next": "11.0.0-rc.648",
+    "@trpc/react-query": "11.0.0-rc.648",
+    "@trpc/server": "11.0.0-rc.648",
     "arctic": "1.9.2",
     "bcrypt": "5.1.1",
     "chakra-react-select": "4.9.1",
@@ -97,10 +98,11 @@
     "sharp": "0.33.4",
     "sonner": "1.5.0",
     "superjson": "2.2.1",
-    "trpc-openapi": "1.2.0",
-    "ts-pattern": "5.2.0",
+    "trpc-to-openapi": "2.1.0",
+    "ts-pattern": "5.6.0",
     "zod": "3.23.8",
     "zod-i18n-map": "2.27.0",
+    "zod-openapi": "4.2.1",
     "zustand": "4.5.4"
   },
   "devDependencies": {
@@ -110,12 +112,12 @@
     "@chakra-ui/cli": "2.4.1",
     "@next/eslint-plugin-next": "14.2.4",
     "@playwright/test": "1.45.1",
-    "@storybook/addon-actions": "8.1.11",
-    "@storybook/addon-essentials": "8.1.11",
-    "@storybook/addon-links": "8.1.11",
-    "@storybook/nextjs": "8.1.11",
-    "@storybook/react": "8.1.11",
-    "@storybook/theming": "8.1.11",
+    "@storybook/addon-actions": "8.4.7",
+    "@storybook/addon-essentials": "8.4.7",
+    "@storybook/addon-links": "8.4.7",
+    "@storybook/nextjs": "8.4.7",
+    "@storybook/react": "8.4.7",
+    "@storybook/theming": "8.4.7",
     "@svgr/cli": "8.1.0",
     "@testing-library/dom": "10.3.1",
     "@testing-library/react": "16.0.0",
@@ -146,7 +148,7 @@
     "npm-run-all": "4.1.5",
     "prettier": "3.3.2",
     "prisma": "5.16.2",
-    "storybook": "8.1.11",
+    "storybook": "8.4.7",
     "storybook-dark-mode": "4.0.2",
     "tsx": "4.16.2",
     "typescript": "5.5.3",

src/app/api/rest/[...path]/route.ts

@@ -1,5 +1,6 @@
+import { createOpenApiFetchHandler } from 'trpc-to-openapi';
+
 import { createTRPCContext } from '@/server/config/trpc';
-import { createOpenApiFetchHandler } from '@/server/config/trpc-open-api';
 import { appRouter } from '@/server/router';
 
 const handler = (req: Request) => {

src/features/account/AccountDeleteVerificationCodeModal.tsx

@@ -84,7 +84,7 @@ export const AccountDeleteVerificationCodeModale = () => {
           <Form {...form} onSubmit={onSubmit}>
             <VerificationCodeForm
               email={searchParams[SEARCH_PARAM_VERIFY_EMAIL] ?? ''}
-              isLoading={updateEmailValidate.isLoading}
+              isLoading={updateEmailValidate.isPending}
               confirmText={t('account:deleteAccount.validate.button')}
               confirmVariant="@dangerPrimary"
               autoSubmit={false}

src/features/account/AccountEmailForm.tsx

@@ -64,7 +64,7 @@ export const AccountEmailForm = () => {
 
   return (
     <>
-      {account.isLoading && <LoaderFull />}
+      {account.isPending && <LoaderFull />}
       {account.isError && <ErrorPage />}
       {account.isSuccess && (
         <Stack spacing={4}>
@@ -83,7 +83,7 @@ export const AccountEmailForm = () => {
                   type="submit"
                   variant="@primary"
                   isDisabled={account.data.email === email}
-                  isLoading={updateEmail.isLoading}
+                  isLoading={updateEmail.isPending}
                 >
                   {t('account:email.actions.update')}
                 </Button>

src/features/account/AccountProfileForm.tsx

@@ -62,7 +62,7 @@ export const AccountProfileForm = () => {
 
   return (
     <>
-      {account.isLoading && <LoaderFull />}
+      {account.isPending && <LoaderFull />}
       {account.isError && <ErrorPage />}
       {account.isSuccess && (
         <Stack spacing={4}>
@@ -95,7 +95,7 @@ export const AccountProfileForm = () => {
                 <Button
                   type="submit"
                   variant="@primary"
-                  isLoading={updateAccount.isLoading}
+                  isLoading={updateAccount.isPending}
                 >
                   {t('account:profile.actions.update')}
                 </Button>

src/features/account/EmailVerificationCodeModal.tsx

@@ -77,7 +77,7 @@ export const EmailVerificationCodeModale = () => {
             <VerificationCodeForm
               email={searchParams.verifyEmail ?? ''}
               isLoading={
-                updateEmailValidate.isLoading || updateEmailValidate.isSuccess
+                updateEmailValidate.isPending || updateEmailValidate.isSuccess
               }
             />
           </Form>

src/features/app/AppNavBarDesktop.tsx

@@ -70,7 +70,7 @@ export const AppNavBarDesktop = (props: BoxProps) => {
                   }
                 : {})}
             >
-              {account.isLoading && <Spinner size="xs" />}
+              {account.isPending && <Spinner size="xs" />}
             </Avatar>
           </HStack>
         </Container>

src/features/auth/LoginForm.tsx

@@ -72,7 +72,7 @@ export const LoginForm = ({
           </FormField>
           <Flex>
             <Button
-              isLoading={login.isLoading || login.isSuccess}
+              isLoading={login.isPending || login.isSuccess}
               type="submit"
               variant={buttonVariant}
               size="lg"

src/features/auth/OAuthLogin.tsx

@@ -44,7 +44,7 @@ export const OAuthLoginButton = ({
   return (
     <Button
       onClick={() => loginWith.mutate({ provider: provider })}
-      isLoading={loginWith.isLoading || loginWith.isSuccess}
+      isLoading={loginWith.isPending || loginWith.isSuccess}
       leftIcon={<Icon icon={OAUTH_PROVIDERS[provider].icon} />}
       {...rest}
     >

src/features/auth/PageLoginValidate.tsx

@@ -90,7 +90,7 @@ export default function PageLoginValidate() {
       <Form {...form} onSubmit={onSubmit}>
         <VerificationCodeForm
           email={email ?? ''}
-          isLoading={validate.isLoading || validate.isSuccess}
+          isLoading={validate.isPending || validate.isSuccess}
         />
       </Form>
     </Stack>

src/features/auth/PageRegister.tsx

@@ -135,7 +135,7 @@ export default function PageRegister() {
 
           <Flex>
             <Button
-              isLoading={register.isLoading}
+              isLoading={register.isPending}
               type="submit"
               variant="@primary"
               flex={1}

src/features/auth/PageRegisterValidate.tsx

@@ -78,7 +78,7 @@ export default function PageRegisterValidate() {
       <Form {...form} onSubmit={onSubmit}>
         <VerificationCodeForm
           email={email ?? ''}
-          isLoading={validate.isLoading || validate.isSuccess}
+          isLoading={validate.isPending || validate.isSuccess}
         />
       </Form>
     </Stack>

src/features/repositories/AdminRepositoryActions.tsx

@@ -49,7 +49,7 @@ export const AdminRepositoryActions = ({
 
   return (
     <Menu placement="left-start" {...rest}>
-      <MenuButton as={ActionsButton} isLoading={repositoryRemove.isLoading} />
+      <MenuButton as={ActionsButton} isLoading={repositoryRemove.isPending} />
       <Portal>
         <MenuList>
           <MenuItem

src/features/repositories/PageAdminRepositories.tsx

@@ -80,7 +80,7 @@ export default function PageAdminRepositories() {
           </HStack>
 
           <DataList>
-            {repositories.isLoading && <DataListLoadingState />}
+            {repositories.isPending && <DataListLoadingState />}
             {repositories.isError && (
               <DataListErrorState
                 title={t('repositories:feedbacks.loadingRepositoryError.title')}

src/features/repositories/PageAdminRepository.tsx

@@ -92,19 +92,19 @@ export default function PageAdminRepository() {
                 aria-label={t('common:actions.delete')}
                 icon={<LuTrash2 />}
                 isDisabled={!repository.data}
-                isLoading={repositoryRemove.isLoading}
+                isLoading={repositoryRemove.isPending}
               />
             </ConfirmModal>
           </>
         }
       >
-        {repository.isLoading && <SkeletonText maxW="6rem" noOfLines={2} />}
+        {repository.isPending && <SkeletonText maxW="6rem" noOfLines={2} />}
         {repository.isSuccess && (
           <Heading size="sm">{repository.data?.name}</Heading>
         )}
       </AdminLayoutPageTopBar>
       <AdminLayoutPageContent>
-        {repository.isLoading && <LoaderFull />}
+        {repository.isPending && <LoaderFull />}
         {repository.isError && <ErrorPage />}
         {repository.isSuccess && (
           <Card>

src/features/repositories/PageAdminRepositoryCreate.tsx

@@ -77,7 +77,7 @@ export default function PageAdminRepositoryCreate() {
                 type="submit"
                 variant="@primary"
                 isLoading={
-                  createRepository.isLoading || createRepository.isSuccess
+                  createRepository.isPending || createRepository.isSuccess
                 }
               >
                 {t('repositories:create.action.save')}

src/features/repositories/PageAdminRepositoryUpdate.tsx

@@ -95,7 +95,7 @@ export default function PageAdminRepositoryUpdate() {
                 type="submit"
                 variant="@primary"
                 isLoading={
-                  updateRepository.isLoading || updateRepository.isSuccess
+                  updateRepository.isPending || updateRepository.isSuccess
                 }
               >
                 {t('repositories:update.action.save')}
@@ -104,7 +104,7 @@ export default function PageAdminRepositoryUpdate() {
           }
         >
           <Stack flex={1} spacing={0}>
-            {repository.isLoading && <SkeletonText maxW="6rem" noOfLines={2} />}
+            {repository.isPending && <SkeletonText maxW="6rem" noOfLines={2} />}
             {repository.isSuccess && (
               <Heading size="sm">{repository.data?.name}</Heading>
             )}

src/features/repositories/PageRepositories.tsx

@@ -34,7 +34,7 @@ export default function PageRepositories() {
       <Stack flex={1} spacing={4}>
         <Heading size="md">{t('repositories:list.title')}</Heading>
 
-        {repositories.isLoading && <LoaderFull />}
+        {repositories.isPending && <LoaderFull />}
         {repositories.isError && <ErrorPage />}
 
         {repositories.isSuccess &&

src/features/repositories/schemas.ts

@@ -15,16 +15,15 @@ export const zRepository = () =>
       .nonEmpty(z.string(), {
         required_error: t('repositories:data.link.required'),
       })
+      .transform((v) => (v.startsWith('http') ? v : `https://${v}`))
       .pipe(
         z
           .string()
-          .min(4, t('repositories:data.link.tooSmall', { min: 4 }))
+          .min(8, t('repositories:data.link.tooSmall', { min: 4 }))
           .includes('.', { message: t('repositories:data.link.missingDot') })
-      )
-      .transform((v) => (v.startsWith('http') ? v : `https://${v}`)),
+      ),
     description: zu.string.nonEmptyNullable(z.string()),
   });
-
 export type FormFieldsRepository = z.infer<
   ReturnType<typeof zFormFieldsRepository>
 >;

src/features/users/AdminUserActions.tsx

@@ -91,7 +91,7 @@ export const AdminUserActions = ({ user, ...rest }: AdminUserActionProps) => {
   });
 
   const isLoading =
-    activateUser.isLoading || deactivateUser.isLoading || removeUser.isLoading;
+    activateUser.isPending || deactivateUser.isPending || removeUser.isPending;
 
   return (
     <Menu placement="left-start" {...rest}>

src/features/users/PageAdminUserCreate.tsx

@@ -73,7 +73,7 @@ export default function PageAdminUserCreate() {
               <Button
                 type="submit"
                 variant="@primary"
-                isLoading={createUser.isLoading || createUser.isSuccess}
+                isLoading={createUser.isPending || createUser.isSuccess}
               >
                 {t('users:create.action.save')}
               </Button>

src/features/users/PageAdminUserUpdate.tsx

@@ -92,14 +92,14 @@ export default function PageAdminUserUpdate() {
               <Button
                 type="submit"
                 variant="@primary"
-                isLoading={userUpdate.isLoading || userUpdate.isSuccess}
+                isLoading={userUpdate.isPending || userUpdate.isSuccess}
               >
                 {t('users:update.action.save')}
               </Button>
             </>
           }
         >
-          {user.isLoading || user.isError ? (
+          {user.isPending || user.isError ? (
             <SkeletonText maxW="6rem" noOfLines={2} />
           ) : (
             <Flex

src/features/users/PageAdminUsers.tsx

@@ -91,7 +91,7 @@ export default function PageAdminUsers() {
           </HStack>
 
           <DataList>
-            {users.isLoading && <DataListLoadingState />}
+            {users.isPending && <DataListLoadingState />}
             {users.isError && (
               <DataListErrorState
                 title={t('users:feedbacks.loadingUserError.title')}

src/lib/trpc/TrpcProvider.tsx

@@ -58,9 +58,9 @@ export function TrpcProvider(props: { children: React.ReactNode }) {
         }),
         httpBatchLink({
           url: `${getBaseUrl()}/api/trpc`,
+          transformer: superjson,
         }),
       ],
-      transformer: superjson,
     })
   );
   return (

src/lib/zod/zod-utils.ts

@@ -26,6 +26,7 @@ export const zu = {
       return z
         .literal('')
         .transform(() => null)
+        .pipe(z.null())
         .or(zu.string.nonEmpty(s, options).nullable());
     },
     nonEmptyNullish(
@@ -37,6 +38,7 @@ export const zu = {
       return z
         .literal('')
         .transform(() => null)
+        .pipe(z.null())
         .or(zu.string.nonEmpty(s, options).nullish());
     },
     email(
@@ -80,12 +82,14 @@ export const zu = {
       return a
         .length(0)
         .transform(() => null)
+        .pipe(z.null())
         .or(zu.array.nonEmpty(a, message).nullable());
     },
     nonEmptyNullish<T extends Schema>(a: ZodArray<T>, message?: string) {
       return a
         .length(0)
         .transform(() => null)
+        .pipe(z.null())
         .or(zu.array.nonEmpty(a, message).nullish());
     },
   },

src/server/config/openapi.ts

@@ -1,4 +1,4 @@
-import { generateOpenApiDocument } from 'trpc-openapi';
+import { generateOpenApiDocument } from 'trpc-to-openapi';
 
 import { env } from '@/env.mjs';
 import { appRouter } from '@/server/router';