{"id":14156560,"url":"https://github.com/otahontas/trpc-rtk-query","last_synced_at":"2026-01-19T13:08:09.516Z","repository":{"id":175287613,"uuid":"653501254","full_name":"otahontas/trpc-rtk-query","owner":"otahontas","description":"Automatically generate RTK Query api endpoints from your tRPC setup","archived":false,"fork":false,"pushed_at":"2024-12-01T13:23:48.000Z","size":991,"stargazers_count":36,"open_issues_count":13,"forks_count":6,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-12-01T14:23:18.308Z","etag":null,"topics":["react","redux","redux-toolkit","rtk-query","trpc","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/otahontas.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-06-14T07:19:02.000Z","updated_at":"2024-12-01T13:22:39.000Z","dependencies_parsed_at":null,"dependency_job_id":"745f9286-753b-41b9-8c08-0610316f6f50","html_url":"https://github.com/otahontas/trpc-rtk-query","commit_stats":null,"previous_names":["otahontas/trpc-rtk-query"],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/otahontas%2Ftrpc-rtk-query","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/otahontas%2Ftrpc-rtk-query/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/otahontas%2Ftrpc-rtk-query/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/otahontas%2Ftrpc-rtk-query/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/otahontas","download_url":"https://codeload.github.com/otahontas/trpc-rtk-query/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228835538,"owners_count":17979162,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react","redux","redux-toolkit","rtk-query","trpc","typescript"],"created_at":"2024-08-17T08:06:26.225Z","updated_at":"2026-01-19T13:08:09.509Z","avatar_url":"https://github.com/otahontas.png","language":"TypeScript","funding_links":[],"categories":["typescript"],"sub_categories":[],"readme":"![trpc-rtk-query](assets/logo.png)\n\n\u003cdiv align=\"center\"\u003e\n  \u003ch1\u003etrpc-rtk-query\u003c/h1\u003e\n  \u003ca href=\"https://www.npmjs.com/package/trpc-rtk-query\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/trpc-rtk-query.svg?style=flat\u0026color=brightgreen\" target=\"_blank\" /\u003e\u003c/a\u003e\n  \u003ca href=\"./LICENSE\"\u003e\u003cimg src=\"https://img.shields.io/badge/license-MIT-black\" /\u003e\u003c/a\u003e\n  \u003cbr /\u003e\n\u003c/div\u003e\n\n#### `trpc-rtk-query` is the tool for automatically generating RTK Query api endpoints from your tRPC setup!\n\n\n---\n\n## **[RTK Query](https://redux-toolkit.js.org/rtk-query/overview) support for [tRPC](https://trpc.io/)** 🧩\n\n- Automatically generate **typesafe** `RTK Query hooks` (for react) from your `tRPC` procedures.\n- Perfect for incremental adoption.\n- Any feedback, issues, or pull requests are highly appreciated\n\n```typescript\n\nconst api = enhanceApi({\n  api: rtkApi, /* Your api created with rtk query */\n  client: trpcClient, /* 👈 The trpc magic happens when passing in the typed client ✨ */\n});\n\nexport { useUserListQuery } from api; // Automatically typed hooks thanks to the power of tRPC + RTK!\n```\n\n## Usage\n\n### Installation\n\n**1. Install `trpc-rtk-query` and peer dependencies.**\n\n```bash\n# npm\nnpm install trpc-rtk-query @reduxjs/toolkit @trpc/client @trpc/server\n# yarn\nyarn add trpc-rtk-query @reduxjs/toolkit @trpc/client @trpc/server\n```\n\nNote the minimum versions for packages, we only support trpc v10 and rtk query v2.\n\n**2. Use your `tRPC router`.**\n\n```typescript\n/* server.ts */\nimport { initTRPC } from \"@trpc/server\";\nimport { z } from \"zod\";\n\nimport { db as database } from \"./db\";\n\nconst t = initTRPC.create();\nexport const publicProcedure = t.procedure;\nconst appRouter = t.router({\n  userList: publicProcedure\n    .input(z.object({ showAll: z.boolean() })) // \u003c- type is { showAll: boolean }\n    .query(async () =\u003e {\n      // Retrieve users from a datasource, this is an imaginary database\n      return await database.user.findMany(); // \u003c- returns type User[]\n    }),\n});\nexport type AppRouter = typeof appRouter\n```\n\n**3. Create a new tRPC Client.**\n\nCreate your api [like normal](https://trpc.io/docs/client/vanilla):\n\n```typescript\n// client.ts\nconst client = createTRPCProxyClient\u003cAppRouter\u003e({\n  links: [\n    httpBatchLink({\n      url: 'http://localhost:3000/trpc',\n      // You can pass any HTTP headers you wish here\n      async headers() {\n        return {\n          authorization: getAuthCookie(),\n        };\n      },\n    }),\n  ],\n});\n\n```\n\n**4. Create a trpc-rtk query api.**\n\n```typescript\n// api.ts\nimport { createApi } from \"@reduxjs/toolkit/query/react\";\nimport { enhanceApi } from \"trpc-rtk-query\";\n\n// Use function provided by rtk to create your api\nconst rtkApi = createApi({\n  baseQuery: fetchBaseQuery({ baseUrl: \"/\" }),\n  endpoints: () =\u003e ({}),\n})\n\n// Enhance the api with hooks\nexport const api = enhanceApi({\n  client, // \u003c- typed client from step 3\n  api: rtkApi // \u003c- api from rtk\n  // pass in any endpoint specific options, such as providesTags or onQueryStarted for optimistic updates\n  endpointOptions: {\n    userList: {\n      providesTags: [\"User\"]\n    }\n  }\n});\n\nexport { useUserListQuery } from api; // \u003c- export your typed hooks!\n```\n\nYou can also use `createEmptyApi` helper function as follows:\n\n```typescript\n// api.ts\nimport { createEmptyApi, enhanceApi } from \"trpc-rtk-query\";\n\n// Enhance an empty api with hooks\nexport const api = enhanceApi({\n  client, // \u003c- typed client from step 3\n  api: createEmptyApi(), // \u003c- createEmptyApi generates base api without any endpoints.\n  // pass in any endpoint specific options, such as providesTags or onQueryStarted for optimistic updates\n  endpointOptions: {\n    userList: {\n      providesTags: [\"User\"]\n    }\n  }\n});\n\nexport { useUserListQuery } from api; // \u003c- export your typed hooks!\n\n**5. Add the typesafe API to the store.**\nThis is the same step as you would [normally do](https://redux-toolkit.js.org/rtk-query/overview).\n\n```typescript\n// store.ts\nimport { configureStore } from '@reduxjs/toolkit'\nimport { api } from './api.ts'\n\nexport const store = configureStore({\n  reducer: {\n    [api.reducerPath]: api.reducer,\n  },\n  middleware: (getDefaultMiddleware) =\u003e\n    getDefaultMiddleware().concat(api.middleware),\n})\n```\n\n**6. Enjoy type-safe hooks.**\n\n```typescript\n// app.ts\nimport { useUserListQuery } from \"./api.ts\"\nconst App = () =\u003e {\n  const { data, isLoading } = useUserListQuery({ showAll: true })\n  // ^ Use your generated hooks! They are fully typed based on your trpc router.\n  if (isLoading) return \u003cp\u003eLoading...\u003c/p\u003e\n  if (!data) return \u003cp\u003eNo data!\u003c/p\u003e\n  return \u003cp\u003e{JSON.strinfigy(data)}\u003c/p\u003e\n  //                         ^ type: User[]\n}\n```\n\n# Development status\n\nThis library is currently in the alpha stage. 0.x.x versions are being published to npm for people to try this out, but you shouldn't consider it ready for production anytime soon. See the [project status](https://github.com/users/otahontas/projects/2) for what's under development and planned to be done before first major 1.0.0 will be released.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fotahontas%2Ftrpc-rtk-query","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fotahontas%2Ftrpc-rtk-query","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fotahontas%2Ftrpc-rtk-query/lists"}