diff --git a/pages/_app.tsx b/pages/_app.tsx index b0cdffcf..527b25d8 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -1,6 +1,9 @@ +import type { AppRouter } from "@server/routers/_app"; import { httpBatchLink } from "@trpc/client/links/httpBatchLink"; import { loggerLink } from "@trpc/client/links/loggerLink"; import { withTRPC } from "@trpc/next"; +import type { TRPCClientErrorLike } from "@trpc/react"; +import { Maybe } from "@trpc/server"; import { appWithTranslation } from "next-i18next"; import { DefaultSeo } from "next-seo"; import type { AppProps as NextAppProps } from "next/app"; @@ -26,7 +29,7 @@ function MyApp(props: AppProps) { ); } -export default withTRPC({ +export default withTRPC({ config() { /** * If you want to use SSR, you need to use the server's full URL @@ -50,7 +53,30 @@ export default withTRPC({ /** * @link https://react-query.tanstack.com/reference/QueryClient */ - // queryClientConfig: { defaultOptions: { queries: { staleTime: 6000 } } }, + queryClientConfig: { + defaultOptions: { + queries: { + /** + * 1s should be enough to just keep identical query waterfalls low + * @example if one page components uses a query that is also used further down the tree + */ + staleTime: 1000, + /** + * Retry `useQuery()` calls depending on this function + */ + retry(failureCount, _err) { + const err = _err as never as Maybe>; + const code = err?.data?.code; + if (code === "BAD_REQUEST" || code === "FORBIDDEN" || code === "UNAUTHORIZED") { + // if input data is wrong or you're not authorized there's no point retrying a query + return false; + } + const MAX_QUERY_RETRIES = 3; + return failureCount < MAX_QUERY_RETRIES; + }, + }, + }, + }, }; }, /**