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
This commit is contained in:
@@ -1,101 +1,39 @@
|
||||
"use client"
|
||||
|
||||
import {
|
||||
QueryCache,
|
||||
QueryClient,
|
||||
QueryClientProvider,
|
||||
} from "@tanstack/react-query"
|
||||
import { httpLink, loggerLink, TRPCClientError } from "@trpc/client"
|
||||
import { useState } from "react"
|
||||
import { TRPCClientError } from "@trpc/client"
|
||||
|
||||
import { SessionExpiredError } from "@scandic-hotels/trpc/errors"
|
||||
import { transformer } from "@scandic-hotels/trpc/transformer"
|
||||
import { TrpcProvider as InternalTrpcProvider } from "@scandic-hotels/trpc/Provider"
|
||||
|
||||
import { login } from "@/constants/routes/handleAuth"
|
||||
import { env } from "@/env/client"
|
||||
|
||||
import useLang from "@/hooks/useLang"
|
||||
|
||||
import { trpc } from "./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 default function TrpcProvider({ children }: React.PropsWithChildren) {
|
||||
export default function TrpcProvider({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode
|
||||
}) {
|
||||
const lang = useLang()
|
||||
const [queryClient] = useState(
|
||||
() =>
|
||||
new QueryClient({
|
||||
queryCache: new QueryCache({
|
||||
async onError(error) {
|
||||
if (error instanceof TRPCClientError) {
|
||||
const appError: TRPCClientError<AnyTRPCRouter> = error
|
||||
console.log({ appError })
|
||||
if (appError.data?.code === "UNAUTHORIZED") {
|
||||
if (appError.data?.cause instanceof SessionExpiredError) {
|
||||
const loginUrl = login[lang]
|
||||
window.location.assign(loginUrl)
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
}),
|
||||
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>
|
||||
<InternalTrpcProvider
|
||||
onError={(error) => {
|
||||
if (error instanceof TRPCClientError) {
|
||||
const appError: TRPCClientError<AnyTRPCRouter> = error
|
||||
console.log({ appError })
|
||||
if (appError.data?.code === "UNAUTHORIZED") {
|
||||
if (appError.data?.cause instanceof SessionExpiredError) {
|
||||
const loginUrl = login[lang]
|
||||
window.location.assign(loginUrl)
|
||||
}
|
||||
}
|
||||
}
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</InternalTrpcProvider>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user