web/packages/trpc/lib/Provider.tsx

"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>
  )
}