How much of of replacement is Hono RPC to trpc?

[inalbant]

Can I do everything that I can do with trpc with the Fetch adapter, using Hono?

[chrisyalamov]

It's not a drop-in replacement, but it's quite useful if you only need the core capabilities of tRPC.

Generally, query/mutation from tRPC would simply map to .$get/.$post with Hono's implementation.

A big difference that's personally stopped me from fully adopting Hono is that it doesn't support custom procedures in the way that tRPC would— e.g. having a publicProcedure, authenticatedProcedure, which encapsulate logic. However, I'm pretty sure it is possible to achieve this in Hono using middlewares.

Another thing to keep in mind is that Hono's RPC client library is more of a fetch wrapper, instead of something like tRPC's specific client libraries (e.g. the react query adapter).

[Blankeos]

What are the chances that we can make a react-query wrapper around Hono's fetch wrapper?

[vasyaqwe]

What are the chances that we can make a react-query wrapper around Hono's fetch wrapper?

I'd love to see this.. would be awesome

[yusukebe]

Hi. It's not the React Query, but SWR will work well: https://hono.dev/guides/rpc#using-swr

[oyal]

Hi. It's not the React Query, but SWR will work well: https://hono.dev/guides/rpc#using-swr你好。这不是 React Query，但 SWR 可以很好地工作： https://hono.dev/guides/rpc#using-swr

@yusukebe Hello, when using SWR, I returned a status code of 500, but the if (error) return <div>failed to load</div> was not executed. What could be the possible reason for this?

I have found a solution in the SWR document, Excuse me. https://swr.vercel.app/docs/error-handling#status-code-and-error-object

const client = hc<AppType>(process.env.NEXT_PUBLIC_API_URL!)
const $get = client.messages.$get
const fetcher = (arg: InferRequestType<typeof $get>) => async () => {
  const res = await $get(arg)
  return await res.json()
}

const { data, error, isLoading } = useSWR(
  'messages',
  fetcher({
    query: { page },
  }),
)

if (error) return <div>failed to load</div>
if (isLoading) return <div>loading...</div>