generate query
npm install hono-query``sh`
npm i hono-query
The "problem" now is that we need to write queryKeys and queryFunctions for all routes, as is done here. It seems cumbersome and redundant to add React Query helper functions for all routes when they are all available on the Hono client.
According to this comment this is missing to a few people and a selling point for tRPC over Hono RPC.
I tried to generate Tanstack queryKey, queryFn and queryOptions by reusing as much of the autocompletion that Hono client provides.
In your frontend code you can do the following:
`tsx
import { q } from "hono-query";
queryClient.fetchQuery(
q(
() => api.dashboard.deployments.user[":userId"].$get({ param: { userId } }), // the RPC endpoint you're targeting
{
keyComplement: [userId], // a complement you might want to add to the queryKey
retry: 5, // optionally pass any additional query options
retryDelay: 1000, // optionally pass any additional query options
staleTime: 5 * 1000, // optionally pass any additional query options}
}
)
);
`
and this will seamlessly generate the query key and function pair that you need when using React Query:
`tsx``
{
queryKey: [
"dashboard.deployments.user[\":userId\"].$get({ param: { userId } })", // The endpoint is turned into a function name using toString(), which is sometimes replacing variables by name, sometimes by value, I'm not sure exactly why or how
"6h8s62e7uppe4ee" // The keyComplement. This is dynamic (variables are passed by value, userId has been replaced by "6h8s62e7uppe4ee")
],
queryFn: async () => {
const res = await api.dashboard.deployments.user[":userId"].$get({ param: { userId } });
return (await res.json()) as InferResponseType
},
retry: 5, // optionally pass any additional query options
retryDelay: 1000, // optionally pass any additional query options
staleTime: 5 * 1000, // optionally pass any additional query options}
}