add tRPC

lib/app-providers.tsx

@@ -1,21 +1,45 @@
-import React from "react";
 import { createTelemetryClient, TelemetryProvider } from "@lib/telemetry";
+import { httpBatchLink } from "@trpc/client/links/httpBatchLink";
+import { loggerLink } from "@trpc/client/links/loggerLink";
+import { withTRPC } from "@trpc/next";
 import { Provider } from "next-auth/client";
-import { QueryClient, QueryClientProvider } from "react-query";
-import { Hydrate } from "react-query/hydration";
-
-export const queryClient = new QueryClient();
+import { AppProps } from "next/dist/shared/lib/router/router";
+import React from "react";
 
-const AppProviders: React.FC = (props, pageProps) => {
+const AppProviders = (props: AppProps) => {
   return (
     <TelemetryProvider value={createTelemetryClient()}>
-      <QueryClientProvider client={queryClient}>
-        <Hydrate state={pageProps.dehydratedState}>
-          <Provider session={pageProps.session}>{props.children}</Provider>
-        </Hydrate>
-      </QueryClientProvider>
+      <Provider session={props.pageProps.session}>{props.children}</Provider>
     </TelemetryProvider>
   );
 };
 
-export default AppProviders;
+export default withTRPC({
+  config() {
+    /**
+     * 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.NODE_ENV === "development" ||
+            (opts.direction === "down" && opts.result instanceof Error),
+        }),
+        httpBatchLink({
+          url: `/api/trpc`,
+        }),
+      ],
+      /**
+       * @link https://react-query.tanstack.com/reference/QueryClient
+       */
+      queryClientConfig: { defaultOptions: { queries: { staleTime: 6000 } } },
+    };
+  },
+  ssr: false,
+})(AppProviders);

lib/trpc.ts

@@ -0,0 +1,29 @@
+import { createReactQueryHooks } from "@trpc/react";
+import type { inferProcedureOutput, inferProcedureInput } from "@trpc/server";
+
+// ℹ️ Type-only import:
+// https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-8.html#type-only-imports-and-export
+import type { AppRouter } from "@server/routers/_app";
+
+/**
+ * A set of strongly-typed React hooks from your `AppRouter` type signature with `createReactQueryHooks`.
+ * @link https://trpc.io/docs/react#3-create-trpc-hooks
+ */
+export const trpc = createReactQueryHooks<AppRouter>();
+
+// export const transformer = superjson;
+/**
+ * This is a helper method to infer the output of a query resolver
+ * @example type HelloOutput = inferQueryOutput<'hello'>
+ */
+export type inferQueryOutput<TRouteKey extends keyof AppRouter["_def"]["queries"]> = inferProcedureOutput<
+  AppRouter["_def"]["queries"][TRouteKey]
+>;
+
+export type inferQueryInput<TRouteKey extends keyof AppRouter["_def"]["queries"]> = inferProcedureInput<
+  AppRouter["_def"]["queries"][TRouteKey]
+>;
+
+export type inferMutationInput<TRouteKey extends keyof AppRouter["_def"]["mutations"]> = inferProcedureInput<
+  AppRouter["_def"]["mutations"][TRouteKey]
+>;

package.json

@@ -34,6 +34,10 @@
     "@radix-ui/react-switch": "^0.0.15",
     "@radix-ui/react-tooltip": "^0.0.21",
     "@tailwindcss/forms": "^0.3.3",
+    "@trpc/client": "^9.4.0",
+    "@trpc/next": "^9.4.0",
+    "@trpc/react": "^9.4.0",
+    "@trpc/server": "^9.4.0",
     "async": "^3.2.1",
     "bcryptjs": "^2.4.3",
     "classnames": "^2.3.1",
@@ -59,13 +63,14 @@
     "react-hot-toast": "^2.1.0",
     "react-multi-email": "^0.5.3",
     "react-phone-number-input": "^3.1.25",
-    "react-query": "^3.21.0",
+    "react-query": "^3.23.1",
     "react-select": "^4.3.1",
     "react-timezone-select": "^1.0.7",
     "short-uuid": "^4.2.0",
     "tsdav": "^1.0.6",
     "tslog": "^3.2.1",
-    "uuid": "^8.3.2"
+    "uuid": "^8.3.2",
+    "zod": "^3.8.2"
   },
   "devDependencies": {
     "@types/bcryptjs": "^2.4.2",

pages/[user].tsx

@@ -4,14 +4,18 @@ import Theme from "@components/Theme";
 import { ArrowRightIcon } from "@heroicons/react/outline";
 import { ClockIcon, InformationCircleIcon, UserIcon } from "@heroicons/react/solid";
 import prisma from "@lib/prisma";
+import { trpc } from "@lib/trpc";
 import { inferSSRProps } from "@lib/types/inferSSRProps";
 import { GetServerSidePropsContext } from "next";
 import Link from "next/link";
 import React from "react";
 
 export default function User(props: inferSSRProps<typeof getServerSideProps>) {
   const { isReady } = Theme(props.user.theme);
-
+  // FIXME delete me before merge
+  const query1 = trpc.useQuery(["test.hello"]);
+  const query2 = trpc.useQuery(["test.hello", "alex"]);
+  console.log("result", { query1, query2 });
   return (
     <>
       <HeadSeo

pages/_app.tsx

@@ -10,9 +10,10 @@ export type AppProps = NextAppProps & {
   err?: Error;
 };
 
-function MyApp({ Component, pageProps, err }: AppProps) {
+function MyApp(props: AppProps) {
+  const { Component, pageProps, err } = props;
   return (
-    <AppProviders>
+    <AppProviders {...props}>
       <DefaultSeo {...seoConfig.defaultNextSeo} />
       <Component {...pageProps} err={err} />
     </AppProviders>

pages/api/trpc/[trpc].ts

@@ -0,0 +1,35 @@
+/**
+ * This file contains tRPC's HTTP response handler
+ */
+import * as trpcNext from "@trpc/server/adapters/next";
+import { appRouter } from "@server/routers/_app";
+import { createContext } from "@server/createContext";
+
+export default trpcNext.createNextApiHandler({
+  router: appRouter,
+  /**
+   * @link https://trpc.io/docs/context
+   */
+  createContext,
+  /**
+   * @link https://trpc.io/docs/error-handling
+   */
+  onError({ error }) {
+    if (error.code === "INTERNAL_SERVER_ERROR") {
+      // send to bug reporting
+      console.error("Something went wrong", error);
+    }
+  },
+  /**
+   * Enable query batching
+   */
+  batching: {
+    enabled: true,
+  },
+  /**
+   * @link https://trpc.io/docs/caching#api-response-caching
+   */
+  // responseMeta() {
+  //   // ...
+  // },
+});

prisma/schema.prisma

@@ -4,6 +4,8 @@
 datasource db {
   provider = "postgresql"
   url      = env("DATABASE_URL")
+
+
 }
 
 generator client {
@@ -83,13 +85,13 @@ model User {
 }
 
 model Team {
-  id            Int       @default(autoincrement()) @id
-  name          String?
-  slug          String?   @unique
-  logo          String?
-  bio           String?
-  hideBranding  Boolean @default(false)    
-  members       Membership[]
+  id           Int          @id @default(autoincrement())
+  name         String?
+  slug         String?      @unique
+  logo         String?
+  bio          String?
+  hideBranding Boolean      @default(false)
+  members      Membership[]
 }
 
 enum MembershipRole {

server/createContext.ts

@@ -0,0 +1,17 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import * as trpc from "@trpc/server";
+import * as trpcNext from "@trpc/server/adapters/next";
+import prisma from "@lib/prisma";
+
+/**
+ * Creates context for an incoming request
+ * @link https://trpc.io/docs/context
+ */
+export const createContext = async ({ req, res }: trpcNext.CreateNextContextOptions) => {
+  // for API-response caching see https://trpc.io/docs/caching
+  return {
+    prisma,
+  };
+};
+
+export type Context = trpc.inferAsyncReturnType<typeof createContext>;

server/createRouter.ts

@@ -0,0 +1,9 @@
+import * as trpc from "@trpc/server";
+import { Context } from "./createContext";
+
+/**
+ * Helper function to create a router with context
+ */
+export function createRouter() {
+  return trpc.router<Context>();
+}

server/routers/_app.ts

@@ -0,0 +1,26 @@
+/**
+ * This file contains the root router of your tRPC-backend
+ */
+import { createRouter } from "../createRouter";
+import { testRouter } from "./test";
+
+/**
+ * Create your application's root router
+ * If you want to use SSG, you need export this
+ * @link https://trpc.io/docs/ssg
+ * @link https://trpc.io/docs/router
+ */
+export const appRouter = createRouter()
+  /**
+   * Add data transformers
+   * @link https://trpc.io/docs/data-transformers
+   */
+  // .transformer(superjson)
+  /**
+   * Optionally do custom error (type safe!) formatting
+   * @link https://trpc.io/docs/error-formatting
+   */
+  // .formatError(({ shape, error }) => { })
+  .merge("test.", testRouter);
+
+export type AppRouter = typeof appRouter;

server/routers/test.tsx

@@ -0,0 +1,9 @@
+import { createRouter } from "../createRouter";
+import { z } from "zod";
+
+export const testRouter = createRouter().query("hello", {
+  input: z.string().nullish(),
+  resolve({ input }) {
+    return input ?? "world";
+  },
+});

server/ssg.ts

@@ -0,0 +1,10 @@
+import prisma from "@lib/prisma";
+import { createSSGHelpers } from "@trpc/react/ssg";
+import { appRouter } from "./routers/_app";
+
+export const ssg = createSSGHelpers({
+  router: appRouter,
+  ctx: {
+    prisma,
+  },
+});

tsconfig.json

@@ -5,7 +5,8 @@
     "baseUrl": ".",
     "paths": {
       "@components/*": ["components/*"],
-      "@lib/*": ["lib/*"]
+      "@lib/*": ["lib/*"],
+      "@server/*": ["server/*"]
     },
     "allowJs": true,
     "skipLibCheck": true,

yarn.lock

@@ -251,6 +251,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.9.0":
+  version "7.15.4"
+  resolved "https://registry.npmjs.org/@babel/runtime/-/runtime-7.15.4.tgz#fd17d16bfdf878e6dd02d19753a39fa8a8d9c84a"
+  integrity sha512-99catp6bHCaxr4sJ/DbTGgHS4+Rs2RVd2g7iOap6SLGPDknRK9ztKNsE/Fg6QhSeh1FGE5f6gHGQmvvn3I3xhw==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/template@^7.14.5", "@babel/template@^7.3.3":
   version "7.14.5"
   resolved "https://registry.npmjs.org/@babel/template/-/template-7.14.5.tgz#a9bc9d8b33354ff6e55a9c60d1109200a68974f4"
@@ -1165,6 +1172,41 @@
   version "1.1.2"
   resolved "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz#ccb91445360179a04e7fe6aff78c00ffc1eeaf82"
 
+"@trpc/client@^9.4.0":
+  version "9.4.0"
+  resolved "https://registry.npmjs.org/@trpc/client/-/client-9.4.0.tgz#8f19208ce2d33f8b3d1f4af72180964858fbcecd"
+  integrity sha512-6hdkArkcphIymIkl9M3qYqXWXDFHRfqokPXklV5h3iY8zUf9zAmIKe83nJOFWXkfWTszi7rNNryInGhVlcu8Uw==
+  dependencies:
+    "@babel/runtime" "^7.9.0"
+    "@trpc/server" "^9.4.0"
+
+"@trpc/next@^9.4.0":
+  version "9.4.0"
+  resolved "https://registry.npmjs.org/@trpc/next/-/next-9.4.0.tgz#4cb1af430adb23445371712d1da4be47ba191c42"
+  integrity sha512-Z6Z4TItZi1CaSslfe8OaEUQjIocwcpQvl0LjABFJ5Br5lbgMZuTeagUid3tSx3lusg1BYlXMHvYqj3TyzH2Aaw==
+  dependencies:
+    "@babel/runtime" "^7.9.0"
+    "@trpc/client" "^9.4.0"
+    "@trpc/react" "^9.4.0"
+    "@trpc/server" "^9.4.0"
+    react-ssr-prepass "^1.4.0"
+
+"@trpc/react@^9.4.0":
+  version "9.4.0"
+  resolved "https://registry.npmjs.org/@trpc/react/-/react-9.4.0.tgz#747a1c3dc974487ee63c56e0eea06214e2a64d7a"
+  integrity sha512-4LnOEz4meXXoDmc27cRZNxNoGaHSzt6i8iup6hLCwb1OC5CqU1ae4xXf6I8ot5m7gN7sv6GHTi0C4pGmeOPwQQ==
+  dependencies:
+    "@babel/runtime" "^7.9.0"
+    "@trpc/client" "^9.4.0"
+    "@trpc/server" "^9.4.0"
+
+"@trpc/server@^9.4.0":
+  version "9.4.0"
+  resolved "https://registry.npmjs.org/@trpc/server/-/server-9.4.0.tgz#4c686be44b05526521cb178b47f0ec2f21026872"
+  integrity sha512-bh9f06CNTnAVXIs+g3dojq/lEDwN+dBuNBfhpjLzxbYakhUeivBtOMVD4E/vGWWTCTj6yVJxk3RC+xB6YfrAGg==
+  dependencies:
+    tslib "^2.1.0"
+
 "@tsconfig/node10@^1.0.7":
   version "1.0.8"
   resolved "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.8.tgz#c1e4e80d6f964fbecb3359c43bd48b40f7cadad9"
@@ -5783,9 +5825,10 @@ react-portal@^4.2.0:
   dependencies:
     prop-types "^15.5.8"
 
-react-query@^3.21.0:
-  version "3.21.0"
-  resolved "https://registry.yarnpkg.com/react-query/-/react-query-3.21.0.tgz#2e099a7906c38eeeb750e8b9b12121a21fa8d9ef"
+react-query@^3.23.1:
+  version "3.23.1"
+  resolved "https://registry.npmjs.org/react-query/-/react-query-3.23.1.tgz#cde2d268958716d34a23e62aabba668752ba8f95"
+  integrity sha512-pq0vEwB5PNGvkWJNUk0qPpsxcDmhzY80ZLNPLIVQJ3k2UyXoGccPTrgOIj4Kz2TrMfgvRBTNwiSxHdaW7Sl0WQ==
   dependencies:
     "@babel/runtime" "^7.5.5"
     broadcast-channel "^3.4.1"
@@ -5824,6 +5867,11 @@ react-select@^4.3.1:
     react-input-autosize "^3.0.0"
     react-transition-group "^4.3.0"
 
+react-ssr-prepass@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.npmjs.org/react-ssr-prepass/-/react-ssr-prepass-1.4.0.tgz#33a3db19414f0f8f9f3f781c88f760ae366b4f51"
+  integrity sha512-0SzdmiQUtHvhxCabHg9BI/pkJfijGkQ0jQL6fC4YFy7idaDOuaiQLsajIkkNxffFXtJFHIWFITlve2WB88e0Jw==
+
 react-style-singleton@^2.1.0:
   version "2.1.1"
   resolved "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.1.1.tgz#ce7f90b67618be2b6b94902a30aaea152ce52e66"
@@ -7182,3 +7230,8 @@ zen-observable-ts@^1.0.0:
 zen-observable@0.8.15:
   version "0.8.15"
   resolved "https://registry.npmjs.org/zen-observable/-/zen-observable-0.8.15.tgz#96415c512d8e3ffd920afd3889604e30b9eaac15"
+
+zod@^3.8.2:
+  version "3.8.2"
+  resolved "https://registry.npmjs.org/zod/-/zod-3.8.2.tgz#f25b78bc76e64f31318d242e301c23d3d610b7a1"
+  integrity sha512-kpwVRACazsOhELVt5h4R2pC2OndrqaBK4+z134TWOsnzn7n2uOYnSyvx0QAn410pl28CgVtkSi5ew7e/AgO0oA==