c7b7609f.8acafaaf.js

js trpc.io collected 2026-10-02 02:28:06 UTC 38,655 bytes, 1 lines download raw bytes

1"use strict";(self.webpackChunkwww=self.webpackChunkwww||[]).push([["35760"],{59262(s,o,n){n.r(o),n.d(o,{metadata:()=>l,default:()=>d,frontMatter:()=>t,contentTitle:()=>p,toc:()=>i,assets:()=>r});var l=JSON.parse('{"id":"server/data-transformers","title":"Data Transformers","description":"You are able to serialize the response data & input args. The transformers need to be added both to the server and the client.","source":"@site/versioned_docs/version-9.x/server/data-transformers.md","sourceDirName":"server","slug":"/data-transformers","permalink":"/docs/v9/data-transformers","draft":false,"unlisted":false,"editUrl":"https://github.com/trpc/trpc/tree/main/www/versioned_docs/version-9.x/server/data-transformers.md","tags":[],"version":"9.x","frontMatter":{"id":"data-transformers","title":"Data Transformers","sidebar_label":"Data Transformers","slug":"/data-transformers"},"sidebar":"docs","previous":{"title":"Error Formatting","permalink":"/docs/v9/error-formatting"},"next":{"title":"Response Caching","permalink":"/docs/v9/caching"}}'),a=n(27968),e=n(77334);let t={id:"data-transformers",title:"Data Transformers",sidebar_label:"Data Transformers",slug:"/data-transformers"},p,r={}

1,i=[{value:"Using superjson",id:"using-superjson",level:2},{value:"How to",id:"how-to",level:3},{value:"1. Install",id:"1-install",level:4},{value:"2. Add to <code>createTRPCCLient()</code> or <code>withTRPC()</code> config",id:"2-add-to-createtrpcclient-or-withtrpc-config",level:4},{value:"3. Add to your <code>AppRouter</code>",id:"3-add-to-your-approuter",level:4},{value:"Different transformers for upload and download",id:"different-transformers-for-upload-and-download",level:2},{value:"How to",id:"how-to-1",level:3},{value:"1. Install",id:"1-install-1",level:4},{value:"2. Add to <code>utils/trpc.ts</code>",id:"2-add-to-utilstrpcts",level:4},{value:"3. Add to <code>createTRPCCLient()</code>",id:"3-add-to-createtrpcclient",level:4},{value:"4. Add to your <code>AppRouter</code>",id:"4-add-to-your-approuter",level:4},{value:"<code>DataTransformer</code> interface",id:"datatransformer-interface",level:2}];function c(s){let o={a:"a",code:"code",div:"div",h2:"h2",h3:"h3",h4:"h4",p:"p",...(0,e.R)(),...s.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(o.p,{children:"You are able to serialize the response data & input args. The transformers need to be added both to the server and the client."}),"\n",(0,a.jsxs)(o.h2,{id:"using-superjson",children:["Using ",(0,a.jsx)(o.a,{href:"https://github.com/blitz-js/superjson",children:"superjson"})]}),"\n",(0,a.jsxs)(o.p,{children:["SuperJSON allows us to transparently use e.g. standard ",(0,a.jsx)(o.code,{children:"Date"}),"/",(0,a.jsx)(o.code,{children:"Map"}),"/",(0,a.jsx)(o.code,{children:"Set"}),"s over the wire between the server and client. That means you can return any of these types in your API-resolver and use them in the client without recreating the objects from JSON."]}),"\n",(0,a.jsx)(o.h3,{id:"how-to",children:"How to"}),"\n",(0,a.jsx)(o.h4,{id:"1-install",children:"1. Install"}),"\n",(0,a.jsx)(o.div,{dangerouslySetInnerHTML:{__html:'<pre class="shiki min-light" style="background-color: #ffffff; color: #24292eff"><div class="language-id">bash</div><div class=\'code-container\'><code><div class=\'line\'><span style="color: #24292EFF">yarn add superjson</span></div></code></div><button type="button" aria-label="Copy code to clipboard" class="copy-button" onclick="navigator.clipboard.writeText(this.previousSibling.innerText);this.classList.add(\'copied\');this.textContent = \'Copied\';setTimeout(() => {this.classList.remove(\'copied\');this.textContent = \'Copy\'}, 2000)">Copy</button></pre>\n<pre class="shiki github-dark" style="background-color: #0d1117; color: #c9d1d9"><div class="language-id">bash</div><div class=\'code-container\'><code><div class=\'line\'><span style="color: #C9D1D9">yarn add superjson</span></div></code></div><button type="button" aria-label="Copy code to clipboard" class="copy-button" onclick="navigator.clipboard.writeText(this.previousSibling.innerText);this.classList.add(\'copied\');this.textContent = \'Copied\';setTimeout(() => {this.classList.remove(\'copied\');this.textContent = \'Copy\'}, 2000)">Copy</button></pre>'}}),"\n",(0,a.jsxs)(o.h4,{id:"2-add-to-createtrpcclient-or-withtrpc-config",children:["2. Add to ",(0,a.jsx)(o.code,{children:"createTRPCCLient()"})," or ",(0,a.jsx)(o.code,{children:"withTRPC()"})," config"]}),"\n",(0,a.jsx)(o.div,{dangerouslySetInnerHTML:{__html:'<pre class="shiki min-light with-title" style="background-color: #ffffff; color: #24292eff" title="client.ts"><div class=\'code-title\'>client.ts</div><div class="language-id">ts</div><div class=\'code-container\'><code><div class=\'line\'><span style="color: #D32F2F">import</span><span style="color: #24292EFF"> superjson </span><span style="color: #D32F2F">from</span><span style="color: #24292EFF"> </span><span style="color: #22863A">\'superjson\'</span><span style="color: #24292EFF">;</span></div><div class=\'line\'></div><div class=\'line\'><span style="color: #C2C3C5">// [...]</span></div><div class=\'line\'></div><div class=\'line\'><span style="color: #D32F2F">export</span><span style="color: #24292EFF"> </span><span style="color: #D32F2F">const</span><span style="color: #24292EFF"> </span><span style="color: #1976D2">client</span><span style="color: #24292EFF"> </span><span style="color: #D32F2F">=</span><span style="color: #24292EFF"> </span><span style="color: #6F42C1">createTRPCClient</span><span style="color: #24292EFF">&lt;</span><span style="color: #6F42C1">AppRouter</span><span style="color: #24292EFF">&gt;({</span></div><div class=\'line\'><span style="color: #24292EFF">  </span><span style="color: #C2C3C5">// [...]</span></div><div class=\'line\'><span style="color: #24292EFF">  transformer</span><span style="color: #D32F2F">:</span><span style="color: #24292EFF"> superjson</span><span style="color: #212121">,</span></div><div class=\'line\'><span style="color: #24292EFF">});

1</span></div></code></div><button type="button" aria-label="Copy code to clipboard" class="copy-button" onclick="navigator.clipboard.writeText(this.previousSibling.innerText);this.classList.add(\'copied\');this.textContent = \'Copied\';setTimeout(() => {this.classList.remove(\'copied\');this.textContent = \'Copy\'}, 2000)">Copy</button></pre>\n<pre class="shiki github-dark with-title" style="background-color: #0d1117; color: #c9d1d9" title="client.ts"><div class=\'code-title\'>client.ts</div><div class="language-id">ts</div><div class=\'code-container\'><code><div class=\'line\'><span style="color: #FF7B72">import</span><span style="color: #C9D1D9"> superjson </span><span style="color: #FF7B72">from</span><span style="color: #C9D1D9"> </span><span style="color: #A5D6FF">\'superjson\'</span><span style="color: #C9D1D9">;</span></div><div class=\'line\'></div><div class=\'line\'><span style="color: #8B949E">// [...]</span></div><div class=\'line\'></div><div class=\'line\'><span style="color: #FF7B72">export</span><span style="color: #C9D1D9"> </span><span style="color: #FF7B72">const</span><span style="color: #C9D1D9"> </span><span style="color: #79C0FF">client</span><span style="color: #C9D1D9"> </span><span style="color: #FF7B72">=</span><span style="color: #C9D1D9"> </span><span style="color: #D2A8FF">createTRPCClient</span><span style="color: #C9D1D9">&lt;</span><span style="color: #FFA657">AppRouter</span><span style="color: #C9D1D9">&gt;({</span></div><div class=\'line\'><span style="color: #C9D1D9">  </span><span style="color: #8B949E">// [...]</span></div><div class=\'line\'><span style="color: #C9D1D9">  transformer: superjson,</span></div><div class=\'line\'><span style="color: #C9D1D9">});</span></div></code></div><button type="button" aria-label="Copy code to clipboard" class="copy-button" onclick="navigator.clipboard.writeText(this.previousSibling.innerText);this.classList.add(\'copied\');this.textContent = \'Copied\';setTimeout(() => {this.classList.remove(\'copied\');this.textContent = \'Copy\'}, 2000)">Copy</button></pre>'}}),"\n",(0,a.jsx)(o.div,{dangerouslySetInnerHTML:{__html:'<pre class="shiki min-light with-title" style="background-color: #ffffff; color: #24292eff" title="pages/_app.tsx"><div class=\'code-title\'>pages/_app.tsx</div><div class="language-id">ts</div><div class=\'code-container\'><code><div class=\'line\'><span style="color: #D32F2F">import</span><span style="color: #24292EFF"> superjson </span><span style="color: #D32F2F">from</span><span style="color: #24292EFF"> </span><span style="color: #22863A">\'superjson\'</span><span style="color: #24292EFF">;</span></div><div class=\'line\'></div><div class=\'line\'><span style="color: #C2C3C5">// [...]</span></div><div class=\'line\'></div><div class=\'line\'><span style="color: #D32F2F">export</span><span style="color: #24292EFF"> </span><span style="color: #D32F2F">default</span><span style="color: #24292EFF"> </span><span style="color: #6F42C1">withTRPC</span><span style="color: #24292EFF">&lt;</span><span style="color: #6F42C1">AppRouter</span><span style="color: #24292EFF">&gt;({</span></div><div class=\'line\'><span style="color: #24292EFF">  </span><span style="color: #6F42C1">config</span><span style="color: #24292EFF">(config) {</span></div><div class=\'line\'><span style="color: #24292EFF">    </span><span style="color: #D32F2F">return</span><span style="color: #24292EFF"> {</span></div><div class=\'line\'><span style="color: #24292EFF">      </span><span style="color: #C2C3C5">// [...]</span></div><div class=\'line\'><span style="color: #24292EFF">      transformer</span><span style="color: #D32F2F">:</span><span style="color: #24292EFF"> superjson</span><span style="color: #212121">,</span></div><div class=\'line\'><span style="color: #24292EFF">    };</span></div><div class=\'line\'><span style="color: #24292EFF">  }</span><span style="color: #212121">,</span></div><div class=\'line\'><span style="color: #24292EFF">})(MyApp);</span></div></code></div><button type="button" aria-label="Copy code to clipboard" class="copy-button" onclick="navigator.clipboard.writeText(this.previousSibling.innerText);this.classList.add(\'copied\');this.textContent = \'Copied\';setTimeout(() => {this.classList.remove(\'copied\');this.textContent = \'Copy\'}, 2000)">Copy</button></pre>\n<pre class="shiki github-dark with-title" style="background-color: #0d1117; color: #c9d1d9" title="pages/_app.tsx"><div class=\'code-title\'>pages/_app.tsx</div><div class="language-id">ts</div><div class=\'code-container\'><code><div class=\'line\'><span style="color: #FF7B72">

1import</span><span style="color: #C9D1D9"> superjson </span><span style="color: #FF7B72">from</span><span style="color: #C9D1D9"> </span><span style="color: #A5D6FF">\'superjson\'</span><span style="color: #C9D1D9">;</span></div><div class=\'line\'></div><div class=\'line\'><span style="color: #8B949E">// [...]</span></div><div class=\'line\'></div><div class=\'line\'><span style="color: #FF7B72">export</span><span style="color: #FFA657"> </span><span style="color: #FF7B72">default</span><span style="color: #FFA657"> </span><span style="color: #D2A8FF">withTRPC</span><span style="color: #FFA657">&lt;AppRouter&gt;({</span></div><div class=\'line\'><span style="color: #FFA657">  </span><span style="color: #D2A8FF">config</span><span style="color: #FFA657">(config) </span><span style="color: #C9D1D9">{</span></div><div class=\'line\'><span style="color: #C9D1D9">    </span><span style="color: #FF7B72">return</span><span style="color: #C9D1D9"> {</span></div><div class=\'line\'><span style="color: #C9D1D9">      </span><span style="color: #8B949E">// [...]</span></div><div class=\'line\'><span style="color: #C9D1D9">      transformer: superjson,</span></div><div class=\'line\'><span style="color: #C9D1D9">    };</span></div><div class=\'line\'><span style="color: #C9D1D9">  }</span><span style="color: #FFA657">,</span></div><div class=\'line\'><span style="color: #FFA657">})(</span><span style="color: #C9D1D9">MyApp</span><span style="color: #FFA657">)</span><span style="color: #C9D1D9">;</span></div></code></div><button type="button" aria-label="Copy code to clipboard" class="copy-button" onclick="navigator.clipboard.writeText(this.previousSibling.innerText);this.classList.add(\'copied\');this.textContent = \'Copied\';setTimeout(() => {this.classList.remove(\'copied\');this.textContent = \'Copy\'}, 2000)">Copy</button></pre>'}}),"\n",(0,a.jsxs)(o.h4,{id:"3-add-to-your-approuter",children:["3. Add to your ",(0,a.jsx)(o.code,{children:"AppRouter"})]}),"\n",(0,a.jsx)(o.div,{dangerouslySetInnerHTML:{__html:'<pre class="shiki min-light with-title" style="background-color: #ffffff; color: #24292eff" title="server/routers/_app.ts"><div class=\'code-title\'>server/routers/_app.ts</div><div class="language-id">ts</div><div class=\'code-container\'><code><div class=\'line\'><span style="color: #D32F2F">import</span><span style="color: #24292EFF"> </span><span style="color: #1976D2">*</span><span style="color: #24292EFF"> </span><span style="color: #D32F2F">as</span><span style="color: #24292EFF"> trpc </span><span style="color: #D32F2F">from</span><span style="color: #24292EFF"> </span><span style="color: #22863A">\'@trpc/server\'</span><span style="color: #24292EFF">;</span></div><div class=\'line\'><span style="color: #D32F2F">import</span><span style="color: #24292EFF"> superjson </span><span style="color: #D32F2F">from</span><span style="color: #24292EFF"> </span><span style="color: #22863A">\'superjson\'</span><span style="color: #24292EFF">;</span></div><div class=\'line\'></div><div class=\'line\'><span style="color: #D32F2F">export</span><span style="color: #24292EFF"> </span><span style="color: #D32F2F">const</span><span style="color: #24292EFF"> </span><span style="color: #1976D2">appRouter</span><span style="color: #24292EFF"> </span><span style="color: #D32F2F">=</span><span style="color: #24292EFF"> </span><span style="color: #1976D2">trpc</span><span style="color: #6F42C1">.router</span><span style="color: #24292EFF">()</span><span style="color: #6F42C1">.transformer</span><span style="color: #24292EFF">(superjson);</span></div><div class=\'line\'><span style="color: #C2C3C5">// .query(...)</span></div></code></div><button type="button" aria-label="Copy code to clipboard" class="copy-button" onclick="navigator.clipboard.writeText(this.previousSibling.innerText);this.classList.add(\'copied\');this.textContent = \'Copied\';setTimeout(() => {this.classList.remove(\'copied\');this.textContent = \'Copy\'}, 2000)">Copy</button></pre>\n<pre class="shiki github-dark with-title" style="background-color: #0d1117; color: #c9d1d9" title="server/routers/_app.ts"><div class=\'code-title\'>server/routers/_app.ts</div><div class="language-id">ts</div><div class=\'code-container\'><code><div class=\'line\'><span style="color: #FF7B72">

1import</span><span style="color: #C9D1D9"> </span><span style="color: #79C0FF">*</span><span style="color: #C9D1D9"> </span><span style="color: #FF7B72">as</span><span style="color: #C9D1D9"> trpc </span><span style="color: #FF7B72">from</span><span style="color: #C9D1D9"> </span><span style="color: #A5D6FF">\'@trpc/server\'</span><span style="color: #C9D1D9">;</span></div><div class=\'line\'><span style="color: #FF7B72">import</span><span style="color: #C9D1D9"> superjson </span><span style="color: #FF7B72">from</span><span style="color: #C9D1D9"> </span><span style="color: #A5D6FF">\'superjson\'</span><span style="color: #C9D1D9">;</span></div><div class=\'line\'></div><div class=\'line\'><span style="color: #FF7B72">export</span><span style="color: #C9D1D9"> </span><span style="color: #FF7B72">const</span><span style="color: #C9D1D9"> </span><span style="color: #79C0FF">appRouter</span><span style="color: #C9D1D9"> </span><span style="color: #FF7B72">=</span><span style="color: #C9D1D9"> trpc.</span><span style="color: #D2A8FF">router</span><span style="color: #C9D1D9">().</span><span style="color: #D2A8FF">transformer</span><span style="color: #C9D1D9">(superjson);</span></div><div class=\'line\'><span style="color: #8B949E">// .query(...)</span></div></code></div><button type="button" aria-label="Copy code to clipboard" class="copy-button" onclick="navigator.clipboard.writeText(this.previousSibling.innerText);this.classList.add(\'copied\');this.textContent = \'Copied\';setTimeout(() => {this.classList.remove(\'copied\');this.textContent = \'Copy\'}, 2000)">Copy</button></pre>'}}),"\n",(0,a.jsx)(o.h2,{id:"different-transformers-for-upload-and-download",children:"Different transformers for upload and download"}),"\n",(0,a.jsx)(o.p,{children:"If a transformer should only be used for one direction or different transformers should be used for upload and download (e.g. for performance reasons), you can provide individual transformers for upload and download. Make sure you use the same combined transformer everywhere."}),"\n",(0,a.jsx)(o.h3,{id:"how-to-1",children:"How to"}),"\n",(0,a.jsxs)(o.p,{children:["Here ",(0,a.jsx)(o.a,{href:"https://github.com/blitz-js/superjson",children:"superjson"})," is used for uploading and ",(0,a.jsx)(o.a,{href:"https://github.com/Rich-Harris/devalue",children:"devalue"})," for downloading data, because devalue is a lot faster but insecure to use on the server."]}),"\n",(0,a.jsx)(o.h4,{id:"1-install-1",children:"1. Install"}),"\n",(0,a.jsx)(o.div,{dangerouslySetInnerHTML:{__html:'<pre class="shiki min-light" style="background-color: #ffffff; color: #24292eff"><div class="language-id">bash</div><div class=\'code-container\'><code><div class=\'line\'><span style="color: #24292EFF">yarn add superjson devalue</span></div></code></div><button type="button" aria-label="Copy code to clipboard" class="copy-button" onclick="navigator.clipboard.writeText(this.previousSibling.innerText);this.classList.add(\'copied\');this.textContent = \'Copied\';setTimeout(() => {this.classList.remove(\'copied\');this.textContent = \'Copy\'}, 2000)">Copy</button></pre>\n<pre class="shiki github-dark" style="background-color: #0d1117; color: #c9d1d9"><div class="language-id">bash</div><div class=\'code-container\'><code><div class=\'line\'><span style="color: #C9D1D9">yarn add superjson devalue</span></div></code></div><button type="button" aria-label="Copy code to clipboard" class="copy-button" onclick="navigator.clipboard.writeText(this.previousSibling.innerText);this.classList.add(\'copied\');this.textContent = \'Copied\';setTimeout(() => {this.classList.remove(\'copied\');this.textContent = \'Copy\'}, 2000)">Copy</button></pre>'}}),"\n",(0,a.jsxs)(o.h4,{id:"2-add-to-utilstrpcts",children:["2. Add to ",(0,a.jsx)(o.code,{children:"utils/trpc.ts"})]}),"\n",(0,a.jsx)(o.div,{dangerouslySetInnerHTML:{__html:'<pre class="shiki min-light with-title" style="background-color: #ffffff; color: #24292eff" title="utils/trpc.ts"><div class=\'code-title\'>utils/trpc.ts</div><div class="language-id">ts</div><div class=\'code-container\'><code><div class=\'line\'><span style="color: #D32F2F">

1import</span><span style="color: #24292EFF"> { uneval } </span><span style="color: #D32F2F">from</span><span style="color: #24292EFF"> </span><span style="color: #22863A">\'devalue\'</span><span style="color: #24292EFF">;</span></div><div class=\'line\'><span style="color: #D32F2F">import</span><span style="color: #24292EFF"> superjson </span><span style="color: #D32F2F">from</span><span style="color: #24292EFF"> </span><span style="color: #22863A">\'superjson\'</span><span style="color: #24292EFF">;</span></div><div class=\'line\'></div><div class=\'line\'><span style="color: #C2C3C5">// [...]</span></div><div class=\'line\'></div><div class=\'line\'><span style="color: #D32F2F">export</span><span style="color: #24292EFF"> </span><span style="color: #D32F2F">const</span><span style="color: #24292EFF"> </span><span style="color: #1976D2">transformer</span><span style="color: #24292EFF"> </span><span style="color: #D32F2F">=</span><span style="color: #24292EFF"> {</span></div><div class=\'line\'><span style="color: #24292EFF">  input</span><span style="color: #D32F2F">:</span><span style="color: #24292EFF"> superjson</span><span style="color: #212121">,</span></div><div class=\'line\'><span style="color: #24292EFF">  output</span><span style="color: #D32F2F">:</span><span style="color: #24292EFF"> {</span></div><div class=\'line\'><span style="color: #24292EFF">    </span><span style="color: #6F42C1">serialize</span><span style="color: #D32F2F">:</span><span style="color: #24292EFF"> (object) </span><span style="color: #D32F2F">=&gt;</span><span style="color: #24292EFF"> </span><span style="color: #6F42C1">uneval</span><span style="color: #24292EFF">(object)</span><span style="color: #212121">,</span></div><div class=\'line\'><span style="color: #24292EFF">    </span><span style="color: #6F42C1">deserialize</span><span style="color: #D32F2F">:</span><span style="color: #24292EFF"> (object) </span><span style="color: #D32F2F">=&gt;</span><span style="color: #24292EFF"> </span><span style="color: #6F42C1">eval</span><span style="color: #24292EFF">(</span><span style="color: #22863A">`(</span><span style="color: #D32F2F">${</span><span style="color: #24292EFF">object</span><span style="color: #D32F2F">}</span><span style="color: #22863A">)`</span><span style="color: #24292EFF">)</span><span style="color: #212121">,</span></div><div class=\'line\'><span style="color: #24292EFF">  }</span><span style="color: #212121">,</span></div><div class=\'line\'><span style="color: #24292EFF">};</span></div></code></div><button type="button" aria-label="Copy code to clipboard" class="copy-button" onclick="navigator.clipboard.writeText(this.previousSibling.innerText);this.classList.add(\'copied\');this.textContent = \'Copied\';setTimeout(() => {this.classList.remove(\'copied\');this.textContent = \'Copy\'}, 2000)">Copy</button></pre>\n<pre class="shiki github-dark with-title" style="background-color: #0d1117; color: #c9d1d9" title="utils/trpc.ts"><div class=\'code-title\'>utils/trpc.ts</div><div class="language-id">ts</div><div class=\'code-container\'><code><div class=\'line\'><span style="color: #FF7B72">import</span><span style="color: #C9D1D9"> { uneval } </span><span style="color: #FF7B72">from</span><span style="color: #C9D1D9"> </span><span style="color: #A5D6FF">\'devalue\'</span><span style="color: #C9D1D9">;</span></div><div class=\'line\'><span style="color: #FF7B72">import</span><span style="color: #C9D1D9"> superjson </span><span style="color: #FF7B72">from</span><span style="color: #C9D1D9"> </span><span style="color: #A5D6FF">\'superjson\'</span><span style="color: #C9D1D9">;</span></div><div class=\'line\'></div><div class=\'line\'><span style="color: #8B949E">// [...]</span></div><div class=\'line\'></div><div class=\'line\'><span style="color: #FF7B72">export</span><span style="color: #C9D1D9"> </span><span style="color: #FF7B72">const</span><span style="color: #C9D1D9"> </span><span style="color: #79C0FF">transformer</span><span style="color: #C9D1D9"> </span><span style="color: #FF7B72">=</span><span style="color: #C9D1D9"> {</span></div><div class=\'line\'><span style="color: #C9D1D9">

1  input: superjson,</span></div><div class=\'line\'><span style="color: #C9D1D9">  output: {</span></div><div class=\'line\'><span style="color: #C9D1D9">    </span><span style="color: #D2A8FF">serialize</span><span style="color: #C9D1D9">: (</span><span style="color: #FFA657">object</span><span style="color: #C9D1D9">) </span><span style="color: #FF7B72">=&gt;</span><span style="color: #C9D1D9"> </span><span style="color: #79C0FF">uneval</span><span style="color: #C9D1D9">(object),</span></div><div class=\'line\'><span style="color: #C9D1D9">    </span><span style="color: #D2A8FF">deserialize</span><span style="color: #C9D1D9">: (</span><span style="color: #FFA657">object</span><span style="color: #C9D1D9">) </span><span style="color: #FF7B72">=&gt;</span><span style="color: #C9D1D9"> </span><span style="color: #79C0FF">eval</span><span style="color: #C9D1D9">(</span><span style="color: #A5D6FF">`(${</span><span style="color: #C9D1D9">object</span><span style="color: #A5D6FF">})`</span><span style="color: #C9D1D9">),</span></div><div class=\'line\'><span style="color: #C9D1D9">  },</span></div><div class=\'line\'><span style="color: #C9D1D9">};</span></div></code></div><button type="button" aria-label="Copy code to clipboard" class="copy-button" onclick="navigator.clipboard.writeText(this.previousSibling.innerText);this.classList.add(\'copied\');this.textContent = \'Copied\';setTimeout(() => {this.classList.remove(\'copied\');this.textContent = \'Copy\'}, 2000)">Copy</button></pre>'}}),"\n",(0,a.jsxs)(o.h4,{id:"3-add-to-createtrpcclient",children:["3. Add to ",(0,a.jsx)(o.code,{children:"createTRPCCLient()"})]}),"\n",(0,a.jsx)(o.div,{dangerouslySetInnerHTML:{__html:'<pre class="shiki min-light with-title" style="background-color: #ffffff; color: #24292eff" title="client.ts"><div class=\'code-title\'>client.ts</div><div class="language-id">ts</div><div class=\'code-container\'><code><div class=\'line\'><span style="color: #D32F2F">import</span><span style="color: #24292EFF"> { transformer } </span><span style="color: #D32F2F">from</span><span style="color: #24292EFF"> </span><span style="color: #22863A">\'../utils/trpc\'</span><span style="color: #24292EFF">;</span></div><div class=\'line\'></div><div class=\'line\'><span style="color: #C2C3C5">// [...]</span></div><div class=\'line\'></div><div class=\'line\'><span style="color: #D32F2F">export</span><span style="color: #24292EFF"> </span><span style="color: #D32F2F">const</span><span style="color: #24292EFF"> </span><span style="color: #1976D2">client</span><span style="color: #24292EFF"> </span><span style="color: #D32F2F">=</span><span style="color: #24292EFF"> </span><span style="color: #6F42C1">createTRPCClient</span><span style="color: #24292EFF">&lt;</span><span style="color: #6F42C1">AppRouter</span><span style="color: #24292EFF">&gt;({</span></div><div class=\'line\'><span style="color: #24292EFF">  </span><span style="color: #C2C3C5">// [...]</span></div><div class=\'line\'><span style="color: #24292EFF">  transformer</span><span style="color: #D32F2F">:</span><span style="color: #24292EFF"> transformer</span><span style="color: #212121">,</span></div><div class=\'line\'><span style="color: #24292EFF">});

1</span></div></code></div><button type="button" aria-label="Copy code to clipboard" class="copy-button" onclick="navigator.clipboard.writeText(this.previousSibling.innerText);this.classList.add(\'copied\');this.textContent = \'Copied\';setTimeout(() => {this.classList.remove(\'copied\');this.textContent = \'Copy\'}, 2000)">Copy</button></pre>\n<pre class="shiki github-dark with-title" style="background-color: #0d1117; color: #c9d1d9" title="client.ts"><div class=\'code-title\'>client.ts</div><div class="language-id">ts</div><div class=\'code-container\'><code><div class=\'line\'><span style="color: #FF7B72">import</span><span style="color: #C9D1D9"> { transformer } </span><span style="color: #FF7B72">from</span><span style="color: #C9D1D9"> </span><span style="color: #A5D6FF">\'../utils/trpc\'</span><span style="color: #C9D1D9">;</span></div><div class=\'line\'></div><div class=\'line\'><span style="color: #8B949E">// [...]</span></div><div class=\'line\'></div><div class=\'line\'><span style="color: #FF7B72">export</span><span style="color: #C9D1D9"> </span><span style="color: #FF7B72">const</span><span style="color: #C9D1D9"> </span><span style="color: #79C0FF">client</span><span style="color: #C9D1D9"> </span><span style="color: #FF7B72">=</span><span style="color: #C9D1D9"> </span><span style="color: #D2A8FF">createTRPCClient</span><span style="color: #C9D1D9">&lt;</span><span style="color: #FFA657">AppRouter</span><span style="color: #C9D1D9">&gt;({</span></div><div class=\'line\'><span style="color: #C9D1D9">  </span><span style="color: #8B949E">// [...]</span></div><div class=\'line\'><span style="color: #C9D1D9">  transformer: transformer,</span></div><div class=\'line\'><span style="color: #C9D1D9">});</span></div></code></div><button type="button" aria-label="Copy code to clipboard" class="copy-button" onclick="navigator.clipboard.writeText(this.previousSibling.innerText);this.classList.add(\'copied\');this.textContent = \'Copied\';setTimeout(() => {this.classList.remove(\'copied\');this.textContent = \'Copy\'}, 2000)">Copy</button></pre>'}}),"\n",(0,a.jsxs)(o.h4,{id:"4-add-to-your-approuter",children:["4. Add to your ",(0,a.jsx)(o.code,{children:"AppRouter"})]}),"\n",(0,a.jsx)(o.div,{dangerouslySetInnerHTML:{__html:'<pre class="shiki min-light with-title" style="background-color: #ffffff; color: #24292eff" title="server/routers/_app.ts"><div class=\'code-title\'>server/routers/_app.ts</div><div class="language-id">ts</div><div class=\'code-container\'><code><div class=\'line\'><span style="color: #D32F2F">import</span><span style="color: #24292EFF"> </span><span style="color: #1976D2">*</span><span style="color: #24292EFF"> </span><span style="color: #D32F2F">as</span><span style="color: #24292EFF"> trpc </span><span style="color: #D32F2F">from</span><span style="color: #24292EFF"> </span><span style="color: #22863A">\'@trpc/server\'</span><span style="color: #24292EFF">;</span></div><div class=\'line\'><span style="color: #D32F2F">import</span><span style="color: #24292EFF"> { transformer } </span><span style="color: #D32F2F">from</span><span style="color: #24292EFF"> </span><span style="color: #22863A">\'../../utils/trpc\'</span><span style="color: #24292EFF">;</span></div><div class=\'line\'></div><div class=\'line\'><span style="color: #D32F2F">export</span><span style="color: #24292EFF"> </span><span style="color: #D32F2F">const</span><span style="color: #24292EFF"> </span><span style="color: #1976D2">appRouter</span><span style="color: #24292EFF"> </span><span style="color: #D32F2F">=</span><span style="color: #24292EFF"> </span><span style="color: #1976D2">trpc</span><span style="color: #6F42C1">.router</span><span style="color: #24292EFF">()</span><span style="color: #6F42C1">.transformer</span><span style="color: #24292EFF">(transformer);</span></div><div class=\'line\'><span style="color: #C2C3C5">// .query(...)</span></div></code></div><button type="button" aria-label="Copy code to clipboard" class="copy-button" onclick="navigator.clipboard.writeText(this.previousSibling.innerText);this.classList.add(\'copied\');this.textContent = \'Copied\';setTimeout(() => {this.classList.remove(\'copied\');this.textContent = \'Copy\'}, 2000)">Copy</button></pre>\n<pre class="shiki github-dark with-title" style="background-color: #0d1117; color: #c9d1d9" title="server/routers/_app.ts"><div class=\'code-title\'>server/routers/_app.ts</div><div class="language-id">ts</div><div class=\'code-container\'><code><div class=\'line\'><span style="color: #FF7B72">

1import</span><span style="color: #C9D1D9"> </span><span style="color: #79C0FF">*</span><span style="color: #C9D1D9"> </span><span style="color: #FF7B72">as</span><span style="color: #C9D1D9"> trpc </span><span style="color: #FF7B72">from</span><span style="color: #C9D1D9"> </span><span style="color: #A5D6FF">\'@trpc/server\'</span><span style="color: #C9D1D9">;</span></div><div class=\'line\'><span style="color: #FF7B72">import</span><span style="color: #C9D1D9"> { transformer } </span><span style="color: #FF7B72">from</span><span style="color: #C9D1D9"> </span><span style="color: #A5D6FF">\'../../utils/trpc\'</span><span style="color: #C9D1D9">;</span></div><div class=\'line\'></div><div class=\'line\'><span style="color: #FF7B72">export</span><span style="color: #C9D1D9"> </span><span style="color: #FF7B72">const</span><span style="color: #C9D1D9"> </span><span style="color: #79C0FF">appRouter</span><span style="color: #C9D1D9"> </span><span style="color: #FF7B72">=</span><span style="color: #C9D1D9"> trpc.</span><span style="color: #D2A8FF">router</span><span style="color: #C9D1D9">().</span><span style="color: #D2A8FF">transformer</span><span style="color: #C9D1D9">(transformer);</span></div><div class=\'line\'><span style="color: #8B949E">// .query(...)</span></div></code></div><button type="button" aria-label="Copy code to clipboard" class="copy-button" onclick="navigator.clipboard.writeText(this.previousSibling.innerText);this.classList.add(\'copied\');this.textContent = \'Copied\';setTimeout(() => {this.classList.remove(\'copied\');this.textContent = \'Copy\'}, 2000)">Copy</button></pre>'}}),"\n",(0,a.jsxs)(o.h2,{id:"datatransformer-interface",children:[(0,a.jsx)(o.code,{children:"DataTransformer"})," interface"]}),"\n",(0,a.jsx)(o.div,{dangerouslySetInnerHTML:{__html:'<pre class="shiki min-light" style="background-color: #ffffff; color: #24292eff"><div class="language-id">ts</div><div class=\'code-container\'><code><div class=\'line\'><span style="color: #D32F2F">type</span><span style="color: #24292EFF"> </span><span style="color: #6F42C1">DataTransformer</span><span style="color: #24292EFF"> </span><span style="color: #D32F2F">=</span><span style="color: #24292EFF"> {</span></div><div class=\'line\'><span style="color: #24292EFF">  </span><span style="color: #6F42C1">serialize</span><span style="color: #24292EFF">(object</span><span style="color: #D32F2F">:</span><span style="color: #24292EFF"> </span><span style="color: #1976D2">any</span><span style="color: #24292EFF">)</span><span style="color: #D32F2F">:</span><span style="color: #24292EFF"> </span><span style="color: #1976D2">any</span><span style="color: #24292EFF">;</span></div><div class=\'line\'><span style="color: #24292EFF">  </span><span style="color: #6F42C1">deserialize</span><span style="color: #24292EFF">(object</span><span style="color: #D32F2F">:</span><span style="color: #24292EFF"> </span><span style="color: #1976D2">any</span><span style="color: #24292EFF">)</span><span style="color: #D32F2F">:</span><span style="color: #24292EFF"> </span><span style="color: #1976D2">any</span><span style="color: #24292EFF">;</span></div><div class=\'line\'><span style="color: #24292EFF">};</span></div><div class=\'line\'></div><div class=\'line\'><span style="color: #D32F2F">type</span><span style="color: #24292EFF"> </span><span style="color: #6F42C1">CombinedDataTransformer</span><span style="color: #24292EFF"> </span><span style="color: #D32F2F">=</span><span style="color: #24292EFF"> {</span></div><div class=\'line\'><span style="color: #24292EFF">  input</span><span style="color: #D32F2F">:</span><span style="color: #24292EFF"> </span><span style="color: #6F42C1">DataTransformer</span><span style="color: #24292EFF">;</span></div><div class=\'line\'><span style="color: #24292EFF">  output</span><span style="color: #D32F2F">:</span><span style="color: #24292EFF"> </span><span style="color: #6F42C1">DataTransformer</span><span style="color: #24292EFF">;</span></div><div class=\'line\'><span style="color: #24292EFF">};</span></div></code></div><button type="button" aria-label="Copy code to clipboard" class="copy-button" onclick="navigator.clipboard.writeText(this.previousSibling.innerText);this.classList.add(\'copied\');this.textContent = \'Copied\';setTimeout(() => {this.classList.remove(\'copied\');this.textContent = \'Copy\'}, 2000)">Copy</button></pre>\n<pre class="shiki github-dark" style="background-color: #0d1117; color: #c9d1d9"><div class="language-id">ts</div><div class=\'code-container\'><code><div class=\'line\'><span style="color: #FF7B72">type</span><span style="color: #C9D1D9"> </span><span style="color: #FFA657">DataTransformer</span><span style="color: #C9D1D9"> </span><span style="color: #FF7B72">=</span><span style="color: #C9D1D9"> {</span></div><div class=\'line\'><span style="color: #C9D1D9">  </span><span style="color: #D2A8FF">serialize</span><span style="color: #C9D1D9">(</span><span style="color: #FFA657">object</span><span style="color: #FF7B72">:</span><span style="color: #C9D1D9"> </span><span style="color: #79C0FF">any</span><span style="color: #C9D1D9">)</span><span style="color: #FF7B72">:</span><span style="color: #C9D1D9"> </span><span style="color: #79C0FF">any</span><span style="color: #C9D1D9">;</span></div><div class=\'line\'><span style="color: #C9D1D9">  </span><span style="color: #D2A8FF">deserialize</span><span style="color: #C9D1D9">(</span><span style="color: #FFA657">object</span><span style="color: #FF7B72">:</span><span style="color: #C9D1D9"> </span><span style="color: #79C0FF">any</span><span style="color: #C9D1D9">)</span><span style="color: #FF7B72">:</span><span style="color: #C9D1D9"> </span><span style="color: #79C0FF">any</span><span style="color: #C9D1D9">;</span></div><div class=\'line\'><span style="color: #C9D1D9">};

1</span></div><div class=\'line\'></div><div class=\'line\'><span style="color: #FF7B72">type</span><span style="color: #C9D1D9"> </span><span style="color: #FFA657">CombinedDataTransformer</span><span style="color: #C9D1D9"> </span><span style="color: #FF7B72">=</span><span style="color: #C9D1D9"> {</span></div><div class=\'line\'><span style="color: #C9D1D9">  </span><span style="color: #FFA657">input</span><span style="color: #FF7B72">:</span><span style="color: #C9D1D9"> </span><span style="color: #FFA657">DataTransformer</span><span style="color: #C9D1D9">;</span></div><div class=\'line\'><span style="color: #C9D1D9">  </span><span style="color: #FFA657">output</span><span style="color: #FF7B72">:</span><span style="color: #C9D1D9"> </span><span style="color: #FFA657">DataTransformer</span><span style="color: #C9D1D9">;</span></div><div class=\'line\'><span style="color: #C9D1D9">};</span></div></code></div><button type="button" aria-label="Copy code to clipboard" class="copy-button" onclick="navigator.clipboard.writeText(this.previousSibling.innerText);this.classList.add(\'copied\');this.textContent = \'Copied\';setTimeout(() => {this.classList.remove(\'copied\');this.textContent = \'Copy\'}, 2000)">Copy</button></pre>'}})]})}function d(s={}){let{wrapper:o}={...(0,e.R)(),...s.components};return o?(0,a.jsx)(o,{...s,children:(0,a.jsx)(c,{...s})}):c(s)}},77334(s,o,n){n.d(o,{R:()=>t,x:()=>p});var l=n(64700);let a={},e=l.createContext(a);function t(s){let o=l.useContext(e);return l.useMemo(function(){return"function"==typeof s?s(o):{...o,...s}},[o,s])}function p(s){let o;return o=s.disableParentContext?"function"==typeof s.components?s.components(a):s.components||a:t(s.components),l.createElement(e.Provider,{value:o},s.children)}}}]);

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.