1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
---title: tRPCdescription: This doc describes tRPC extension.nav: 4.01keywords: rpc,trpc,typescript,t3---
You can use Jotai with [tRPC](https://trpc.io).
### Install
You have to install `jotai-trpc`, `@trpc/client` and `@trpc/server` to use the extension.
```npm i jotai-trpc @trpc/client @trpc/server```
### Usage
```tsimport { createTRPCJotai } from 'jotai-trpc'
const trpc = createTRPCJotai<MyRouter>({  links: [    httpLink({      url: myUrl,    }),  ],})
const idAtom = atom('foo')const queryAtom = trpc.bar.baz.atomWithQuery((get) => get(idAtom))```
### atomWithQuery
`...atomWithQuery` creates a new atom with "query". It internally uses [Vanilla Client](https://trpc.io/docs/vanilla)'s `...query` procedure.
```tsximport { atom, useAtom } from 'jotai'import { httpLink } from '@trpc/client'import { createTRPCJotai } from 'jotai-trpc'import { trpcPokemonUrl } from 'trpc-pokemon'import type { PokemonRouter } from 'trpc-pokemon'
const trpc = createTRPCJotai<PokemonRouter>({  links: [    httpLink({      url: trpcPokemonUrl,    }),  ],})
const NAMES = [  'bulbasaur',  'ivysaur',  'venusaur',  'charmander',  'charmeleon',  'charizard',  'squirtle',  'wartortle',  'blastoise',]
const nameAtom = atom(NAMES[0])
const pokemonAtom = trpc.pokemon.byId.atomWithQuery((get) => get(nameAtom))
const Pokemon = () => {  const [data, refresh] = useAtom(pokemonAtom)  return (    <div>      <div>ID: {data.id}</div>      <div>Height: {data.height}</div>      <div>Weight: {data.weight}</div>      <button onClick={refresh}>Refresh</button>    </div>  )}```
#### Examples
<CodeSandbox id="j1vhcg" />### atomWithMutation
`...atomWithMutation` creates a new atom with "mutate". It internally uses [Vanilla Client](https://trpc.io/docs/vanilla)'s `...mutate` procedure.
FIXME: add code example and codesandbox
### atomWithSubscription
`...atomWithSubscription` creates a new atom with "subscribe". It internally uses [Vanilla Client](https://trpc.io/docs/vanilla)'s `...subscribe` procedure.
FIXME: add code example and codesandbox