wip: неудачный переход на новый роутер Next 13 (tRPC еще не готов)

next.config.js

@@ -7,10 +7,14 @@ const sentryConfig = {
   silent: true
 }
 
+/** @type {import('next').NextConfig} */
 const config = {
   sentry: {
     disableServerWebpackPlugin: !isDeploy,
     disableClientWebpackPlugin: !isDeploy,
+  },
+  experimental: {
+    appDir: true
   }
 }
 

package.json

@@ -37,6 +37,7 @@
     "next-axiom": "0.15.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "superjson": "^1.11.0",
     "zod": "^3.19.1"
   },
   "devDependencies": {

src/app/error.tsx

@@ -0,0 +1,26 @@
+"use client"
+
+import {FC, useEffect} from "react"
+import {logger} from "@gooditworks/monitoring"
+
+type Props = {
+  error: Error
+}
+
+const ErrorPage: FC<Props> = ({error}) => {
+  useEffect(() => {
+    // eslint-disable-next-line no-console
+    console.error(error)
+
+    logger.captureException(error)
+  }, [error])
+
+  return (
+    <div>
+      <h2>Something went wrong!</h2>
+      <pre>{error.message}</pre>
+    </div>
+  )
+}
+
+export default ErrorPage

src/pages/example/counter.tsx → src/app/example/counter/page.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import {FC} from "react"
 
 import useCounter from "hooks/useCounter"

src/app/example/greeting/page.tsx

@@ -0,0 +1,11 @@
+import {FC} from "react"
+
+import Greeting from "components/Greeting"
+
+const GreetingPage: FC = () => (
+  <div>
+    <Greeting />
+  </div>
+)
+
+export default GreetingPage

src/app/layout.tsx

@@ -0,0 +1,15 @@
+import {FC, ReactNode} from "react"
+
+import {TRPCClientProvider} from "datasources/trpc"
+
+import "styles/globals.css"
+
+type Props = {
+  children: ReactNode
+}
+
+const RootLayout: FC<Props> = ({children}) => (
+  <TRPCClientProvider>{children}</TRPCClientProvider>
+)
+
+export default RootLayout

src/components/Counter/Counter.tsx

@@ -1,10 +1,12 @@
+import {FC} from "react"
+
 interface Props {
   value: number
   onIncrement: () => void
   onDecrement: () => void
 }
 
-const Counter = ({value, onIncrement, onDecrement}: Props) => (
+const Counter: FC<Props> = ({value, onIncrement, onDecrement}: Props) => (
   <div className="flex items-center space-x-8 text-5xl">
     <button onClick={onDecrement} type="button" data-test="counter_dec">
       -

src/pages/example/greeting.tsx → src/components/Greeting.tsx

@@ -1,10 +1,12 @@
+"use client"
+
 import {ChangeEventHandler, FC, FormEventHandler, useState} from "react"
 
 import trpc from "datasources/trpc"
 
 const useGreetingName = trpc.greeting.greetName.useQuery
 
-const GreetingPage: FC = () => {
+const Greeting: FC = () => {
   const [name, setName] = useState("")
   const greeting = useGreetingName({name}, {enabled: false})
 
@@ -14,6 +16,7 @@ const GreetingPage: FC = () => {
 
   const onSubmit: FormEventHandler<HTMLFormElement> = event => {
     event.preventDefault()
+
     greeting.refetch()
   }
 
@@ -45,4 +48,4 @@ const GreetingPage: FC = () => {
   )
 }
 
-export default GreetingPage
+export default Greeting

src/datasources/trpc.tsx

@@ -0,0 +1,66 @@
+"use client"
+
+// based on https://github.com/trpc/next-13/blob/main/client/trpcClient.tsx
+// TODO wait for complete Next 13 support in tRPC and migrate
+
+import {FC, ReactNode, useState} from "react"
+import {httpBatchLink} from "@trpc/client"
+import {createTRPCReact} from "@trpc/react-query"
+import {QueryClient, QueryClientProvider} from "@tanstack/react-query"
+import superjson from "superjson"
+
+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 = createTRPCReact<AppRouter>({
+  unstable_overrides: {
+    useMutation: {
+      async onSuccess(opts) {
+        await opts.originalFn()
+        await opts.queryClient.invalidateQueries()
+      }
+    }
+  }
+})
+
+type Props = {
+  children: ReactNode
+}
+
+const TRPCClientProvider: FC<Props> = ({children}) => {
+  const [queryClient] = useState(() => new QueryClient())
+  const [trpcClient] = useState(() => {
+    const baseUrl = getBaseUrl()
+    const trpcUrl = `${baseUrl}/api/trpc`
+
+    const links = [httpBatchLink({url: trpcUrl})]
+
+    return trpc.createClient({
+      transformer: superjson,
+      links
+    })
+  })
+
+  return (
+    <trpc.Provider client={trpcClient} queryClient={queryClient}>
+      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+    </trpc.Provider>
+  )
+}
+
+export default trpc
+export {TRPCClientProvider}