https://trpc.io/assets/js/d71db0fd.4bd8537b.js

1"use strict";(self.webpackChunkwww=self.webpackChunkwww||[]).push([["31136"],{89293(s,t,e){e.r(t),e.d(t,{metadata:()=>o,default:()=>d,frontMatter:()=>a,contentTitle:()=>i,toc:()=>c,assets:()=>p});var o=JSON.parse('{"id":"client/vanilla","title":"Vanilla client","description":"The magic of tRPC is making strongly typed API calls without relying on code generation. With full-stack TypeScript projects, you can directly import types from the server into the client! This is a vital part of how tRPC works.","source":"@site/versioned_docs/version-9.x/client/vanilla.md","sourceDirName":"client","slug":"/vanilla","permalink":"/docs/v9/vanilla","draft":false,"unlisted":false,"editUrl":"https://github.com/trpc/trpc/tree/main/www/versioned_docs/version-9.x/client/vanilla.md","tags":[],"version":"9.x","frontMatter":{"id":"vanilla","title":"Vanilla client","sidebar_label":"Create Vanilla Client","slug":"/vanilla"},"sidebar":"docs","previous":{"title":"Adapter: Amazon Lambda","permalink":"/docs/v9/aws-lambda"},"next":{"title":"Links & Request Batching","permalink":"/docs/v9/links"}}'),l=e(27968),n=e(77334);let a={id:"vanilla",title:"Vanilla client",sidebar_label:"Create Vanilla Client",slug:"/vanilla"},i,p={},c=[{value:"Initialize a tRPC client",id:"initialize-a-trpc-client",level:3}];function r(s){let t={a:"a",code:"code",div:"div",em:"em",h3:"h3",p:"p",strong:"strong",...(0,n.R)(),...s.components};return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsxs)(t.p,{children:["The magic of tRPC is making ",(0,l.jsx)(t.em,{children:"strongly typed"})," API calls without relying on code generation. With full-stack TypeScript projects, you can directly ",(0,l.jsx)(t.em,{children:"import types from the server into the client"}),"! This is a vital part of how tRPC works."]}),"\n",(0,l.jsxs)(t.p,{children:["Import the ",(0,l.jsx)(t.code,{children:"AppRouter"})," type into your client from the file your root tRPC router is defined. This single type represents the type signature of your entire API."]}),"\n",(0,l.jsx)(t.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"> </span><span style="color: #D32F2F">type</span><span style="color: #24292EFF"> { AppRouter } </span><span style="color: #D32F2F">from</span><span style="color: #24292EFF"> </span><span style="color: #22863A">\'../path/to/server/trpc\'</span><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="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"> </span><span style="color: #FF7B72">type</span><span style="color: #C9D1D9"> { AppRouter } </span><span style="color: #FF7B72">from</span><span style="color: #C9D1D9"> </span><span style="color: #A5D6FF">\'../path/to/server/trpc\'</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,l.jsxs)(t.p,{children:["The ",(0,l.jsx)(t.code,{children:"import type"})," keywords let you import from ",(0,l.jsx)(t.em,{children:"any TypeScript file"})," on your filesystem. Plus ",(0,l.jsx)(t.code,{children:"import type"})," can only import types, ",(0,l.jsx)(t.strong,{children:"NOT"})," code. So there's no danger of accidentally importing server-side code into your client. All calls to ",(0,l.jsx)(t.code,{children:"import type"})," are ",(0,l.jsx)(t.em,{children:"always fully erased"})," from your compiled JavaScript bundle (",(0,l.jsx)(t.a,{href:"https://www.t

1ypescriptlang.org/docs/handbook/release-notes/typescript-3-8.html#type-only-imports-and-export",children:"source"}),")."]}),"\n",(0,l.jsx)(t.h3,{id:"initialize-a-trpc-client",children:"Initialize a tRPC client"}),"\n",(0,l.jsxs)(t.p,{children:["Create a typesafe client with the ",(0,l.jsx)(t.code,{children:"createTRPCClient"})," method from ",(0,l.jsx)(t.code,{children:"@trpc/client"}),":"]}),"\n",(0,l.jsx)(t.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: #C2C3C5">// pages/index.tsx</span></div><div class=\'line\'><span style="color: #D32F2F">import</span><span style="color: #24292EFF"> { createTRPCClient } </span><span style="color: #D32F2F">from</span><span style="color: #24292EFF"> </span><span style="color: #22863A">\'@trpc/client\'</span><span style="color: #24292EFF">;</span></div><div class=\'line\'><span style="color: #D32F2F">import</span><span style="color: #24292EFF"> </span><span style="color: #D32F2F">type</span><span style="color: #24292EFF"> { AppRouter } </span><span style="color: #D32F2F">from</span><span style="color: #24292EFF"> </span><span style="color: #22863A">\'../path/to/server/trpc\'</span><span style="color: #24292EFF">;</span></div><div class=\'line\'></div><div class=\'line\'><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">  url</span><span style="color: #D32F2F">:</span><span style="color: #24292EFF"> </span><span style="color: #22863A">\'http://localhost:5000/trpc\'</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: #8B949E">// pages/index.tsx</span></div><div class=\'line\'><span style="color: #FF7B72">import</span><span style="color: #C9D1D9"> { createTRPCClient } </span><span style="color: #FF7B72">from</span><span style="color: #C9D1D9"> </span><span style="color: #A5D6FF">\'@trpc/client\'</span><span style="color: #C9D1D9">;</span></div><div class=\'line\'><span style="color: #FF7B72">import</span><span style="color: #C9D1D9"> </span><span style="color: #FF7B72">type</span><span style="color: #C9D1D9"> { AppRouter } </span><span style="color: #FF7B72">from</span><span style="color: #C9D1D9"> </span><span style="color: #A5D6FF">\'../path/to/server/trpc\'</span><span style="color: #C9D1D9">;</span></div><div class=\'line\'></div><div class=\'line\'><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">  url: </span><span style="color: #A5D6FF">\'http://localhost:5000/trpc\'</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>'}}),"\n",(0,l.jsxs)(t.p,{children:["As you can see, we passed ",(0,l.jsx)(t.code,{children:"AppRouter"})," as a ",(0,l.jsx)(t.strong,{children:"type argument"})," of ",(0,l.jsx)(t.code,{children:"createTRPCClient"}),". This returns a strongly typed ",(0,l.jsx)(t.code,{children:"client"})," instance:"]}),"\n",(0,l.jsx)(t.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">const</span><span style="color: #24292EFF"> </span><span style="color: #1976D2">bilbo</span><span style="color: #24292EFF"> </span><span style="color: #D32F2F">=</span><span style="color: #24292EFF"> </span><span style="color: #D32F2F">await</span><span style="color: #24292EFF"> </span><span style="color: #1976D2">client</span><span style="color: #6F42C1">.query</span><span style="color: #24292EFF">(</span><span style="color: #22863A">\'getUser\'</span><span style="color: #212121">,</span><span style="color: #24292EFF"> </span><span style="color: #22863A">\'id_bilbo\'</span><span style="color: #24292EFF">);</span></div><div class=\'line\'><span style="color: #C2C3C5">// =&gt; { id: \'id_bilbo\', name: \'Bilbo\' };</span></div><div class=\'line\'></div><div class=\'line\'><span style="color: #D32F2F">const</span><span style="color: #24292EFF"> </span><span style="color: #1976D2">frodo</span><span style="color: #24292EFF"> </span><span style="color: #D32F2F">=</span><span style="color: #24292EFF"> </span><span style="color: #D32F2F">await</span><span style="color: #24292EFF"> </span><span style="color: #1976D2">client</span><span style="color: #6F42C1">.mutation</span><span style="color: #24292EFF">(</span><span style="color: #22863A">\'createUser\'</span><span style="color: #212121">,</span><span style="color: #24292EFF"> { name</span><span style="color: #D32F2F">:</span><span style="color: #24292EFF"> </span><span style="color: #22863A">

1\'Frodo\'</span><span style="color: #24292EFF"> });</span></div><div class=\'line\'><span style="color: #C2C3C5">// =&gt; { id: \'id_frodo\', name: \'Frodo\' };</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">const</span><span style="color: #C9D1D9"> </span><span style="color: #79C0FF">bilbo</span><span style="color: #C9D1D9"> </span><span style="color: #FF7B72">=</span><span style="color: #C9D1D9"> </span><span style="color: #FF7B72">await</span><span style="color: #C9D1D9"> client.</span><span style="color: #D2A8FF">query</span><span style="color: #C9D1D9">(</span><span style="color: #A5D6FF">\'getUser\'</span><span style="color: #C9D1D9">, </span><span style="color: #A5D6FF">\'id_bilbo\'</span><span style="color: #C9D1D9">);</span></div><div class=\'line\'><span style="color: #8B949E">// =&gt; { id: \'id_bilbo\', name: \'Bilbo\' };</span></div><div class=\'line\'></div><div class=\'line\'><span style="color: #FF7B72">const</span><span style="color: #C9D1D9"> </span><span style="color: #79C0FF">frodo</span><span style="color: #C9D1D9"> </span><span style="color: #FF7B72">=</span><span style="color: #C9D1D9"> </span><span style="color: #FF7B72">await</span><span style="color: #C9D1D9"> client.</span><span style="color: #D2A8FF">mutation</span><span style="color: #C9D1D9">(</span><span style="color: #A5D6FF">\'createUser\'</span><span style="color: #C9D1D9">, { name: </span><span style="color: #A5D6FF">\'Frodo\'</span><span style="color: #C9D1D9"> });</span></div><div class=\'line\'><span style="color: #8B949E">// =&gt; { id: \'id_frodo\', name: \'Frodo\' };</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:t}={...(0,n.R)(),...s.components};return t?(0,l.jsx)(t,{...s,children:(0,l.jsx)(r,{...s})}):r(s)}},77334(s,t,e){e.d(t,{R:()=>a,x:()=>i});var o=e(64700);let l={},n=o.createContext(l);function a(s){let t=o.useContext(n);return o.useMemo(function(){return"function"==typeof s?s(t):{...t,...s}},[t,s])}function i(s){let t;return t=s.disableParentContext?"function"==typeof s.components?s.components(l):s.components||l:a(s.components),o.createElement(n.Provider,{value:t},s.children)}}}]);