perf: ⚡️ upgraded version of tRPC and @tanstack/react-query

apps/web/next.config.mjs

@@ -25,14 +25,17 @@ const nextConfig = {
   },
   // Configure `pageExtensions` to include MDX files
   pageExtensions: ["js", "jsx", "mdx", "ts", "tsx"],
-  transpilePackages: ["@convoform/ui", "@convoform/db"],
+  transpilePackages: ["@convoform/ui", "@convoform/db", "@convoform/api"],
   webpack: (config, { isServer }) => {
     if (isServer) {
       config.plugins = [...config.plugins, new PrismaPlugin()];
     }
 
     return config;
   },
+  /** We already do linting and typechecking as separate tasks in CI */
+  eslint: { ignoreDuringBuilds: true },
+  typescript: { ignoreBuildErrors: true },
 };
 
 const withMDX = createMDX({

apps/web/package.json

@@ -24,12 +24,11 @@
     "@mdx-js/react": "^3.0.0",
     "@next/mdx": "^14.1.0",
     "@sentry/nextjs": "^7.91.0",
-    "@tanstack/react-query": "^4.36.1",
     "@tremor/react": "^3.13.3",
-    "@trpc/client": "^10.43.6",
-    "@trpc/next": "^10.43.6",
-    "@trpc/react-query": "^10.43.6",
-    "@trpc/server": "^10.43.6",
+    "@tanstack/react-query": "^5.18.1",
+    "@trpc/client": "11.0.0-next-beta.264",
+    "@trpc/react-query": "11.0.0-next-beta.264",
+    "@trpc/server": "11.0.0-next-beta.264",
     "@types/mdx": "^2.0.10",
     "ai": "^2.2.26",
     "clsx": "^2.0.0",

apps/web/src/app/(privatePage)/(formEditorPage)/forms/[formId]/conversations/[conversationId]/page.tsx

@@ -10,7 +10,7 @@ type Props = {
 export default async function ConversationDetailPage(props: Props) {
   const { conversationId } = props.params;
 
-  const conversation = await api.conversation.getOne.query({
+  const conversation = await api.conversation.getOne({
     id: conversationId,
   });
 

apps/web/src/app/(privatePage)/(formEditorPage)/forms/[formId]/page.tsx

@@ -19,7 +19,7 @@ import {
 import FormPreview from "@/components/formEditorPage/formPreview";
 import NavLinks from "@/components/formEditorPage/navLinks";
 import { cn } from "@/lib/utils";
-import { api } from "@/trpc/client";
+import { api } from "@/trpc/react";
 
 type Props = {
   params: { formId: string };

apps/web/src/app/(privatePage)/(mainPage)/workspaces/[workspaceId]/page.tsx

@@ -22,7 +22,7 @@ export default async function WorkspacePage({
   params: { workspaceId },
 }: Readonly<Props>) {
   const orgId = getOrganizationId();
-  const workspace = await api.workspace.getOne.query({ id: workspaceId });
+  const workspace = await api.workspace.getOne({ id: workspaceId });
 
   if (!workspace) {
     notFound();

apps/web/src/app/(publicPage)/(formSubmissionPage)/view/[formId]/page.tsx

@@ -14,7 +14,7 @@ export const metadata: Metadata = {
 
 export default async function FormViewPage({ params }: FormViewerPageProps) {
   const { formId } = params;
-  const formData = await api.form.getOne.query({ id: formId });
+  const formData = await api.form.getOne({ id: formId });
   if (!formData || !formData.isPublished) {
     notFound();
   }

apps/web/src/app/api/form/[formId]/conversation/route.ts

@@ -24,7 +24,7 @@ export async function POST(
     // const { isPreview } = reqPayload;
     const isPreview = false;
 
-    const form = await api.form.getOneWithFields.query({
+    const form = await api.form.getOneWithFields({
       id: params.formId,
     });
 
@@ -39,7 +39,7 @@ export async function POST(
     if (form.id !== "demo") {
       // get all conversations count for current organization
       const totalSubmissionsCount =
-        await api.conversation.getResponseCountByOrganization.query({
+        await api.conversation.getResponseCountByOrganization({
           organizationId: form.organizationId,
         });
 

apps/web/src/app/api/trpc/[trpc]/route.ts

@@ -1,27 +1,34 @@
 import { type NextRequest } from "next/server";
-import { getAuth } from "@clerk/nextjs/server";
-import { appRouter } from "@convoform/api/src/router/root";
-import { createTRPCContext } from "@convoform/api/src/trpc";
+import { appRouter, createTRPCContext } from "@convoform/api";
 import { fetchRequestHandler } from "@trpc/server/adapters/fetch";
 
+// export const runtime = "edge";
+
 /**
- * This wraps the `createTRPCContext` helper and provides the required context for the tRPC API when
- * handling a HTTP request (e.g. when you make requests from Client Components).
+ * Configure basic CORS headers
+ * You should extend this to match your needs
  */
+function setCorsHeaders(res: Response) {
+  res.headers.set("Access-Control-Allow-Origin", "*");
+  res.headers.set("Access-Control-Request-Method", "*");
+  res.headers.set("Access-Control-Allow-Methods", "OPTIONS, GET, POST");
+  res.headers.set("Access-Control-Allow-Headers", "*");
+}
 
-const createContext = async (req: NextRequest) => {
-  return createTRPCContext({
-    headers: req.headers,
-    auth: getAuth(req),
+export function OPTIONS() {
+  const response = new Response(null, {
+    status: 204,
   });
-};
+  setCorsHeaders(response);
+  return response;
+}
 
-const handler = (req: NextRequest) =>
-  fetchRequestHandler({
+const handler = async (req: NextRequest) => {
+  const response = await fetchRequestHandler({
     endpoint: "/api/trpc",
-    req,
     router: appRouter,
-    createContext: () => createContext(req),
+    req,
+    createContext: () => createTRPCContext(),
     onError:
       process.env.NODE_ENV === "development"
         ? ({ path, error }: any) => {
@@ -32,4 +39,8 @@ const handler = (req: NextRequest) =>
         : undefined,
   });
 
+  setCorsHeaders(response);
+  return response;
+};
+
 export { handler as GET, handler as POST };

apps/web/src/app/layout.tsx

@@ -7,7 +7,7 @@ import { Toaster } from "@convoform/ui/components/ui/toaster";
 
 import GoogleAnalytics from "@/components/googleAnalytics";
 import { cn } from "@/lib/utils";
-import { TRPCReactProvider } from "@/trpc/provider";
+import { TRPCReactProvider } from "@/trpc/react";
 import { roboto } from "./fonts";
 
 export const metadata: Metadata = {

apps/web/src/components/formEditorPage/conversations/conversationsSidebar.tsx

@@ -11,7 +11,7 @@ import {
 } from "@convoform/ui/components/ui/sheet";
 import { Menu } from "lucide-react";
 
-import { api } from "@/trpc/client";
+import { api } from "@/trpc/react";
 import NavLinks from "../navLinks";
 import { ConversationsCard } from "./conversationsListCard";
 

apps/web/src/components/formEditorPage/formEditor/formEditorCard.tsx

@@ -53,7 +53,7 @@ import { montserrat } from "@/app/fonts";
 import { apiClient } from "@/lib/apiClient";
 import { cn } from "@/lib/utils";
 import { formUpdateSchema } from "@/lib/validations/form";
-import { api } from "@/trpc/client";
+import { api } from "@/trpc/react";
 
 const formSchema = formUpdateSchema;
 export type FormSubmitDataSchema = z.infer<typeof formSchema>;
@@ -104,10 +104,12 @@ export function FormEditorCard({ form }: Readonly<Props>) {
         title: "Changes saved successfully",
         duration: 1500,
       });
-      queryClient.invalidateQueries([["form"]]);
+      queryClient.invalidateQueries({
+        queryKey: [["form"]],
+      });
     },
   });
-  const isFormBusy = updateForm.isLoading;
+  const isFormBusy = updateForm.isPending;
 
   const onSubmit = (formData: FormSubmitDataSchema) =>
     updateForm.mutateAsync({

apps/web/src/components/formEditorPage/formEditorPageHeader.tsx

@@ -8,7 +8,7 @@ import { ChevronLeft, ChevronRight, Home } from "lucide-react";
 import { montserrat } from "@/app/fonts";
 import { LinkN } from "@/components/common/linkN";
 import { cn } from "@/lib/utils";
-import { api } from "@/trpc/client";
+import { api } from "@/trpc/react";
 import FormNameInput from "./formNameInput";
 
 type Props = {

apps/web/src/components/formEditorPage/formNameInput.tsx

@@ -6,7 +6,7 @@ import { toast } from "@convoform/ui/components/ui/use-toast";
 import { useQueryClient } from "@tanstack/react-query";
 
 import { cn, debounce } from "@/lib/utils";
-import { api } from "@/trpc/client";
+import { api } from "@/trpc/react";
 
 type Props = {
   form: Form;
@@ -23,7 +23,9 @@ export default function FormNameInput({ form, className }: Props) {
         title: "Form name updated.",
         duration: 1500,
       });
-      queryClient.invalidateQueries([["form", "getOneWithWorkspace"]]);
+      queryClient.invalidateQueries({
+        queryKey: [["form", "getOneWithWorkspace"]],
+      });
     },
     onError: () => {
       toast({
@@ -32,7 +34,7 @@ export default function FormNameInput({ form, className }: Props) {
       });
     },
   });
-  const isUpdating = updateForm.isLoading;
+  const isUpdating = updateForm.isPending;
 
   const updateWorkspace = async (name: string) =>
     updateForm.mutateAsync({

apps/web/src/components/formEditorPage/formPreview.tsx

@@ -9,7 +9,7 @@ import {
 } from "@convoform/ui/components/ui/tooltip";
 
 import { getFrontendBaseUrl } from "@/lib/url";
-import { api } from "@/trpc/client";
+import { api } from "@/trpc/react";
 import BrowserWindow from "../common/browserWindow";
 import Spinner from "../common/spinner";
 import { FormViewer } from "../formSubmissionPage/formViewer";

apps/web/src/components/mainPage/dashboard/formDataCard.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { timeAgo } from "@/lib/utils";
-import { api } from "@/trpc/client";
+import { api } from "@/trpc/react";
 import { DataCard } from "./dataCard";
 import { DataCardSkeleton } from "./dataCardLoading";
 

apps/web/src/components/mainPage/dashboard/reponseDataCard.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { timeAgo } from "@/lib/utils";
-import { api } from "@/trpc/client";
+import { api } from "@/trpc/react";
 import { DataCard } from "./dataCard";
 import { DataCardSkeleton } from "./dataCardLoading";
 

apps/web/src/components/mainPage/navigationCardContent.tsx

@@ -9,7 +9,7 @@ import { useQueryClient } from "@tanstack/react-query";
 import { Loader2, Plus } from "lucide-react";
 
 import { NavigationConfig } from "@/lib/types/navigation";
-import { api } from "@/trpc/client";
+import { api } from "@/trpc/react";
 import BrandName from "../common/brandName";
 import { NavigationLinks } from "./mainNavigation/mainNavigation";
 
@@ -43,7 +43,7 @@ export function NavigationCardContent({ orgId }: Readonly<Props>) {
         variant: "destructive",
       }),
   });
-  const isCreatingWorkspace = createWorkspace.isLoading;
+  const isCreatingWorkspace = createWorkspace.isPending;
 
   const handleCreateWorkspace = useCallback(async () => {
     await createWorkspace.mutateAsync({

apps/web/src/components/mainPage/workspace/createFormButton.tsx

@@ -9,7 +9,7 @@ import { Loader2, Plus } from "lucide-react";
 import { montserrat } from "@/app/fonts";
 import { cn } from "@/lib/utils";
 import { formCreateSchema } from "@/lib/validations/form";
-import { api } from "@/trpc/client";
+import { api } from "@/trpc/react";
 
 type Props = {
   workspace: Workspace;
@@ -44,7 +44,7 @@ export default function CreateFormButton({ workspace }: Readonly<Props>) {
       });
     },
   });
-  const { isLoading } = createForm;
+  const { isPending } = createForm;
 
   const handleCreateForm = () =>
     createForm.mutateAsync({
@@ -56,12 +56,12 @@ export default function CreateFormButton({ workspace }: Readonly<Props>) {
   return (
     <Button
       variant="secondary"
-      disabled={isLoading}
+      disabled={isPending}
       onClick={handleCreateForm}
       className={cn(montserrat.className, "font-semibold")}
     >
-      {isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
-      {!isLoading && <Plus className="mr-2 h-4 w-4" />}
+      {isPending && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+      {!isPending && <Plus className="mr-2 h-4 w-4" />}
       New Form
     </Button>
   );

apps/web/src/components/mainPage/workspace/formList.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { api } from "@/trpc/client";
+import { api } from "@/trpc/react";
 import { FormListItem } from "./formListItem";
 import FormListLoading from "./formListLoading";
 

apps/web/src/components/mainPage/workspace/formListItem.tsx

@@ -15,7 +15,7 @@ import { useQueryClient } from "@tanstack/react-query";
 import { ExternalLink, Loader2, MoreVertical, Trash } from "lucide-react";
 
 import { LinkN } from "@/components/common/linkN";
-import { api } from "@/trpc/client";
+import { api } from "@/trpc/react";
 
 type Props = {
   form: Form;
@@ -29,8 +29,12 @@ export function FormListItem({ form }: Readonly<Props>) {
         title: "Form deleted.",
         duration: 1500,
       });
-      queryClient.invalidateQueries([["form", "getAll"]]);
-      queryClient.invalidateQueries([["metrics"]]);
+      queryClient.invalidateQueries({
+        queryKey: [["form", "getAll"]],
+      });
+      queryClient.invalidateQueries({
+        queryKey: [["metrics"]],
+      });
     },
     onError: () => {
       toast({
@@ -39,7 +43,7 @@ export function FormListItem({ form }: Readonly<Props>) {
       });
     },
   });
-  const isDeleting = deleteForm.isLoading;
+  const isDeleting = deleteForm.isPending;
 
   const handleDeleteForm = async () =>
     deleteForm.mutateAsync({