{"id":14155532,"url":"https://github.com/icflorescu/trpc-transformer","last_synced_at":"2025-07-08T17:32:29.941Z","repository":{"id":43785312,"uuid":"457891303","full_name":"icflorescu/trpc-transformer","owner":"icflorescu","description":"A simple tRPC transformer based on superjson with decimal.js support","archived":false,"fork":false,"pushed_at":"2024-04-20T07:46:54.000Z","size":177,"stargazers_count":18,"open_issues_count":0,"forks_count":1,"subscribers_count":4,"default_branch":"main","last_synced_at":"2024-11-11T20:44:41.272Z","etag":null,"topics":["decimal","javascript","setup-tool","superjson","transformer","trpc","typescript"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"isc","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/icflorescu.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","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},"funding":{"github":"icflorescu"}},"created_at":"2022-02-10T18:01:13.000Z","updated_at":"2024-11-05T16:39:45.000Z","dependencies_parsed_at":"2023-01-22T00:50:12.919Z","dependency_job_id":"8d05908d-20b3-43ca-b863-4bf0ab1f8589","html_url":"https://github.com/icflorescu/trpc-transformer","commit_stats":{"total_commits":32,"total_committers":1,"mean_commits":32.0,"dds":0.0,"last_synced_commit":"b0c38b2d67cc59f7d102513e0818b5da007a4579"},"previous_names":[],"tags_count":18,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/icflorescu%2Ftrpc-transformer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/icflorescu%2Ftrpc-transformer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/icflorescu%2Ftrpc-transformer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/icflorescu%2Ftrpc-transformer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/icflorescu","download_url":"https://codeload.github.com/icflorescu/trpc-transformer/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225452402,"owners_count":17476563,"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":["decimal","javascript","setup-tool","superjson","transformer","trpc","typescript"],"created_at":"2024-08-17T08:03:47.709Z","updated_at":"2024-11-20T01:27:07.018Z","avatar_url":"https://github.com/icflorescu.png","language":"JavaScript","funding_links":["https://github.com/sponsors/icflorescu"],"categories":["typescript"],"sub_categories":[],"readme":"# ✨ tRPC-transformer\n\n[![NPM version][npm-image]][npm-url]\n[![License][license-image]][license-url]\n[![Downloads][downloads-image]][downloads-url]\n[![Sponsor the author][sponsor-image]][sponsor-url]\n\nA simple [tRPC](https://trpc.io) transformer combining [superjson](https://github.com/blitz-js/superjson) with [Decimal.js](https://mikemcl.github.io/decimal.js/).\n\n## Installation\n\n```bash\nyarn add trpc-transformer\n```\n\nor\n\n```bash\nnpm i trpc-transformer\n```\n\n## Usage\n\n1. Add it to your `initTRPC`:\n\n```ts\nimport { initTRPC } from '@trpc/server';\nimport transformer from 'trpc-transformer';\n\nexport const t = initTRPC.create({ transformer });\n```\n\n2. ...and to your tRPC client:\n\n```ts\nimport transformer from 'trpc-transformer';\n\nconst client = trpc.createClient({\n  links: [\n    httpBatchLink({\n      // ...\n      transformer,\n    }),\n  ],\n});\n```\n\n## Benefits\n\nAssuming you have an `appRouter.ts` like this on the server-side:\n\n```ts\nimport { initTRPC } from '@trpc/server';\nimport transformer from 'trpc-transformer';\nimport prisma from '~/lib/server/prisma';\n\nconst t = initTRPC.create({ transformer });\n\nexport const appRouter = t.router({\n  users: t.procedure.query(() =\u003e\n    prisma.user.findMany({\n      select: {\n        id: true,\n        name: true,\n        createdAt: true,\n        accounts: {\n          select: { iban: true, balance: true },\n        },\n      },\n    })\n  )\n});\n\nexport type AppRouter = typeof appRouter;\n```\n\n...then, you'll have your data **correctly** serialized/deserialized on the client-side:\n\n```tsx\nimport Decimal from 'decimal.js';\nimport { trpc } from '~/lib/client/trpc';\n\nconst usersQuery = trpc.users.useQuery();\n\nconsole.log('Account createdAt is Date:', usersQuery.data?.[0].createdAt instanceof Date); // 👈 true\nconsole.log('Account balance is Decimal.js:', usersQuery.data?.[0].accounts[0].balance instanceof Decimal); // 👈 true\n```\n\n\u003e [!NOTE]\n\u003e The above example assumes a [Next.js](https://nextjs.org) project with a `lib/client/trpc.ts` file like this:\n\n```ts\nimport { createTRPCReact } from '@trpc/react-query';\nimport type { AppRouter } from 'swapp.ro.server';\nexport const trpc = createTRPCReact\u003cAppRouter\u003e();\n```\n\n...and a `layout.tsx` file like this:\n\n```tsx\n'use client';\n\nimport { QueryClient, QueryClientProvider } from '@tanstack/react-query';\nimport { httpBatchLink } from '@trpc/client';\nimport { useState } from 'react';\nimport transformer from 'trpc-transformer';\nimport { trpc } from '~/lib/client/trpc';\n\nexport default function DynamicLayout({ children }: Readonly\u003c{ children: React.ReactNode }\u003e) {\n  const [queryClient] = useState(() =\u003e new QueryClient());\n  const [trpcClient] = useState(() =\u003e\n    trpc.createClient({\n      links: [\n        httpBatchLink({\n          url: 'your api url',\n          transformer,\n        }),\n      ],\n    })\n  );\n\n  return (\n    \u003ctrpc.Provider client={trpcClient} queryClient={queryClient}\u003e\n      \u003cQueryClientProvider client={queryClient}\u003e{children}\u003c/QueryClientProvider\u003e\n    \u003c/trpc.Provider\u003e\n  );\n}\n```\n\n\n## Learn more\n\nSee [trpc.io/docs/data-transformers](https://trpc.io/docs/data-transformers) and [github.com/blitz-js/superjson](https://github.com/blitz-js/superjson).\n\n## License\n\nThe [ISC License](https://github.com/icflorescu/trpc-transformer/blob/master/LICENSE).\n\n[npm-image]: https://img.shields.io/npm/v/trpc-transformer.svg?style=flat-square\n[npm-url]: https://npmjs.org/package/trpc-transformer\n[license-image]: http://img.shields.io/npm/l/trpc-transformer.svg?style=flat-square\n[license-url]: LICENSE\n[downloads-image]: http://img.shields.io/npm/dm/trpc-transformer.svg?style=flat-square\n[downloads-url]: https://npmjs.org/package/trpc-transformer\n[sponsor-image]: https://img.shields.io/badge/sponsor-violet?style=flat-square\n[sponsor-url]: https://github.com/sponsors/icflorescu\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ficflorescu%2Ftrpc-transformer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ficflorescu%2Ftrpc-transformer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ficflorescu%2Ftrpc-transformer/lists"}