{"_id":"@aziz-axg/hono-react-query","_rev":"2-52e7a75a0d2e97f5aba99a09d67a10ad","name":"@aziz-axg/hono-react-query","dist-tags":{"latest":"0.1.1"},"versions":{"0.1.0":{"name":"@aziz-axg/hono-react-query","version":"0.1.0","keywords":["hono","react-query","tanstack-query","rpc","trpc","typesafe"],"author":{"name":"Aziz-AXG"},"license":"MIT","_id":"@aziz-axg/hono-react-query@0.1.0","maintainers":[{"name":"aziz-axg","email":"azeezfalah200@gmail.com"}],"homepage":"https://github.com/Aziz-AXG/hono-react-query#readme","bugs":{"url":"https://github.com/Aziz-AXG/hono-react-query/issues"},"dist":{"shasum":"eb428a01054bbfb2f34d39db1ecbce1d80cd1025","tarball":"https://registry.npmjs.org/@aziz-axg/hono-react-query/-/hono-react-query-0.1.0.tgz","fileCount":17,"integrity":"sha512-h7Dgwgi2XOrB+sKc81ZOTI6myRKgZ9zy0xQ6+iabOK5Jil2Y1PbH9FcW+a6ndBCEjOYFE2gQTKZB0PdjBNqM+Q==","signatures":[{"sig":"MEUCIGjBUM3/pKzomG2HxOTx9BOBWhL6yo1CjngAMxbusTKkAiEAhV9BAM3dqWnSYF3RJ/C2Uk/VBvADzdK1f3OsqPBa3K4=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":130721},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"require":{"types":"./dist/index.d.cts","default":"./dist/index.cjs"}},"./server":{"import":{"types":"./dist/server.d.ts","default":"./dist/server.js"},"require":{"types":"./dist/server.d.cts","default":"./dist/server.cjs"}}},"gitHead":"350620e20f8f2c02655e11851d7f48c5b4d7fa23","scripts":{"dev":"tsup --watch","build":"tsup","typecheck":"tsc --noEmit"},"_npmUser":{"name":"aziz-axg","email":"azeezfalah200@gmail.com"},"repository":{"url":"git+https://github.com/Aziz-AXG/hono-react-query.git","type":"git"},"_npmVersion":"11.8.0","description":"tRPC-like React Query integration for Hono RPC","directories":{},"_nodeVersion":"24.13.1","_hasShrinkwrap":false,"devDependencies":{"hono":"^4.7.0","tsup":"^8.4.0","react":"^19.0.0","typescript":"^5.7.0","@types/react":"^19.0.0","@tanstack/react-query":"^5.64.0"},"peerDependencies":{"hono":">=4.0.0","react":">=18.0.0","@tanstack/react-query":">=5.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"@tanstack/react-query":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/hono-react-query_0.1.0_1772758479496_0.751686195467143","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@aziz-axg/hono-react-query","version":"0.1.1","description":"tRPC-like React Query integration for Hono RPC","repository":{"type":"git","url":"git+https://github.com/Aziz-AXG/hono-react-query.git"},"author":{"name":"Aziz-AXG"},"bugs":{"url":"https://github.com/Aziz-AXG/hono-react-query/issues"},"homepage":"https://github.com/Aziz-AXG/hono-react-query#readme","type":"module","main":"./dist/index.cjs","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"require":{"types":"./dist/index.d.cts","default":"./dist/index.cjs"}},"./server":{"import":{"types":"./dist/server.d.ts","default":"./dist/server.js"},"require":{"types":"./dist/server.d.cts","default":"./dist/server.cjs"}}},"scripts":{"build":"tsup","dev":"tsup --watch","typecheck":"tsc --noEmit"},"peerDependencies":{"@tanstack/react-query":">=5.0.0","hono":">=4.0.0","react":">=18.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"@tanstack/react-query":{"optional":true}},"devDependencies":{"@tanstack/react-query":"^5.64.0","@types/react":"^19.0.0","hono":"^4.7.0","react":"^19.0.0","tsup":"^8.4.0","typescript":"^5.7.0"},"keywords":["hono","react-query","tanstack-query","rpc","trpc","typesafe"],"license":"MIT","gitHead":"de0a06da27370beb30a10fa3cbab7a7e424f26d9","_id":"@aziz-axg/hono-react-query@0.1.1","_nodeVersion":"24.13.1","_npmVersion":"11.8.0","dist":{"integrity":"sha512-K6wVxZ1EysEn5RTBq9YVXFVanQUNlQ0aFIhV3OVCYngV7ad2Pmdwa/czo7ui7EBoGTv4v1IwFW7m4vrl+j/CxQ==","shasum":"8e5b3a88fed4501c6daa8533e21140795522aa13","tarball":"https://registry.npmjs.org/@aziz-axg/hono-react-query/-/hono-react-query-0.1.1.tgz","fileCount":17,"unpackedSize":130751,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDloq8E8W149KR25dMOiWE8F8lcsX7oHz/YcsSPFOJzmQIgIM1DAAo8pmcHNNMxUkZ2hgBLhStd4jfcNe0cTEBTUu0="}]},"_npmUser":{"name":"aziz-axg","email":"azeezfalah200@gmail.com"},"directories":{},"maintainers":[{"name":"aziz-axg","email":"azeezfalah200@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/hono-react-query_0.1.1_1772758856317_0.6993014501349266"},"_hasShrinkwrap":false}},"time":{"created":"2026-03-06T00:54:39.394Z","modified":"2026-03-06T01:00:56.584Z","0.1.0":"2026-03-06T00:54:39.652Z","0.1.1":"2026-03-06T01:00:56.477Z"},"bugs":{"url":"https://github.com/Aziz-AXG/hono-react-query/issues"},"author":{"name":"Aziz-AXG"},"license":"MIT","homepage":"https://github.com/Aziz-AXG/hono-react-query#readme","keywords":["hono","react-query","tanstack-query","rpc","trpc","typesafe"],"repository":{"type":"git","url":"git+https://github.com/Aziz-AXG/hono-react-query.git"},"description":"tRPC-like React Query integration for Hono RPC","maintainers":[{"name":"aziz-axg","email":"azeezfalah200@gmail.com"}],"readme":"# hono-react-query\r\n\r\nA lightweight, tRPC-like React Query integration specifically tailored for [Hono RPC](https://hono.dev/guides/rpc).\r\n\r\n`hono-react-query` brings the exceptional developer experience of end-to-end type safety to your React applications. By combining the speed of Hono for the backend and the power of TanStack Query (React Query) for data fetching, building full-stack applications has never been smoother.\r\n\r\n## Features\r\n\r\n- 🔒 **End-to-End Type Safety**: Share your Hono API types explicitly with your React frontend. Catch errors at compile-time instead of runtime.\r\n- 🚀 **tRPC-like DX**: Call your API routes as if they were local asynchronous functions using standard React Query hooks like `useQuery`, `useMutation`, and `useInfiniteQuery`.\r\n- ⚡ **First-class Hono Support**: Built efficiently to integrate transparently with `hono/rpc` and `hc`.\r\n- 🔋 **Next.js App Router Ready**: Includes full support for React Server Components directly out of the box with `createHonoQueryServer`.\r\n- 🚀 **Zero-latency SSR & SSG**: Configure the server API to bypass network requests natively for incredible Next.js static generation speeds using Hono's `app.request`.\r\n- 🪶 **Lightweight**: A minimal wrapper around TanStack Query, ensuring your bundle size remains small and performant.\r\n\r\n## Method Mapping\r\n\r\n`hono-react-query` intelligently maps standard Hono RPC HTTP methods into intuitive React Query hooks (client) and standard async functions (server).\r\n\r\n| Hono RPC   | hono-react-query Client | hono-react-query Server |\r\n| :--------- | :---------------------- | :---------------------- |\r\n| `.$get`    | `.useQuery`             | `.query`                |\r\n| `.$post`   | `.useMutation`          | `.mutate`               |\r\n| `.$put`    | `.usePut`               | `.$put`                 |\r\n| `.$patch`  | `.usePatch`             | `.$patch`               |\r\n| `.$delete` | `.useDelete`            | `.$delete`              |\r\n\r\n## Installation\r\n\r\nYou need to install `@aziz-axg/hono-react-query`, along with its peer dependencies: `hono` and `@tanstack/react-query`.\r\n\r\n```bash\r\n# npm\r\nnpm install @aziz-axg/hono-react-query @tanstack/react-query hono\r\n\r\n# pnpm\r\npnpm add @aziz-axg/hono-react-query @tanstack/react-query hono\r\n\r\n# yarn\r\nyarn add @aziz-axg/hono-react-query @tanstack/react-query hono\r\n```\r\n\r\n## Quick Start (Next.js App Router Example)\r\n\r\nHere is a full guide to integrating `hono-react-query` inside a Next.js application using the App Router.\r\n\r\n### 1. Set up your Hono Server\r\n\r\nFirst, define your Hono app, the routes context, and export its type definitions.\r\n\r\n```typescript\r\n// src/lib/server.ts\r\nimport { Hono } from \"hono\";\r\nimport { z } from \"zod\";\r\nimport { zValidator } from \"@hono/zod-validator\";\r\n\r\nconst app = new Hono().basePath(\"/api\");\r\n\r\nconst routes = app\r\n  .get(\r\n    \"/greeting\",\r\n    zValidator(\"query\", z.object({ name: z.string() })),\r\n    (c) => {\r\n      const { name } = c.req.valid(\"query\");\r\n      return c.json({\r\n        message: `Hello, ${name}!`,\r\n        timestamp: new Date().toISOString(),\r\n      });\r\n    },\r\n  )\r\n  .post(\r\n    \"/posts\",\r\n    zValidator(\"json\", z.object({ title: z.string(), body: z.string() })),\r\n    (c) => {\r\n      const { title, body } = c.req.valid(\"json\");\r\n      return c.json({ success: true, title, body }, 201);\r\n    },\r\n  );\r\n\r\nexport type AppType = typeof routes;\r\nexport default app;\r\n```\r\n\r\n### 2. Create the Client API (For Client Components)\r\n\r\nCreate a typed React Query client combining TanStack Query and standard `hc`. Our smart proxy abstracts away the HTTP methods when passing them into React Query!\r\n\r\n```typescript\r\n// src/lib/api.ts\r\nimport { hc } from \"hono/client\";\r\nimport { createHonoQuery } from \"@aziz-axg/hono-react-query\";\r\nimport type { AppType } from \"./server\";\r\n\r\nconst client = hc<AppType>(\"http://localhost:3000\");\r\n\r\n// Expose the React Query hooks\r\nexport const api = createHonoQuery(client.api);\r\n```\r\n\r\n### 3. Setup Providers\r\n\r\nWrap your application in the standard TanStack Query `QueryClientProvider`.\r\n\r\n```tsx\r\n// src/app/providers.tsx\r\n\"use client\";\r\n\r\nimport { useState } from \"react\";\r\nimport { QueryClient, QueryClientProvider } from \"@tanstack/react-query\";\r\n\r\nexport function Providers({ children }: { children: React.ReactNode }) {\r\n  const [queryClient] = useState(\r\n    () =>\r\n      new QueryClient({ defaultOptions: { queries: { staleTime: 5 * 1000 } } }),\r\n  );\r\n\r\n  return (\r\n    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>\r\n  );\r\n}\r\n```\r\n\r\n### 4. Create the Server API (For Server Components)\r\n\r\n`hono-react-query/server` safely extends Hono for fully typed server-side fetches. Ideal for Server Components, Server Actions, and API routes.\r\n\r\nFor the **ultimate** Next.js Server Component performance, we can configure our server client to pass `app.request` into `hc`'s `fetch` option. **This passes requests directly into Hono's memory**—completely bypassing network latency and allowing flawless Next.js Static Site Generation (SSG) at build time without needing a live development server running!\r\n\r\n```typescript\r\n// src/lib/server-api.ts\r\nimport { hc } from \"hono/client\";\r\nimport { createHonoQueryServer } from \"@aziz-axg/hono-react-query/server\";\r\nimport type { AppType } from \"./server\";\r\n// Import the actual Hono app definition\r\nimport app from \"./server\";\r\n\r\nconst client = hc<AppType>(\"http://localhost:3000\", {\r\n  // Pass the raw request locally to achieve 0ms network latency for SSR/SSG!\r\n  fetch: app.request,\r\n});\r\n\r\n// Expose standard async functions for server environments\r\nexport const serverApi = createHonoQueryServer(client.api);\r\n```\r\n\r\n### 5. Fetch your Data! (Client and Server)\r\n\r\nNow query and mutate your backend with perfect intellisense and streamlined syntax!\r\n\r\n**In a Server Component (using `query` and `mutate`):**\r\n\r\n```tsx\r\n// src/app/server-demo/page.tsx\r\nimport { serverApi } from \"@/lib/server-api\";\r\n\r\nexport default async function ServerDemoPage() {\r\n  // Executes on the server using the `.query()` method wrapper\r\n  const greeting = await serverApi.greeting.query({\r\n    query: { name: \"Server\" },\r\n  });\r\n\r\n  // Notice we use `.mutate()` instead of raw `.post()`\r\n  const newPost = await serverApi.posts.mutate({\r\n    json: { title: \"First Server Post\", body: \"Hello World\" },\r\n  });\r\n\r\n  return <h1>{greeting.message}</h1>;\r\n}\r\n```\r\n\r\n**In a Client Component (using `.useQuery` and `.useMutation` directly):**\r\n\r\n```tsx\r\n// src/components/ClientDemo.tsx\r\n\"use client\";\r\nimport { useState } from \"react\";\r\nimport { api } from \"@/lib/api\";\r\n\r\nexport function ClientDemoComponent() {\r\n  const [name, setName] = useState(\"World\");\r\n\r\n  // Directly use `.useQuery` on the route abstraction!\r\n  const greeting = api.greeting.useQuery({\r\n    query: { name },\r\n  });\r\n\r\n  // Directly use `.useMutation` for POST requests\r\n  const createPost = api.posts.useMutation({\r\n    onSuccess: (data) => console.log(\"Successfully posted!\", data),\r\n  });\r\n\r\n  // Additional methods are cleanly mapped!\r\n  // const updatePost = api.posts.usePut();\r\n  // const patchPost = api.posts.usePatch();\r\n  // const deletePost = api.posts.useDelete();\r\n\r\n  if (greeting.isLoading) return <div>Loading...</div>;\r\n\r\n  return (\r\n    <div>\r\n      <h1>Message: {greeting.data?.message}</h1>\r\n      <button\r\n        onClick={() =>\r\n          createPost.mutate({ json: { title: \"First Post\", body: \"...\" } })\r\n        }\r\n        disabled={createPost.isPending}\r\n      >\r\n        {createPost.isPending ? \"Creating...\" : \"Create Post\"}\r\n      </button>\r\n    </div>\r\n  );\r\n}\r\n```\r\n\r\n## Documentation & Examples\r\n\r\nFor a larger setup context or Next.js examples, feel free to dive into the [GitHub repository](https://github.com/Aziz-AXG/hono-react-query/tree/main/examples).\r\n\r\n## License\r\n\r\nMIT License. See [LICENSE](https://github.com/Aziz-AXG/hono-react-query/blob/main/LICENSE) for more information.\r\n","readmeFilename":"README.md"}