add some query client defaults (#838)

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<AppRouter>({
   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<TRPCClientErrorLike<AppRouter>>;
+              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;
+            },
+          },
+        },
+      },
     };
   },
   /**