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/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>
+  )
+}