🔍 Refactor: Simplify tRPC client setup in NextJS app

saasfly · May 14, 2024 · 8069c84 · 8069c84
1 parent 8fc0e37
commit 8069c84
Show file tree

Hide file tree

Showing 9 changed files with 13 additions and 113 deletions.
diff --git a/apps/nextjs/package.json b/apps/nextjs/package.json
@@ -21,9 +21,9 @@
     "@saasfly/db": "workspace:*",
     "@saasfly/stripe": "workspace:*",
     "@t3-oss/env-nextjs": "0.8.0",
-    "@tanstack/react-query": "5.18.1",
-    "@tanstack/react-query-devtools": "5.18.1",
-    "@tanstack/react-table": "8.11.8",
+    "@tanstack/react-query": "5.36.0",
+    "@tanstack/react-query-devtools": "5.36.0",
+    "@tanstack/react-table": "8.17.0",
     "@trpc/client": "next",
     "@trpc/next": "next",
     "@trpc/react-query": "next",

diff --git a/apps/nextjs/src/app/[lang]/(dashboard)/dashboard/billing/page.tsx b/apps/nextjs/src/app/[lang]/(dashboard)/dashboard/billing/page.tsx
@@ -12,6 +12,8 @@ import { getDictionary } from "~/lib/get-dictionary";
 import { trpc } from "~/trpc/server";
 import { SubscriptionForm } from "./subscription-form";
 
+export const dynamic = 'force-dynamic';
+
 export const metadata = {
   title: "Billing",
   description: "Manage billing and your subscription plan.",

diff --git a/apps/nextjs/src/app/[lang]/(dashboard)/dashboard/page.tsx b/apps/nextjs/src/app/[lang]/(dashboard)/dashboard/page.tsx
@@ -20,6 +20,8 @@ import { getDictionary } from "~/lib/get-dictionary";
 import { trpc } from "~/trpc/server";
 import type { ClustersArray } from "~/types/k8s";
 
+export const dynamic = 'force-dynamic';
+
 export const metadata = {
   title: "Dashboard",
 };

diff --git a/apps/nextjs/src/app/[lang]/(editor)/editor/cluster/[clusterId]/page.tsx b/apps/nextjs/src/app/[lang]/(editor)/editor/cluster/[clusterId]/page.tsx
@@ -7,6 +7,8 @@ import { db } from "@saasfly/db";
 import { ClusterConfig } from "~/components/k8s/cluster-config";
 import type { Cluster } from "~/types/k8s";
 
+export const dynamic = 'force-dynamic';
+
 async function getClusterForUser(clusterId: Cluster["id"], userId: User["id"]) {
   return await db
     .selectFrom("K8sClusterConfig")

diff --git a/apps/nextjs/src/app/[lang]/(marketing)/pricing/page.tsx b/apps/nextjs/src/app/[lang]/(marketing)/pricing/page.tsx
@@ -6,6 +6,8 @@ import type { Locale } from "~/config/i18n-config";
 import { getDictionary } from "~/lib/get-dictionary";
 import { trpc } from "~/trpc/server";
 
+export const dynamic = 'force-dynamic';
+
 export const metadata = {
   title: "Pricing",
 };

diff --git a/apps/nextjs/src/trpc/client.ts b/apps/nextjs/src/trpc/client.ts
@@ -2,33 +2,9 @@ import { loggerLink } from "@trpc/client";
 import { experimental_createTRPCNextAppDirClient } from "@trpc/next/app-dir/client";
 import { experimental_nextHttpLink } from "@trpc/next/app-dir/links/nextHttp";
 import superjson from "superjson";
-
 import type { AppRouter } from "@saasfly/api";
-
 import { getUrl } from "./shared";
 
-// export const trpc = experimental_createTRPCNextAppDirClient<AppRouter>({
-//   config() {
-//     return {
-//       transformer,
-//       links: [
-//         // loggerLink({
-//         //   enabled: (opts) =>
-//         //     process.env.NODE_ENV === "development" ||
-//         //     (opts.direction === "down" && opts.result instanceof Error),
-//         // }),
-//         loggerLink({
-//           enabled: () => true,
-//         }),
-//         endingLink({
-//           headers: {
-//             "x-trpc-source": "client",
-//           },
-//         }),
-//       ],
-//     };
-//   },
-// });
 export const trpc = experimental_createTRPCNextAppDirClient<AppRouter>({
   config() {
     return {

diff --git a/apps/nextjs/src/trpc/server.ts b/apps/nextjs/src/trpc/server.ts
@@ -1,44 +1,4 @@
-// "use server";
-//
-// import "server-only";
-//
-// import { cookies, headers } from "next/headers";
-// import { loggerLink } from "@trpc/client";
-// import { experimental_createTRPCNextAppDirServer } from "@trpc/next/app-dir/server";
-//
 import { cookies } from "next/headers";
-//
-// import { endingLink, transformer } from "./shared";
-//
-// export const trpc = experimental_createTRPCNextAppDirServer<AppRouter>({
-//   config() {
-//     return {
-//       ssr: true,
-//       transformer,
-//       links: [
-//         // loggerLink({
-//         //   enabled: (opts) =>
-//         //     process.env.NODE_ENV === "development" ||
-//         //     (opts.direction === "down" && opts.result instanceof Error),
-//         // }),
-//         loggerLink({
-//           enabled: () => true,
-//         }),
-//         endingLink({
-//           headers: () => {
-//             const h = new Map(headers());
-//             h.delete("connection");
-//             h.delete("transfer-encoding");
-//             h.set("x-trpc-source", "server");
-//             h.set("cookie", cookies().toString());
-//             return Object.fromEntries(h.entries());
-//           },
-//         }),
-//       ],
-//     };
-//   },
-// });
-//
 import { loggerLink } from "@trpc/client";
 import { experimental_nextHttpLink } from "@trpc/next/app-dir/links/nextHttp";
 import { experimental_createTRPCNextAppDirServer } from "@trpc/next/app-dir/server";

diff --git a/apps/nextjs/src/trpc/shared.ts b/apps/nextjs/src/trpc/shared.ts
@@ -1,16 +1,4 @@
-// import {
-//     httpBatchLink,
-//     type HTTPBatchLinkOptions,
-//     type HTTPHeaders,
-//     type TRPCLink,
-// } from "@trpc/client";
-//
-// import type {AppRouter} from "@saasfly/api";
-
 import { env } from "~/env.mjs";
-
-// import fetchPonyfill from "fetch-ponyfill";
-
 export { transformer } from "@saasfly/api/transformer";
 
 function getBaseUrl() {
@@ -22,36 +10,4 @@ function getBaseUrl() {
 
 export function getUrl() {
   return getBaseUrl() + "/api/trpc/edge";
-}
-// const lambdas = [""];
-//
-// export const endingLink = (opts?: {
-//     headers?: HTTPHeaders | (() => HTTPHeaders);
-// }) =>
-//     ((runtime) => {
-//         const sharedOpts = {
-//             headers: opts?.headers,
-//         } satisfies Partial<HTTPBatchLinkOptions>;
-//
-//         const edgeLink = httpBatchLink({
-//             ...sharedOpts,
-//             url: `${getBaseUrl()}/api/trpc/edge`,
-//             fetch: fetchPonyfill().fetch,
-//         })(runtime);
-//         const lambdaLink = httpBatchLink({
-//             ...sharedOpts,
-//             url: `${getBaseUrl()}/api/trpc/lambda`,
-//             fetch: fetchPonyfill().fetch,
-//         })(runtime);
-//
-//         return (ctx) => {
-//             const path = ctx.op.path.split(".") as [string, ...string[]];
-//             const endpoint = lambdas.includes(path[0]) ? "lambda" : "edge";
-//
-//             const newCtx = {
-//                 ...ctx,
-//                 op: {...ctx.op, path: path.join(".")},
-//             };
-//             return endpoint === "edge" ? edgeLink(newCtx) : lambdaLink(newCtx);
-//         };
-//     }) satisfies TRPCLink<AppRouter>;
+}
diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -66,7 +66,7 @@
     "@saasfly/typescript-config": "workspace:*",
     "@saasfly/tailwind-config": "workspace:*",
     "@types/react": "18.2.30",
-    "@tanstack/react-table": "8.11.8",
+    "@tanstack/react-table": "8.17.0",
     "date-fns": "3.3.1",
     "eslint": "8.57.0",
     "prettier": "3.2.5",