Merged in feat/sw-3125-move-client-trpc-setup (pull request #2493)

feat(SW-3125): Move client trpc setup

* Move client trpc to package

* Client setup in partner-sas

* Add todo


Approved-by: Linus Flood

packages/trpc/env/client.ts

@@ -0,0 +1,21 @@
+import { createEnv } from "@t3-oss/env-nextjs"
+import { z } from "zod"
+
+export const env = createEnv({
+  client: {
+    NEXT_PUBLIC_NODE_ENV: z.enum(["development", "test", "production"]),
+    // NEXT_PUBLIC_PORT: z.string().default("3000"),
+    // NEXT_PUBLIC_SENTRY_ENVIRONMENT: z.string().default("development"),
+    // NEXT_PUBLIC_SENTRY_CLIENT_SAMPLERATE: z.coerce.number().default(0.001),
+    // NEXT_PUBLIC_PUBLIC_URL: z.string().optional(),
+  },
+  emptyStringAsUndefined: true,
+  runtimeEnv: {
+    NEXT_PUBLIC_NODE_ENV: process.env.NODE_ENV,
+    // NEXT_PUBLIC_PORT: process.env.NEXT_PUBLIC_PORT,
+    // NEXT_PUBLIC_SENTRY_ENVIRONMENT: process.env.NEXT_PUBLIC_SENTRY_ENVIRONMENT,
+    // NEXT_PUBLIC_SENTRY_CLIENT_SAMPLERATE:
+    //   process.env.NEXT_PUBLIC_SENTRY_CLIENT_SAMPLERATE,
+    // NEXT_PUBLIC_PUBLIC_URL: process.env.NEXT_PUBLIC_PUBLIC_URL,
+  },
+})

packages/trpc/lib/Provider.tsx

@@ -0,0 +1,92 @@
+"use client"
+
+import {
+  QueryCache,
+  QueryClient,
+  QueryClientProvider,
+} from "@tanstack/react-query"
+import { httpLink, loggerLink, TRPCClientError } from "@trpc/client"
+import { useState } from "react"
+
+import { trpc } from "@scandic-hotels/trpc/client"
+import { transformer } from "@scandic-hotels/trpc/transformer"
+
+import { env } from "../env/client"
+
+import type { AnyTRPCRouter } from "@trpc/server"
+
+function initializeTrpcClient() {
+  // Locally we set nextjs to run on port to 3000 so that we always guarantee
+  //  that trpc and next are running on the same port.
+  return trpc.createClient({
+    links: [
+      loggerLink({
+        enabled: (opts) =>
+          (env.NEXT_PUBLIC_NODE_ENV === "development" &&
+            typeof window !== "undefined") ||
+          (opts.direction === "down" && opts.result instanceof Error),
+      }),
+      httpLink({
+        transformer,
+        /**
+         * This is locally in Next.js
+         */
+        url: `/api/web/trpc`,
+      }),
+    ],
+  })
+}
+
+export function TrpcProvider({
+  onError,
+  children,
+}: {
+  onError?: (error: Error) => void
+  children: React.ReactNode
+}) {
+  const [queryClient] = useState(
+    () =>
+      new QueryClient({
+        queryCache: new QueryCache({
+          async onError(error) {
+            onError?.(error)
+          },
+        }),
+        defaultOptions: {
+          queries: {
+            staleTime: 60 * 1000,
+            retry(failureCount, error) {
+              if (error instanceof TRPCClientError) {
+                const appError: TRPCClientError<AnyTRPCRouter> = error
+
+                // Do not retry query requests that got UNAUTHORIZED error.
+                // It won't make a difference sending the same request again.
+
+                if (appError.data?.code) {
+                  if (
+                    [
+                      "UNAUTHORIZED",
+                      "INTERNAL_SERVER_ERROR",
+                      "FORBIDDEN",
+                    ].includes(appError.data.code)
+                  ) {
+                    return false
+                  }
+                }
+              }
+
+              // Retry all client requests that fail (and are not handled above)
+              // at most 3 times.
+              return failureCount < 3
+            },
+          },
+        },
+      })
+  )
+  const [trpcClient] = useState(() => initializeTrpcClient())
+  return (
+    <trpc.Provider client={trpcClient} queryClient={queryClient}>
+      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+    </trpc.Provider>
+  )
+}

packages/trpc/lib/client.ts

@@ -0,0 +1,9 @@
+import { createTRPCReact } from "@trpc/react-query"
+
+import type { inferRouterOutputs } from "@trpc/server"
+
+import type { AppRouter } from "./routers/appRouter"
+
+export const trpc = createTRPCReact<AppRouter>()
+
+export type RouterOutput = inferRouterOutputs<AppRouter>

packages/trpc/package.json

@@ -18,6 +18,8 @@
     "./procedures": "./lib/procedures.ts",
     "./transformer": "./lib/transformer.ts",
     "./serverClient": "./lib/serverClient.ts",
+    "./client": "./lib/client.ts",
+    "./Provider": "./lib/Provider.tsx",
     "./utils/generateTag": "./lib/utils/generateTag.ts",
     "./graphql/request": "./lib/graphql/request.ts",
     "./graphql/batchRequest": "./lib/graphql/batchRequest.ts",
@@ -48,6 +50,8 @@
     "@scandic-hotels/common": "workspace:*",
     "@sentry/nextjs": "^8.41.0",
     "@t3-oss/env-nextjs": "^0.13.4",
+    "@trpc/client": "^11.1.2",
+    "@trpc/react-query": "^11.1.2",
     "@trpc/server": "^11.1.2",
     "dayjs": "^1.11.13",
     "deepmerge": "^4.3.1",