From 86c94a3cd57a3fc5b491bb16a4fcea922002b9ba Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Omar=20L=C3=B3pez?= Date: Fri, 10 Feb 2023 13:05:02 -0700 Subject: [PATCH] Upgrades tRPC to 10.10.0 (#6995) * Upgrades tRPC to 10.10.0 * Type fixes --- apps/web/lib/QueryCell.tsx | 2 +- apps/web/pages/_app.tsx | 87 +------------------------------------ packages/trpc/package.json | 8 ++-- packages/trpc/react/trpc.ts | 87 +++++++++++++++++++++++++++++++++++-- yarn.lock | 32 +++++++------- 5 files changed, 106 insertions(+), 110 deletions(-) diff --git a/apps/web/lib/QueryCell.tsx b/apps/web/lib/QueryCell.tsx index fc4ea0e46c..acefdc2884 100644 --- a/apps/web/lib/QueryCell.tsx +++ b/apps/web/lib/QueryCell.tsx @@ -88,7 +88,7 @@ const withQuery = < TInput = inferProcedureInput, TOutput = inferProcedureOutput >( - queryProcedure: DecorateProcedure, + queryProcedure: DecorateProcedure, input?: TInput, params?: UseTRPCQueryOptions ) => { diff --git a/apps/web/pages/_app.tsx b/apps/web/pages/_app.tsx index 053a2a3ea9..c83f7c88b4 100644 --- a/apps/web/pages/_app.tsx +++ b/apps/web/pages/_app.tsx @@ -1,18 +1,10 @@ import { DefaultSeo } from "next-seo"; import Head from "next/head"; import Script from "next/script"; -import superjson from "superjson"; import "@calcom/embed-core/src/embed-iframe"; import LicenseRequired from "@calcom/features/ee/common/components/LicenseRequired"; -import { httpBatchLink } from "@calcom/trpc/client/links/httpBatchLink"; -import { httpLink } from "@calcom/trpc/client/links/httpLink"; -import { loggerLink } from "@calcom/trpc/client/links/loggerLink"; -import { splitLink } from "@calcom/trpc/client/links/splitLink"; -import { withTRPC } from "@calcom/trpc/next"; -import type { TRPCClientErrorLike } from "@calcom/trpc/react"; -import { Maybe } from "@calcom/trpc/server"; -import type { AppRouter } from "@calcom/trpc/server/routers/_app"; +import { trpc } from "@calcom/trpc/react"; import AppProviders, { AppProps } from "@lib/app-providers"; import { seoConfig } from "@lib/config/next-seo.config"; @@ -70,79 +62,4 @@ function MyApp(props: AppProps) { ); } -export default withTRPC({ - config() { - const url = - typeof window !== "undefined" - ? "/api/trpc" - : process.env.VERCEL_URL - ? `https://${process.env.VERCEL_URL}/api/trpc` - : `http://${process.env.NEXT_PUBLIC_WEBAPP_URL}/api/trpc`; - - /** - * If you want to use SSR, you need to use the server's full URL - * @link https://trpc.io/docs/ssr - */ - return { - /** - * @link https://trpc.io/docs/links - */ - links: [ - // adds pretty logs to your console in development and logs errors in production - loggerLink({ - enabled: (opts) => - !!process.env.NEXT_PUBLIC_DEBUG || (opts.direction === "down" && opts.result instanceof Error), - }), - splitLink({ - // check for context property `skipBatch` - condition: (op) => { - return op.context.skipBatch === true; - }, - // when condition is true, use normal request - true: httpLink({ url }), - // when condition is false, use batching - false: httpBatchLink({ - url, - /** @link https://github.com/trpc/trpc/issues/2008 */ - // maxBatchSize: 7 - }), - }), - ], - /** - * @link https://react-query.tanstack.com/reference/QueryClient - */ - 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; - }, - }, - }, - }, - /** - * @link https://trpc.io/docs/data-transformers - */ - transformer: superjson, - }; - }, - /** - * @link https://trpc.io/docs/ssr - */ - ssr: false, -})(MyApp); +export default trpc.withTRPC(MyApp); diff --git a/packages/trpc/package.json b/packages/trpc/package.json index 43dbce21c8..f3aa7fa7da 100644 --- a/packages/trpc/package.json +++ b/packages/trpc/package.json @@ -7,10 +7,10 @@ "main": "index.ts", "dependencies": { "@tanstack/react-query": "^4.3.9", - "@trpc/client": "^10.0.0-rc.6", - "@trpc/next": "^10.0.0-rc.6", - "@trpc/react-query": "^10.0.0-rc.6", - "@trpc/server": "^10.0.0-rc.6", + "@trpc/client": "^10.10.0", + "@trpc/next": "^10.10.0", + "@trpc/react-query": "^10.10.0", + "@trpc/server": "^10.10.0", "superjson": "1.9.1", "zod": "^3.20.2" } diff --git a/packages/trpc/react/trpc.ts b/packages/trpc/react/trpc.ts index 11ca0af111..5f3b9ffc04 100644 --- a/packages/trpc/react/trpc.ts +++ b/packages/trpc/react/trpc.ts @@ -1,17 +1,96 @@ import superjson from "superjson"; -import { createTRPCReact } from "@trpc/react-query"; - +import { httpBatchLink } from "../client/links/httpBatchLink"; +import { httpLink } from "../client/links/httpLink"; +import { loggerLink } from "../client/links/loggerLink"; +import { splitLink } from "../client/links/splitLink"; +import { createTRPCNext } from "../next"; // ℹ️ Type-only import: // https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-8.html#type-only-imports-and-export -import type { inferRouterInputs, inferRouterOutputs } from "../server"; +import type { TRPCClientErrorLike } from "../react"; +import type { inferRouterInputs, inferRouterOutputs, Maybe } from "../server"; import type { AppRouter } from "../server/routers/_app"; /** * A set of strongly-typed React hooks from your `AppRouter` type signature with `createTRPCReact`. * @link https://trpc.io/docs/v10/react#2-create-trpc-hooks */ -export const trpc = createTRPCReact(); +export const trpc = createTRPCNext({ + config() { + const url = + typeof window !== "undefined" + ? "/api/trpc" + : process.env.VERCEL_URL + ? `https://${process.env.VERCEL_URL}/api/trpc` + : `http://${process.env.NEXT_PUBLIC_WEBAPP_URL}/api/trpc`; + + /** + * If you want to use SSR, you need to use the server's full URL + * @link https://trpc.io/docs/ssr + */ + return { + /** + * @link https://trpc.io/docs/links + */ + links: [ + // adds pretty logs to your console in development and logs errors in production + loggerLink({ + enabled: (opts) => + !!process.env.NEXT_PUBLIC_DEBUG || (opts.direction === "down" && opts.result instanceof Error), + }), + splitLink({ + // check for context property `skipBatch` + condition: (op) => { + return op.context.skipBatch === true; + }, + // when condition is true, use normal request + true: httpLink({ url }), + // when condition is false, use batching + false: httpBatchLink({ + url, + /** @link https://github.com/trpc/trpc/issues/2008 */ + // maxBatchSize: 7 + }), + }), + ], + /** + * @link https://react-query.tanstack.com/reference/QueryClient + */ + 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; + }, + }, + }, + }, + /** + * @link https://trpc.io/docs/data-transformers + */ + transformer: superjson, + }; + }, + /** + * @link https://trpc.io/docs/ssr + */ + ssr: false, +}); export const transformer = superjson; diff --git a/yarn.lock b/yarn.lock index 8dc89a3bca..ac3b5c556d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7835,27 +7835,27 @@ javascript-natural-sort "0.7.1" lodash "4.17.21" -"@trpc/client@^10.0.0-rc.6": - version "10.0.0-rc.6" - resolved "https://registry.yarnpkg.com/@trpc/client/-/client-10.0.0-rc.6.tgz#de30c9107facdf7d54e000c1e6b95de50bbe7acd" - integrity sha512-/vyi0b9R+DOJgvYFFYSveRwIX4Ttu01Af0ORzZGsDHYZGB7lfSqHfQhizf+AHfEpQXQsJYy5ZFOt6RtvF6LuKg== +"@trpc/client@^10.10.0": + version "10.10.0" + resolved "https://registry.yarnpkg.com/@trpc/client/-/client-10.10.0.tgz#5abdbf399639f2fdfe605682d2cdf3f9dba87cb1" + integrity sha512-HRVGkOsR4FIYpyQILP84HLbj6pRnLKgxy4AIelTf9d9TxD60M5bNhbR2Uz3hqNSb9a2ppaRJBLv7twlV9b4qHQ== -"@trpc/next@^10.0.0-rc.6": - version "10.0.0-rc.6" - resolved "https://registry.yarnpkg.com/@trpc/next/-/next-10.0.0-rc.6.tgz#9c9a81183cc4c49ba0f21ee009595639448cacd3" - integrity sha512-YaQbctwvYYk1HlVcJedRyQGT1EP5QiKse+T7zNj4Be0ZAiNVJwedC4AQ9YQDh0nK6GXDoHGVk8ocSCkNvEBddw== +"@trpc/next@^10.10.0": + version "10.10.0" + resolved "https://registry.yarnpkg.com/@trpc/next/-/next-10.10.0.tgz#083ff327b68b005d60b19af07008377f830ad73a" + integrity sha512-7d84L2OoF0RW06drTbNGOOggwMes8JxI3Ln/VOIaYeERzwOFNCtWPmGjWCdq4l1SKbXC6+baS+b9n5cXc+euwA== dependencies: react-ssr-prepass "^1.5.0" -"@trpc/react-query@^10.0.0-rc.6": - version "10.0.0-rc.6" - resolved "https://registry.yarnpkg.com/@trpc/react-query/-/react-query-10.0.0-rc.6.tgz#a10cc0b4dc3a849d260d086e0dc3faccac7515dc" - integrity sha512-OHkoZLDz86Q7wez7ayLAZiWATePi+QkwavyNu/x6c0f/dC8n7CUIZAhAjUN4SuZYEeZxbW351QtPIQwODT2XVA== +"@trpc/react-query@^10.10.0": + version "10.10.0" + resolved "https://registry.yarnpkg.com/@trpc/react-query/-/react-query-10.10.0.tgz#1faf32056aa3ee5ecb2ffd0d15e8abbcd7eff911" + integrity sha512-Jc/uii1MPevf95/z/W3ufYGHvrFvrtkjxQ8UuXhJCzOgv/FGPqhmA5PH124nLHEgGLBA7zQxHumofhdXosEhUQ== -"@trpc/server@^10.0.0-rc.6": - version "10.0.0-rc.6" - resolved "https://registry.yarnpkg.com/@trpc/server/-/server-10.0.0-rc.6.tgz#076df5ab371ede9226868474e71333041020ec8a" - integrity sha512-8JAIX2SSTEwpdp+CRoPGsrj9A9qee0ltqa1fPXlKOtzQKbxDjGoqy6kVVh25YUJ8GJrXf4LhV8pZGkyZOOX6ow== +"@trpc/server@^10.10.0": + version "10.10.0" + resolved "https://registry.yarnpkg.com/@trpc/server/-/server-10.10.0.tgz#0b494335140d4fd5e1452f7b57dcc9b8886720a4" + integrity sha512-tCTqcqBT+3nebYFTHtwM877qo5xQPtVlptxKdUzMVWleWT4lFTL4oddk45qVURToci2iMbVJjd4jQU9y9/XwlQ== "@tryvital/vital-node@^1.4.6": version "1.4.6"