onError about trpc-on-the-app-router

[jherr]

That's not issue with the code in this repo. This is a generic question about how to use tRPC. My recommendation would be to either ask a question on the feedback channels provided by tRPC, or ask in the #react or #typescript channels of the Blue Collar Coder Discord server.

[colinricardo]

hmm

its not really a generic question

let me rephrase:

if you were to use the approach specifically endorsed in this repo

how would you deal with handling TRPC errors globally on the client side

given that with this approach you cant use onError from the createTRPCNext adapter? (since we are using createTRPCReact)

thanks for the recommendation -- i have asked a more generic form of the question here: trpc/trpc#4782

[colinricardo]

for when someone else has this issue:

this approach works well enough:

"use client"

import React, { useState } from "react"
import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
import { httpBatchLink } from "@trpc/client"
import { toast } from "sonner"

import CustomToast from "@/components/common/CustomToast"

import { trpc } from "./trpc-client"

interface IError {
  code: string
  message: string
}

export default ({ children }: { children: React.ReactNode }) => {
  const [queryClient] = useState(
    () =>
      new QueryClient({
        defaultOptions: {
          mutations: {
            onError: (error) => {
              const { code, message } = error as IError

              if (code === "BAD_REQUEST") {
                toast.custom((t) => (
                  <CustomToast
                    variant="error"
                    message={message}
                    key={t}
                    t={t}
                  />
                ))
              } else {
                toast.custom((t) => (
                  <CustomToast
                    variant="error"
                    message="Something went wrong."
                    key={t}
                    t={t}
                  />
                ))
              }
            },
          },
          queries: {
            onError: (error) => {
              const { code, message } = error as IError

              if (code === "BAD_REQUEST") {
                toast.custom((t) => (
                  <CustomToast
                    variant="error"
                    message={message}
                    key={t}
                    t={t}
                  />
                ))
              } else {
                toast.custom((t) => (
                  <CustomToast
                    variant="error"
                    message="Something went wrong."
                    key={t}
                    t={t}
                  />
                ))
              }
            },
          },
        },
      })
  )
  const [trpcClient] = useState(() =>
    trpc.createClient({
      links: [
        httpBatchLink({
          url: "http://localhost:3000/api/trpc",
        }),
      ],
    })
  )
  return (
    <trpc.Provider client={trpcClient} queryClient={queryClient}>
      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
    </trpc.Provider>
  )
}