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

Author: growupanand

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";