Добавлен tRPC

jest.config.js

@@ -1,8 +1,9 @@
 module.exports = {
   testEnvironment: "jsdom",
   testMatch: ["**/src/**/*.test.ts?(x)"],
-  resolver: "<rootDir>/jest.resolver.cjs",
+  moduleDirectories: ["node_modules", "src"],
+  modulePaths: ["<rootDir>/src"],
   transform: {
-    "^.+.tsx?$": ["ts-jest", {tsconfig: "<rootDir>/tsconfig.jest.json"}],
+    "^.+.tsx?$": ["ts-jest", {tsconfig: "<rootDir>/tsconfig.jest.json"}]
   }
 }

jest.resolver.cjs

@@ -10,4 +10,4 @@ module.exports = function (request, options) {
   }
 
   return resolver(options.basedir, request)
-}
+}

package.json

@@ -27,11 +27,17 @@
   },
   "dependencies": {
     "@gooditworks/monitoring": "1.5.4",
+    "@tanstack/react-query": "^4.16.1",
+    "@trpc/client": "^10.1.0",
+    "@trpc/next": "^10.1.0",
+    "@trpc/react-query": "^10.1.0",
+    "@trpc/server": "^10.1.0",
     "classnames": "2.3.2",
     "next": "13.0.4",
     "next-axiom": "0.15.1",
     "react": "18.2.0",
-    "react-dom": "18.2.0"
+    "react-dom": "18.2.0",
+    "zod": "^3.19.1"
   },
   "devDependencies": {
     "@arkweid/lefthook": "0.7.7",

src/components/Counter/Counter.test.tsx

@@ -1,4 +1,3 @@
-import React from "react"
 import {render} from "@testing-library/react"
 
 import Counter from "./Counter"

src/components/Counter/Counter.tsx

@@ -1,5 +1,3 @@
-import React from "react"
-
 interface Props {
   value: number
   onIncrement: () => void

src/datasources/trpc.ts

@@ -0,0 +1,34 @@
+import {httpBatchLink} from "@trpc/client"
+import {createTRPCNext} from "@trpc/next"
+
+import type {AppRouter} from "server/routers"
+
+const getBaseUrl = () => {
+  if (typeof window !== "undefined") {
+    return ""
+  }
+
+  const vercelUrl = process.env.VERCEL_URL
+  const port = process.env.PORT ?? 3000
+
+  if (vercelUrl) {
+    return `https://${vercelUrl}`
+  }
+
+  return `http://localhost:${port}`
+}
+
+const trpc = createTRPCNext<AppRouter>({
+  ssr: true,
+  config({ctx}) {
+    const baseUrl = getBaseUrl()
+    const trpcUrl = `${baseUrl}/api/trpc`
+    const httpLink = httpBatchLink({url: trpcUrl})
+
+    return {
+      links: [httpLink]
+    }
+  }
+})
+
+export default trpc

src/pages/_app.tsx

@@ -1,5 +1,6 @@
 import {AppProps} from "next/app"
 
+import trpc from "datasources/trpc"
 import ErrorCapturer from "components/ErrorCapturer"
 
 import "styles/globals.css"
@@ -13,4 +14,4 @@ const App = ({Component, pageProps}: AppProps) => {
 }
 
 export {reportWebVitals} from "next-axiom"
-export default App
+export default trpc.withTRPC(App)

src/pages/api/trpc/[trpc].ts

@@ -0,0 +1,9 @@
+import * as trpcNext from "@trpc/server/adapters/next"
+
+import appRouter from "server/routers"
+import createContext from "server/context"
+
+export default trpcNext.createNextApiHandler({
+  router: appRouter,
+  createContext
+})

src/pages/example/counter.tsx

@@ -0,0 +1,20 @@
+import {FC} from "react"
+
+import useCounter from "hooks/useCounter"
+import Counter from "components/Counter"
+
+const CounterPage: FC = () => {
+  const {value, increment, decrement} = useCounter()
+
+  if (value === 42) {
+    throw new Error("counter value is 42!")
+  }
+
+  return (
+    <div className="w-screen h-screen flex items-center justify-center">
+      <Counter value={value} onIncrement={increment} onDecrement={decrement} />
+    </div>
+  )
+}
+
+export default CounterPage

src/pages/example/greeting.tsx

@@ -0,0 +1,48 @@
+import {ChangeEventHandler, FC, FormEventHandler, useState} from "react"
+
+import trpc from "datasources/trpc"
+
+const useGreetingName = trpc.greeting.greetName.useQuery
+
+const GreetingPage: FC = () => {
+  const [name, setName] = useState("")
+  const greeting = useGreetingName({name}, {enabled: false})
+
+  const onNameInputChange: ChangeEventHandler<HTMLInputElement> = ({target}) => {
+    setName(target.value)
+  }
+
+  const onSubmit: FormEventHandler<HTMLFormElement> = event => {
+    event.preventDefault()
+    greeting.refetch()
+  }
+
+  return (
+    <div className="w-screen h-screen flex flex-col items-center justify-center">
+      <form onSubmit={onSubmit}>
+        <input
+          value={name}
+          onChange={onNameInputChange}
+          type="text"
+          className="rounded-xl bg-slate-300 p-2"
+        />
+        <button
+          type="submit"
+          className="ml-4 rounded-xl text-white bg-slate-600 py-2 px-4"
+        >
+          Get greeting
+        </button>
+      </form>
+      {greeting.data && (
+        <div className="mt-4">
+          <h2 className="text-bold">{greeting.data.greeting}</h2>
+          {greeting.data.ip && (
+            <p className="asdsad">btw, your ip is {greeting.data.ip}</p>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default GreetingPage